一個僅需原生api的canvas交互庫⭐️

原由

做爲一個pixi.js，p5.js等圖形庫的使用者，我以爲他們的上手成本體如今：

1.你得先去學習它們庫的語法與層級/事件概念。

2.在沒讀源碼前它們就是一個黑盒，出了奇怪的bug難以去定位，網上的中文經驗也不多，要想把它們使用好須要時間去積累經驗。

3.不少時候我僅僅只是想去實現並不複雜的canvas互動效果，卻要引用一個很是大的庫。

這個庫就是爲了解決這些矛盾，它的特色是：

1. 徹底是基於原生api來繪圖，他並非一個"圖形庫"，它只是一個通用的canvas的交互擴展。
2. 源碼沒壓縮也就300多行，並不須要你去慢慢"馴服"這個庫。
3. 由於第二點，因此體積很是小。

實例

下面是這個庫的使用實例

let app = new Moa.App(document.querySelector(".stage"));

let rect = app.Obj(200, 200, 100, 100, ctx => {
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, 100, 100);
});

rect.on("mouseenter", function(e) {
  this.draw = ctx => {
    ctx.fillStyle = "#c0ebff";
    ctx.fillRect(0, 0, 100, 100);
  };
});

app.run()
複製代碼

這個庫全部的用法都形似上面那樣，像dom同樣綁定事件，接着改寫 draw函數完成視圖的變換。對於一個熟悉原生canvas語法的人來講幾乎沒有上手成本。

對象

在這個庫中，全部可視的東西都是由繪圖對象Obj組成，咱們調用app.Obj便可新生成一個繪圖對象，它的參數分別是此對象的起始座標x，此對象的起始座標y，此對象的碰撞區域寬度width，此對象的碰撞區域高度height，此對象的繪圖函數draw，以及一個可選參數此對象的層級zIndex。

上下文變異

在上面的例子中，有這樣一段代碼

ctx => {
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, 100, 100);
}
複製代碼

這個回調函數會被註冊爲此Obj的繪圖函數draw，而在實際調用時，這個ctx並非canvas.getContext('2d')獲得的ctx，而是它的變異，它全部方法必要的座標都變成了相對座標。

下面展現了一段將這個對象變爲可拖拽對象的代碼

let ifDrag = false;
const p = {
  x: undefined,
  y: undefined
};

rect.on("mousedown", function(e) {
  ifDrag = true;
  p.x = e.x;
  p.y = e.y;
});
rect.on("mouseup", function(e) {
  ifDrag = false;
});    
rect.on("mousemove", function(e) {
  if (ifDrag) {
    this.x += e.x - p.x;
    this.y += e.y - p.y;
    p.x = e.x;
    p.y = e.y;
  }
});
複製代碼

事件

支持["click", "mousemove", "mouseup", "mousedown", "mouseover", "mouseenter", "mouseleave"] 注意這裏只有調用了Obj.on("eventname", cb)的Obj纔會被加入下面的層級比較中，若是歷來沒有調用過on方法，那麼這個Obj在層級中是一個可穿透的對象。

層級

這個庫中的層級分爲三個層級，低層級，普通層級，高層級。沒有設置zIndex默認爲普通層級。

好比這樣創造一個Obj

let rect = app.Obj(200, 200, 100, 100, ctx => {
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, 100, 100);
}, 1);
複製代碼

最後多了一個參數1做爲zIndex，若果它大於0，則會被推入高層級，undefined則會推入普通層級，小於0則會推入低層級。渲染時會先根據zIndex渲染低層級，再根據普通層級的生成順序渲染普通層級，最後再根據zIndex渲染高層級。

事件也一樣遵循和渲染同樣的前後順序，兩個Obj重疊，只會觸發層級最高的那一個的事件。

最後

倉庫地址 github.com/moayuisuda/…

完善中，bug不知道還有多少，歡迎issue。