这是问题的一个小提琴:
https://jsfiddle.net/y5cu0pxf/
我已经搜索过并尝试了很多,但找不到问题。我只想让笔准确地绘制鼠标点击的位置,但由于某种原因它会偏移。
有什么想法吗?
以下是代码:
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = window.innerWidth * 0.5;
canvas.height = window.innerHeight;
var hRatio = canvas.width / img.width;
var vRatio = canvas.height / img.height;
var ratio = Math.min (hRatio, vRatio);
var centerShift_x = (canvas.width - (img.width * ratio)) / 2;
var centerShift_y = (canvas.height - (img.height * ratio)) / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height,
centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
var isDrawing;
var rect = canvas.getBoundingClientRect();
var offsetX = rect.left;
var offsetY = rect.top;
canvas.onmousedown = function(e) {
isDrawing = true;
ctx.moveTo(e.clientX - offsetX, e.clientY - offsetY);
};
canvas.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX - offsetX, e.clientY - offsetY);
ctx.stroke();
}
};
canvas.onmouseup = function() {
isDrawing = false;
};
答案 0 :(得分:10)
画布有两个大小属性,一个表示分辨率,以像素为单位,另一个以CSS为单位指定显示大小。这两者是相互独立的。
// HTML <canvas id = "myCan"><canvas>
// To set the resolution use the canvas width and height properties
myCan.width = 1024;
myCan.height = 1024;
// To set the display size use the style width and height
myCan.style.width = "100%"; // Note you must post fix the unit type %,px,em
myCan.style.height = "100%";
默认情况下,画布分辨率设置为300 x 150像素。画布显示大小取决于布局和CSS规则。
渲染到画布2D上下文时,您使用像素坐标而不是样式坐标进行渲染。
获取画布的位置
var canvasBounds = myCan.getBoundingClientRect();
鼠标坐标以像素为单位。
使用一个事件处理程序来处理所有鼠标IO
const mouse = {
x : 0, y : 0, // coordinates
lastX : 0, lastY : 0, // last frames mouse position
b1 : false, b2 : false, b3 : false, // buttons
buttonNames : ["b1","b2","b3"], // named buttons
}
function mouseEvent(event){
var bounds = myCan.getBoundingClientRect();
// get the mouse coordinates, subtract the canvas top left and any scrolling
mouse.x = event.pageX - bounds.left - scrollX;
mouse.y = event.pageY - bounds.top - scrollY;
要获得正确的画布坐标,您需要缩放鼠标坐标以匹配画布分辨率坐标。
// first normalize the mouse coordinates from 0 to 1 (0,0) top left
// off canvas and (1,1) bottom right by dividing by the bounds width and height
mouse.x /= bounds.width;
mouse.y /= bounds.height;
// then scale to canvas coordinates by multiplying the normalized coords with the canvas resolution
mouse.x *= myCan.width;
mouse.y *= myCan.height;
然后获取您感兴趣的其他信息。
if(event.type === "mousedown"){
mouse[mouse.buttonNames[event.which-1]] = true; // set the button as down
}else if(event.type === "mouseup"){
mouse[mouse.buttonNames[event.which-1]] = false; // set the button up
}
}
当处理类似于使用画布的绘图应用程序的鼠标时,无法直接将事件侦听器添加到画布。如果你这样做,当用户离开画布时你会丢失鼠标。如果在离开画布时用户释放鼠标,您将不知道按钮是否已启动。结果是按钮卡在了下面。 (就像你的小提琴一样)
要捕获鼠标,以便获得按钮关闭时发生的所有事件,如果用户移动了画布,或者离开页面,或者屏幕外需要收听{{1}鼠标事件。
所以要添加上面的鼠标事件监听器
document's
现在document.addEventListener("mousemove",mouseEvent);
document.addEventListener("mousedown",mouseEvent);
document.addEventListener("mouseup",mouseEvent);
处理所有页面点击,并在按钮关闭时将鼠标专门捕获到您的页面。
您可以通过查看mouseEvent
event.target
鼠标事件可能会非常快速地发生,一些设置会以超过每秒600个事件的速度触发鼠标移动。如果使用鼠标事件渲染到画布,则会浪费大量CPU时间,并且您还将在DOM同步合成和布局引擎之外进行渲染。
通过 // only start mouse down events if the users started on the canvas
if(event.type === "mousedown" && event.target.id === "myCan"){
mouse[mouse.buttonNames[event.which-1]] = true;
}
使用动画循环绘制。
requestAnimationFrame
这应该可以让您的绘图应用程序正常工作。
答案 1 :(得分:0)
您正在使用CSS为画布设置静态宽度。这很好但是它可以拉伸画布以适应。在将x和y值绘制到屏幕之前,您需要找到x和y值的结果值。
此示例的代码变为:
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
canvas.width = window.innerWidth * 0.5;
canvas.height = window.innerHeight;
var hRatio = canvas.width / img.width;
var vRatio = canvas.height / img.height;
var ratio = Math.min(hRatio, vRatio);
var centerShift_x = (canvas.width - (img.width * ratio)) / 2;
var centerShift_y = (canvas.height - (img.height * ratio)) / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height,
centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
var isDrawing;
var rect = canvas.getBoundingClientRect();
var offsetX = rect.left;
var offsetY = rect.top;
var temp = document.getElementById('imageCanvas');
canvas.onmousedown = function(e) {
isDrawing = true;
ctx.moveTo((e.clientX - offsetX)/(800/temp.width), (e.clientY - offsetY)/(400/temp.height));
};
canvas.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo((e.clientX - offsetX)/(800/temp.width), (e.clientY - offsetY)/(400/temp.height));
ctx.stroke();
}
};
canvas.onmouseup = function() {
isDrawing = false;
};
window.addEventListener("scroll",function(){
rect = canvas.getBoundingClientRect();
offsetX = rect.left;
offsetY = rect.top;
})
如果800和400是画布的计算宽度和高度,您可以使用jQuery轻松获取它。
我相信我在这里编辑了小提琴:https://jsfiddle.net/y5cu0pxf/4/