javascript - 画布在桌面上完美工作,但在移动设备上不起作用
问题描述
我的画布功能在桌面上工作得很好,但在移动设备上却很奇怪或不起作用。
在移动设备上,它每 20 次工作一次,当您触摸手指的开始 50 像素时,只会绘制一条线。
这是我的代码:
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
$("#canvas").attr('height', $("#canvasDiv").outerHeight());
$("#canvas").attr('width', $("#canvasDiv").width());
if (typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
var blueprint_background = new Image();
blueprint_background.src = srctesting;
blueprint_background.crossOrigin="anonymous";
blueprint_background.onload = function(){
var pattern = context.createPattern(this, "no-repeat");
context.fillStyle = pattern;
context.rect(0,0,$("#canvasDiv").width(),$("#canvasDiv").outerHeight());
context.fill();
};
// console.log(blueprint_background)
$('#canvas').mousedown(function(e) {
var offset = $(this).offset()
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - offset.left, e.pageY - offset.top);
redraw();
});
$('#canvas').mousemove(function(e) {
if (paint) {
var offset = $(this).offset()
//addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
addClick(e.pageX - offset.left, e.pageY - offset.top, true);
// console.log(e.pageX, offset.left, e.pageY, offset.top);
redraw();
}
});
$('#canvas').mouseup(function(e) {
paint = false;
});
$('#canvas').mouseleave(function(e) {
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
$("#reset-btn").click(function() {
context.clearRect(0, 0, window.innerWidth, window.innerWidth);
clickX = [];
clickY = [];
clickDrag = [];
});
$(document).on('click', '#btn-save', function() {
var mycanvas = document.getElementById('canvas');
var img = mycanvas.toDataURL("image/png");
anchor = $("#signature");
anchor.val(img);
$("#signatureform").submit();
});
var drawing = false;
var mousePos = {
x: 0,
y: 0
};
var lastPos = mousePos;
canvas.addEventListener("touchstart", function(e) {
mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchend", function(e) {
var mouseEvent = new MouseEvent("mouseup", {});
canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchmove", function(e) {
var touch = e.touches[0];
var offset = $('#canvas').offset();
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}, false);
// Get the position of a touch relative to the canvas
function getTouchPos(canvasDiv, touchEvent) {
var rect = canvasDiv.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
}
var elem = document.getElementById("canvas");
var defaultPrevent = function(e) {
e.preventDefault();
}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove", defaultPrevent);
function redraw() {
//
lastPos = mousePos;
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();
}
}
如您所见,我已经为移动设备添加了事件。我错过了什么吗?
解决方案
推荐阅读
- ms-access - 将 MS Access 表中的值分配给变量
- vue.js - 推送路由(从 vueJS 移动到 nuxtJS)
- azure - 只有 RDP 从本地局域网工作到站点 2 站点 IPSEC 的天蓝色
- ruby-on-rails - Rspec 和 FactoryGirl 有几个模型
- azure - Azure WAF 403 响应
- css - 为 ID 创建别名
- firewall - 连接到后面的服务器
- c# - 当字符串包含空值(“NaN”)时,JsonConvert.DeserializeObject 失败
- javascript - vuex 中 { dispatch, commit } 的类型是什么?
- oracle-apex - Apex 应用程序文本项字段的电子邮件验证