鼠标在多个画布上的坐标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中对此有了更多的想法。