Question

我有一个100（宽）x 100（高）帆布排列成行和列5 x 6

它上面绘有一个三角形，当前画布的排列方式使每个画布彼此重叠。我想在三角区域添加点击

当点击位于顶部画布的透明区域

时，有没有办法绕过点击底层画布

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;

以下是更多信息：

Answer 2

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

triangleShape.mouseEnabled = false;

通过执行此操作，此形状将忽略任何鼠标事件，并将其传递给下面的对象。

HTML5画布绘图

2 个答案: