HTML5画布和鼠标事件问题 [英] HTML5 Canvas and mouse events issue
问题描述
我想要一个包含客户签名框的HTML5网页。这将在大部分的平板电脑上使用。这是通过Canvas元素和鼠标上的JavaScript事件完成的。
问题1：Y部分完美地工作，但是如果我将画布设置为300，X部分将工作。如果宽度为500，在x坐标0处是正确的。当用户绘制到x-coordinate 300时，屏幕上的线现在位于画布上的500px标记处。
问题2：我有代码停止在平板电脑上滚动，并允许在平板电脑上停止滚动用户登录画布（请参阅JavaScript中的防止var）。这根本不起作用。
HTML：
div id =canvasDiv>
< canvas id =canvasSignature>< / canvas>
< / div>
CSS：（将宽度100％设置为500像素，始终为150像素）
#canvasDiv
{
float：left;
width：100％;
height：150px;
max-width：500px;
}
#canvasSignature
{
width：100％;
height：100％;
background-color：＃F0F0F0;
border：1px solid黑色;
cursor：crosshair;
}
JavaScript：
< script type =text / javascript>
$（document）.ready（function（）{
initialize（）;
}）;
var prevent = false;
//计算出点击的X，Y位置从画布上的X，Y位置在画布上
function getPosition（mouseEvent，element）{
var x ，y;
if（mouseEvent.pageX！= undefined&& mouseEvent.pageY！= undefined）{
x = mouseEvent.pageX;
y = mouseEvent.pageY;
} else {
x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x = x - element.offsetLeft;
return {X：x，Y：y - element.offsetTop};
}
function initialize（）{
//获取对canvas元素的引用以及2D绘图上下文
var element = document.getElementById（canvasSignature ）;
var context = element.getContext（2d）;
//当mousedown事件触发时开始绘制，并将处理程序附加到
//绘制一行到鼠标移动到
$（＃canvasSignature）。mousedown （function（mouseEvent）{
var position = getPosition（mouseEvent，element）;
context.moveTo（position.X，position.Y）;
context.beginPath ;
prevent = true;
//附加事件处理程序
$（this）.mousemove（function（mouseEvent）{
drawLine（mouseEvent，element，context） ;
}）mouseup（function（mouseEvent）{
finishDrawing（mouseEvent，element，context）;
}元素，上下文）;
}）;
}）;
document.addEventListener（'touchmove'，function（event）{
if（prevent）{
event.preventDefault（）;
}
return event;
}，false）;
}
//绘制一行到鼠标事件的x和y坐标
//使用指定的上下文指定元素
function drawLine（mouseEvent ，element，context）{
var position = getPosition（mouseEvent，element）;
context.lineTo（position.X，position.Y）;
context.stroke（）;
}
//从路径中的最后一个协调器绘制一条线到完成
//坐标，并取消绑定需要在
/ /通过鼠标按下事件
function finishDrawing（mouseEvent，element，context）{
//绘制线到完成坐标
drawLine（mouseEvent，element，context）;
context.closePath（）;
//取消绑定任何可能绘制的事件
$（element）.unbind（mousemove）
.unbind（mouseup）
.unbind mouseout）;
prevent = false;
}
< / script>
#canvasSignature
{
width：100％;
height：100％;
background-color：＃F0F0F0;
border：1px solid黑色;
cursor：crosshair;
}
这不好！作为一个经验法则，你永远不想改变一个画布的CSS宽度/高度。
你实际上伸展一个尺寸为300x150的画布，倾斜整个屏幕。这可能是你的鼠标问题的99％的来源。
原因在y方向似乎很好只是巧合：画布是默认300x150和你有一个div是150高，所以没有偏斜的CSS。
您需要将Canvas的高度和宽度设置为属性，并且不是作为CSS属性：
>< / canvas>或在JavaScript中使用：
var can = document.getElementById（'canvasSignature'）;
can.width = 500;
can.height = 150;
看起来你想要动态改变画布宽度。这是可以的，但你必须做一些事情之一。一个是使用窗口的 onresize 事件，并且在每次发生这种情况时将canvas宽度设置为等于div的clientWidth（如果clientWidth已经改变了）。另一个是做一个简单的普通计时器，每半秒左右检查一次同样的事情。
注意我没有检查你的getPosition函数的有效性。可能有其他错误，可能是一个单独的问题，但它可能OK。
I'm trying to have a HTML5 page that includes a customer signature box. This would be used on tablets for the most part. This is done with a Canvas element, and JavaScript events on the mouse.
Issue 1: The Y portion works perfectly, but the X portion will ONLY work if I set my canvas with to 300. If the width is 500, then the X portion is correct at x-coord 0. When the user draws to x-coord 300, the line on the screen is now at the 500px mark on the canvas. NOWHERE in my code do I set anything to 300px, so I just don't get what's up.
Issue 2: I have code to stop scrolling on tablets and allow the user to sign in the canvas (see "prevent" var in JavaScript). That does not work at all.
HTML:
<div id="canvasDiv">
<canvas id="canvasSignature"></canvas>
</div>
CSS: (Makes the width 100% up to 500px, and always 150px high)
#canvasDiv
{
float: left;
width: 100%;
height: 150px;
max-width: 500px;
}
#canvasSignature
{
width: 100%;
height: 100%;
background-color: #F0F0F0;
border: 1px solid Black;
cursor: crosshair;
}
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
initialize();
});
var prevent = false;
// works out the X, Y position of the click INSIDE the canvas from the X, Y position on the page
function getPosition(mouseEvent, element) {
var x, y;
if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
x = mouseEvent.pageX;
y = mouseEvent.pageY;
} else {
x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x = x - element.offsetLeft;
return { X: x, Y: y - element.offsetTop };
}
function initialize() {
// get references to the canvas element as well as the 2D drawing context
var element = document.getElementById("canvasSignature");
var context = element.getContext("2d");
// start drawing when the mousedown event fires, and attach handlers to
// draw a line to wherever the mouse moves to
$("#canvasSignature").mousedown(function (mouseEvent) {
var position = getPosition(mouseEvent, element);
context.moveTo(position.X, position.Y);
context.beginPath();
prevent = true;
// attach event handlers
$(this).mousemove(function (mouseEvent) {
drawLine(mouseEvent, element, context);
}).mouseup(function (mouseEvent) {
finishDrawing(mouseEvent, element, context);
}).mouseout(function (mouseEvent) {
finishDrawing(mouseEvent, element, context);
});
});
document.addEventListener('touchmove', function (event) {
if (prevent) {
event.preventDefault();
}
return event;
}, false);
}
// draws a line to the x and y coordinates of the mouse event inside
// the specified element using the specified context
function drawLine(mouseEvent, element, context) {
var position = getPosition(mouseEvent, element);
context.lineTo(position.X, position.Y);
context.stroke();
}
// draws a line from the last coordiantes in the path to the finishing
// coordinates and unbind any event handlers which need to be preceded
// by the mouse down event
function finishDrawing(mouseEvent, element, context) {
// draw the line to the finishing coordinates
drawLine(mouseEvent, element, context);
context.closePath();
// unbind any events which could draw
$(element).unbind("mousemove")
.unbind("mouseup")
.unbind("mouseout");
prevent = false;
}
</script>
#canvasSignature
{
width: 100%;
height: 100%;
background-color: #F0F0F0;
border: 1px solid Black;
cursor: crosshair;
}
This is no good! As a rule of thumb you never want to change the CSS width/height of a canvas.
You are literally stretching a canvas sized 300x150 to skew across the entire screen. This is probably the source of 99% of your mouse problems.
The reason is seems fine in the y-direction is purely coincidence: The canvas is by default 300x150 and you have a div that is 150 high, so there is no skewing by the CSS. But if you wanted the div to be 200 high you'd see the problem there too!
You need to set the Canvas height and width as attributes and not as CSS properties:
<canvas id="canvasSignature" width="500" height="150"></canvas>
Or else in JavaScript:
var can = document.getElementById('canvasSignature');
can.width = 500;
can.height = 150;
It looks like you want to have the canvas width change dynamically. This is OK, but you have to do one of a few things. One would be to use the window's onresize event, and set the canvas width equal to the div's clientWidth every time this happens (if the clientWidth has changed of course). The other would be to do a simple general timer to check for the same thing every half-second or so.
Note that I did not check the validity of your getPosition function. There might be other errors there that may be a separate issue, but its probably OK.
这篇关于HTML5画布和鼠标事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
