[英]Mouse Coords over Multiple Canvases HTML5/Javascript
我正在尝试使用2个画布,我希望它们都接受放入其中的图像,并使用鼠标单击来操纵图像。 这是我正在处理的代码。
我有一个地方,如果我只有'droppedImage'画布的事件侦听器,它可以正常工作,一旦我为'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);
}
}
}
从理论上讲,如果您有两组画布并将事件侦听器都添加到它们中,那么这两组事件侦听器将按设计同时启动 。 最好有一个附加了事件侦听器的画布,然后检测鼠标坐标并操纵被单击的图像。 请记住,您不能在画布内部仅对画布本身具有对绘制的精灵的单击处理程序; 您检查鼠标坐标是否在绘制的精灵内。
在您的方案中,我将简单地复制放入的图像,并将其传递给第二个canvas元素。 我假设您正在做某种形式的双向图像编辑应用程序; 在这种情况下,我将在左侧留一个“放物区”,以使图像进入,然后它会出现,在右侧可编辑。 然后仅在一张画布上设置单击处理程序。 在这个线程中 ,我对此也有更多的想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.