HTML5帆布绘图

Question

我有一张100 (宽)x 100 (高)的帆布，排成一行，列为5x6。

它有一个三角形画在它们上，目前画布的排列方式是每个帆布互相重叠。我想添加对三角形区域的点击

当单击位于顶部画布的透明区域时，是否有一种绕过对底层画布的单击的方法？

Answer 1

使用EaselJS，您可以使用nextStage属性将CreateJS鼠标交互传递给DOM中彼此低于的画布。

// Overlapping Canvases
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

// Multiple Stages
stage1 = new createjs.Stage("canvas1"),
  stage2 = new createjs.Stage("canvas2");

// Mouse events on content in each stage
stage1child.on("click", handleClick);
stage2child.on("click", handleClick);

// Stage 2 is higher in the DOM, so it will receive the mouse events first.
// Pass them on to the lower canvas/stage
stage2.nextStage = stage1;

以下是更多信息：

• nextStage文档
• TwoStages在GitHub中的演示
• TwoStages在createjs.com上的演示

Answer 2

我没有完全理解你的问题，但是如果你只想让点击注册到画布上，然后你需要禁用顶部形状的鼠标交互，如下所示：

triangleShape.mouseEnabled = false;

通过这样做，任何鼠标事件都将被忽略，并被传递给下面的对象。