我在页面上有一定尺寸的HTML5画布
<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;">
现在,当鼠标被拖到画布上时(例如,您首先单击(不一定在画布内)然后在不释放的情况下开始将鼠标拖到画布上)就绘制了画布。
$(function () {
var c = document.getElementById("canvas");
var context = c.getContext("2d");
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var $canvas=$("#canvas");
$(this).mousedown(function (e) {
paint = true;
addClick(e.pageX - $canvas[0].offsetLeft, e.pageY - $canvas[0].offsetTop);
redraw();
});
$(this).mousemove(function (e) {
if (paint) {
addClick(e.pageX - $canvas[0].offsetLeft, e.pageY - $canvas[0].offsetTop, true);
redraw();
}
});
$(this).mouseup(function (e) {
paint = false;
});
$(this).mouseleave(function (e) {
paint = false;
});
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#000000";
context.lineJoin = "round";
context.lineWidth = 2;
for (var i = 0; i < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
});
我现在需要的是一种在文档的鼠标事件期间将文档上所有鼠标坐标缩放为画布内的相对坐标的方法。
这样,无论您在文档上的什么位置拖动鼠标,它都将在画布内绘制(当然,尺寸相对较小)。任何想法如何实现这一目标?
为什么我需要这个?
它用于签名应用程序,当用户使用平板电脑在页面上涂鸦签名(看不见页面!)时,整个签名将被注册在一个小画布中。
更新
您在这里缺少的最重要的事情是乘以画布/屏幕比例。
首先计算比例:
var docToCanv = Math.min($canvas[0].width / $('body').width(), $canvas[0].height/$('body').height());
然后像这样使用它:
addClick(e.pageX*docToCanv, e.pageY*docToCanv);
根据您想要的其他行为,您可能需要稍微调整位置,但这可以使您摆脱当前遇到的问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句