एक दूसरे के शीर्ष पर दो कैनवास लेयरिंग + घटना पर क्लिक करें

Question

मैं एक दूसरे के शीर्ष पर दो कैनवास तत्वों को ले जाना चाहता हूं। उनका उपयोग एक गेम के लिए किया जाता है, जहां निचला कैनवास एक हेक्सग्रीड प्रदर्शित करेगा जबकि ऊपरी कैनवास का मतलब मुद्दों/ऑर्डर (मूल रूप से तीर या हेक्स-हाइलाइटिंग - मैं एक विशाल हेक्सग्रीड को एक अरब बार फिर से नहीं लेना चाहता) खिलाड़ी।

कैनवास zIndex 1/2 द्वारा स्तरित हैं।

हालांकि, समस्या यह है कि शीर्ष कैनवास पर प्रदर्शित ऑर्डर को कैनवास के नीचे "क्लिक" और "mousemove" घटनाओं के जवाब में खींचा जाना चाहिए।

जाहिर है, "हेक्सग्रीड" कैनवास के शीर्ष पर "ऑर्डर" कैनवास को ले कर, किसी भी मूसमॉव और क्लिक इवेंट्स को "हेक्सग्रीड" कैनवास द्वारा ट्रिगर नहीं किया जाएगा, क्योंकि अब यह ईवेंट प्राप्त नहीं होता है।

क्या "आगे" करने का कोई तरीका है, यानी एक तत्व से दूसरे तत्व में घटनाओं का प्रचार करना या मेरी समस्या का समाधान करने का एक और स्मार्ट तरीका क्या होगा?

Answer 1

शायद आप अन्य कैनवास की घटनाओं को उदाहरण के लिए दस्तावेज़.getElementById ('otherCanvas') के साथ ट्रिगर कर सकते हैं। क्लिक करें()?

Answer 2

क्या आपको कैनवास के मूल तत्व पर ईवेंट सुनने की आवश्यकता हो सकती है? और घटना के बाद आप दोनों से डेटा एकत्र करेंगे और इसे संसाधित करेंगे?

<div onclick="..."> 
    <canvas> 
    <canvas> 
</div> 

ऐसी स्थितियों के साथ अनुभव, कैनवस जड़ के सभी अंतरिक्ष में ले लिया और div अंदर निर्देशांक कैनवास के लिए ही कर रहे हैं है।

Answer 3

मैं घटना को अगले कैनवास में फैलाना चाहता हूं, अगर कैनवास ओवरलैप्ड हो तो समन्वय समान होंगे। कवर कैनवास के अंदर परिभाषित वस्तुओं के लिए एक ट्रिगर बनाया जा सकता है।

var Game = {canvas1: undefined, canvas2: undefined}; 
 

 
Game.canvas1 = document.getElementById('canvas1'); 
 
Game.canvas1.addEventListener('click', on_canvas_click1, false); 
 

 
Game.canvas2 = document.getElementById('canvas2'); 
 
Game.canvas2.addEventListener('click', on_canvas_click2, false); 
 

 
function on_canvas_click1(ev) { 
 
    //do your stuff 
 
    on_canvas_click2(ev); 
 
} 
 

 
function on_canvas_click2(ev) { 
 
    
 
\t var mousePos = getMousePos(Game.canvas2, ev); 
 
    
 
     var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + " target: " + mousePos.target + " Id: " + mousePos.target.getAttribute("id");; 
 
     writeMessage(Game.canvas2, message); 
 
} 
 

 

 
function writeMessage(canvas, message) { 
 
     var context = canvas.getContext('2d'); 
 
     context.clearRect(0, 0, canvas.width, canvas.height); 
 
     context.font = '8pt Calibri'; 
 
     context.fillStyle = 'black'; 
 
     context.fillText(message, 10, 25); 
 
     } 
 
function getMousePos(canvas, evt) { 
 
     var rect = canvas.getBoundingClientRect(); 
 
     return { 
 
      x: evt.clientX - rect.left, 
 
      y: evt.clientY - rect.top, 
 
      target: evt.target 
 
     }; 
 
     }

<canvas id="canvas1" width="400" height="400" style="border: 1px solid black"></canvas> 
 

 
<canvas id="canvas2" width="400" height="400" style="border: 1px solid black"></canvas>