鼠標在多個畫布上的座標HTML5/Javascript

Question

我正在嘗試使用2個畫布，我希望它們都接受放入它們的圖像，並使用鼠標點擊操作圖像。這是我正在處理的代碼。

我有它，如果我只有'droppedImage'畫布的eventlisteners，它工作正常，只要我爲'changeImage'畫布放置處理程序，它就會看到第二個畫布並將座標報告爲第一個畫布，它不再顯示RGB值或更改第三個畫布'selectedColour'的背景

發佈此信息作爲我上牀睡覺時，如果有人給出答案或需要更多信息，我將在明天工作之前彈出更新。

window.onload = function() { 
    var droppedImage = document.getElementById("droppedImage"), 
     ctx = droppedImage.getContext("2d"); 
    droppedImage.addEventListener("mouseup", mpos); 
     // init event handlers 
    droppedImage.addEventListener("dragenter", dragEnter, false); 
    droppedImage.addEventListener("dragexit", dragExit, false); 
    droppedImage.addEventListener("dragover", dragOver, false); 
    droppedImage.addEventListener("drop", drop, false); 

     var changeImage = document.getElementById("changeImage"), 
     ctx = changeImage.getContext("2d"); 
    changeImage.addEventListener("mouseup", mpos); 
    // init event handlers 
    changeImage.addEventListener("dragenter", dragEnter, false); 
    changeImage.addEventListener("dragexit", dragExit, false); 
    changeImage.addEventListener("dragover", dragOver, false); 
    changeImage.addEventListener("drop", drop, false); 

    var selectedColour = document.getElementById("selectedColour"); 

function dragEnter(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
} 

function dragExit(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
} 

function dragOver(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
} 

function drop(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; 
    var count = files.length; 

    // Only call the handler if 1 or more files was dropped. 
    if (count >0) 
     importImage(files); 
} 




function mpos(e) { 
    var cX = 0, 
     cY = 0; 

    if (event.pageX || event.pageY) { 
     cX = event.pageX; 
     cY = event.pageY; 
    } 
    else { 
     cX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     cY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 

    cX -= droppedImage.offsetLeft; 
    cY -= droppedImage.offsetTop; 

    // ctx.fillRect(cX, cY, 2, 2); 

    alert("X co-ord : "+ cX +", Y co-ord : "+ cY); 
    var imageData = ctx.getImageData(cX, cY, 1, 1); 
    alert("Pixel 1: "+ imageData.data[0]+", "+imageData.data[1]+", "+ imageData.data[2]+", "+ imageData.data[3]); 
    selectedColour.style.backgroundColor = "rgb("+imageData.data[0]+","+imageData.data[1]+","+imageData.data[2]+")"; 

} 
} 


function importImage(files) { 

    var file = files[0]; 
    var reader = new FileReader; 
    reader.onloadend = handleReaderLoadEnd; 
    reader.readAsDataURL(file); 



function handleReaderLoadEnd(evt){  


    var canvas = document.getElementsByTagName('canvas')[0]; 
    var ctx = canvas.getContext('2d'); 
    var img = new Image; 
     img.src = event.target.result;   
     img.onload = function() {  
     width = img.width; 
     height = img.height;   
     var scaleX, scaleY, scale; 
     var scaledWidth, scaledHeight; 
     scaleX = width/canvas.width; 
     scaleY = height/canvas.height; 
     scale = scaleX > scaleY ? scaleX : scaleY; 
     scaledWidth = width/scale; 
     scaledHeight = height/scale; 
     ctx.clearRect(0,0, canvas.width, canvas.height); 
     ctx.drawImage(img, (canvas.width - scaledWidth)/2, (canvas.height - scaledHeight)/2, scaledWidth, scaledHeight); 

     } 
    } 


} 

Answer 1

從理論上講，如果你有兩套畫布和事件偵聽器添加到他們兩個，然後兩套事件偵聽器將在同一時間火，通過設計。最好有一個附有事件監聽器的畫布，然後檢測鼠標座標並操作被點擊的圖像。請記住，您不能在畫布內的繪製精靈上單擊處理程序，只能在畫布本身上使用;你檢查鼠標座標是否在繪製的精靈中。

在你的場景中，我只需複製放入的圖像並將其傳遞給第二個canvas元素。我假設你正在做某種雙向圖像編輯應用程序;在這種情況下，我會在左側放置一個「放置區域」，以便圖像進入，然後在右側顯示，可編輯。然後只在一個畫布上單擊處理程序。我還在this thread中對此有了更多的想法。