HTML5 Canvas Zeichnung

Question

I haben eine 100 (Breite) · 100 (Höhe) Leinwand in einer Reihe angeordnet sind und die Säule von 5 x 6

es ein Dreieck auf sie zur Zeit der Leinwand in einer solchen Weise angeordnet sind, gezogen hat, dass Jede Leinwand überlappt sich. Ich möchte Sie auf die Dreiecksfläche

ist es eine Möglichkeit, auf die zugrunde liegende Leinwand klicken zu umgehen, um hinzuzufügen, wenn der Klick in transparenten Bereich der Top-Leinwand ist

Answer 1

Mit EaselJS können Sie die nextStage-Eigenschaft verwenden, um CreateJS-Mausinteraktionen an Leinwände zu übergeben, die untereinander im DOM liegen.

// 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; 

ist hier weitere Informationen:

• nextStage documentation
• TwoStages demo in GitHub
• TwoStages demo on createjs.com

Answer 2

ich nicht ganz Ihre Frage verstanden haben, aber wenn Sie wollen einfach nur für das klicken auf die Leinwand unten die Form registrieren, dann müssen Sie die Maus-Interaktion für die Form auf der Oberseite deaktivieren, wie folgt aus:

triangleShape.mouseEnabled = false;

auf diese Weise werden alle Mausereignisse sein für diese Form ignoriert und stattdessen an die darunter liegenden Objekte übergeben.