javascript - 画布触觉 JS
问题描述
我有一个项目,我需要建立一个自行车预订网站。我需要创建一个画布来让人们签名。我创建了我的画布,它可以很好地与鼠标配合使用,但我需要知道如何在移动设备上进行操作。我尝试了几件事(使用 touchmove/touchstart),但无法正常工作。这是我在 ES6 中的对象画布(我不使用 jQuery)。我不允许使用任何库,我只想使用 JS(我会在某个时候学习 jQuery)。
class Canvas {
constructor(canvasId, clearBtnId) {
this.canvas = document.getElementById(canvasId);
this.idBtnClear = clearBtnId;
this.ctx = this.canvas.getContext("2d");
this.painting = false;
this.isEmpty = true;
this.canvas.addEventListener("mousedown", this.mouseDown.bind(this));
this.canvas.addEventListener("mouseup", this.mouseUp.bind(this));
this.canvas.addEventListener("mousemove", this.draw.bind(this));
this.canvas.addEventListener("mouseout", this.mouseUp.bind(this));
document.getElementById(this.idBtnClear).addEventListener("click", this.clearCanvas.bind(this));
}
mouseDown(e) {
this.painting = true;
}
mouseUp() {
this.painting = false;
this.ctx.beginPath();
}
draw(e) {
if (!this.painting) return;
this.ctx.lineWidth = 5;
this.ctx.lineCap = "round";
this.ctx.lineJoin = "round";
let topPos = e.pageY - this.canvas.offsetTop;
let leftPos = e.pageX - this.canvas.offsetLeft;
this.ctx.lineTo(leftPos, topPos);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(leftPos, topPos);
this.isEmpty = false;
}
clearCanvas() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.isEmpty = true;
}
}
解决方案
推荐阅读
- elki - 如何在 Elki 中使用数组而不是 NumberVector
- c# - 更新实体中的集合会引发“无法为表中的标识列插入显式值”
- react-native - 当 redux 重新渲染包含 StackNavigator 的视图时,它会将自身重置为初始屏幕
- php - 如何将 .htaccess 文件中的条件转换为 web.config
- ruby-on-rails - Rails 中的相关内容。用户选择要关联的内容。怎么做?有很多?属于?
- jquery - Difference between desktop and mobile Chrome
- python - How do I have a list accept lowercase in place of capitalized letters in Hangman for a randomized list in Python 3?
- visual-studio - How to compile Qt webengine (5.11) on Windows with proprietary codecs
- react-native - React Native 中的“使用 appParams 运行应用程序”是什么意思?
- matlab - 如何将图像处理 matlab 库添加到 keil