如何解决HTML5画布绘图板-触摸支持
我正在使用这个简单的脚本使用户能够输入他们的签名。不幸的是,这不适用于移动设备。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var container = document.getElementById('container');
var container_style = getComputedStyle(container);
canvas.width = 400;
canvas.height = 300;
var mouse = {x: 0,y: 0};
canvas.addEventListener('mousemove',function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
},false);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = "black";
function getSize(size){ctx.lineWidth = size;}
canvas.addEventListener('mousedown',function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x,mouse.y);
canvas.addEventListener('mousemove',onPaint,false);
},false);
canvas.addEventListener('mouseup',function() {
canvas.removeEventListener('mousemove',false);
var onPaint = function() {
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();
};
#canvas {
border: 1px solid rgba(0,.5);
}
<div id="container">
<canvas id="canvas"></canvas>
</div>
是否可以通过简单的方法为此脚本添加触摸支持?
解决方法
对代码进行以下更改:
- 使用指针事件(而不是鼠标事件):
pointerdown
,pointerup
和pointermove
。指针事件适用于鼠标和触摸交互。 - 将
touch-action: none
添加到画布CSS。这样可以防止手指拖动触发设备的平移操作(停止绘制)。 - 在
pointerdown
上设置“鼠标”坐标。这将阻止以前的线路连接到新线路。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var container = document.getElementById('container');
canvas.width = 400;
canvas.height = 300;
var mouse = {x: 0,y: 0};
canvas.addEventListener('pointermove',function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
},false);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
canvas.addEventListener('pointerdown',function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
ctx.beginPath();
ctx.moveTo(mouse.x,mouse.y);
canvas.addEventListener('pointermove',onPaint,false);
},false);
canvas.addEventListener('pointerup',function() {
canvas.removeEventListener('pointermove',false);
var onPaint = function() {
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();
};
#canvas {
border: 1px solid rgba(0,.5);
touch-action: none;
}
<div id="container">
<canvas id="canvas"></canvas>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。