HTML触摸正方形变色,使用触摸事件在HTML5画布上绘制正方形(Draw a Square on the HTML5 Canvas With Touch Events)...

使用触摸事件在HTML5画布上绘制正方形(Draw a Square on the HTML5 Canvas With Touch Events)

我有一个问题，我试图用触摸事件在画布上画一个正方形，它不工作，有人可以帮我弄清楚为什么？

这是我的代码到目前为止：

JAVASCRIPT：

// "Draw Rectangle" Button

function rect(){

var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false;

function init() {

canvas.addEventListener("touchstart", touchHandler, false);

canvas.addEventListener("touchmove", touchHandler, false);

canvas.addEventListener("touchend", touchHandler, false);

}

function touchHandler(event) {

if (event.targetTouches.length == 1) { //one finger touche

var touch = event.targetTouches[0];

if (event.type == "touchstart") {

rect.startX = touch.pageX;

rect.startY = touch.pageY;

drag = true;

} else if (event.type == "touchmove") {

if (drag) {

rect.w = touch.pageX - rect.startX;

rect.h = touch.pageY - rect.startY ;

draw();

}

} else if (event.type == "touchend" || event.type == "touchcancel") {

drag = false;

}

}

}

function draw() {

ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);

}

init();

}

HTML5：

Rectangle

再次感谢Wardenclyffe

I have a problem, I'm trying to draw a square on the canvas with the use of touch event and it not working, can someone help me figure out why?

Here's my code so far:

JAVASCRIPT:

// "Draw Rectangle" Button

function rect(){

var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false;

function init() {

canvas.addEventListener("touchstart", touchHandler, false);

canvas.addEventListener("touchmove", touchHandler, false);

canvas.addEventListener("touchend", touchHandler, false);

}

function touchHandler(event) {

if (event.targetTouches.length == 1) { //one finger touche

var touch = event.targetTouches[0];

if (event.type == "touchstart") {

rect.startX = touch.pageX;

rect.startY = touch.pageY;

drag = true;

} else if (event.type == "touchmove") {

if (drag) {

rect.w = touch.pageX - rect.startX;

rect.h = touch.pageY - rect.startY ;

draw();

}

} else if (event.type == "touchend" || event.type == "touchcancel") {

drag = false;

}

}

}

function draw() {

ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);

}

init();

}

HTML5:

Rectangle

Thanks again, Wardenclyffe

原文：https://stackoverflow.com/questions/10920665

更新时间：2019-11-25 18:11

最满意答案

在Chrome中进行测试，使用模拟触摸事件与此jsFiddle一起工作问题似乎是您绑定您的点击事件的方式。 我刚刚使用jQuery。

Tested in Chrome with emulated touch events works with this jsFiddle The problem seems to be the way you bind your click event. I just used jQuery.

相关问答

在Chrome中进行测试，使用模拟触摸事件与此jsFiddle一起工作问题似乎是您绑定您的点击事件的方式。 我刚刚使用jQuery。 或者没有jQuery： 只是一个普通的addEventListener Tested in Chrome with emulated touch events works with this jsFiddle The problem seems to be the way you bind your click event. I just used jQuery.

...

一个基本的例子是使用getImageData ： http ： //jsfiddle.net/eGjak/60/ 。 var ctx = $('#cv').get(0).getContext('2d');

for(var i = 0; i < 30; i++) {

for(var j = 0; j < 30; j++) {

ctx.fillStyle = 'rgb(' +

((i/30*255)|0) + ',' +

(

...

抱歉，我无法让您的任何代码在3种主流浏览器中运行。 这是画布上“铅笔”绘制的基本策略： 在mousedown处理程序中： - 当鼠标停止时保存鼠标的lastX和lastY位置 - 设置一个标志以指示鼠标已关闭 在mousemove处理程序中： - 如果mousedown标志为false，则不执行任何操作。 - 如果mousedown标志为真： ----从lastX / lastY到当前鼠标x / y画一条线 ----将lastX / lastY设置为当前鼠标x / y 在mouseup和mouse

...

#canvasSignature

{

width: 100%;

height: 100%;

background-color: #F0F0F0;

border: 1px solid Black;

cursor: crosshair;

}

这不好！ 根据经验，您永远不想更改画布的CSS宽度/高度。 你实际上是在拉伸整个屏幕的尺寸为300x150的画布。 这可能是99％的鼠标问题的根源。 原因似乎在y方向上很好是纯粹的巧合：画布默认为300x150，你有一个高150的d

...

首先，组合流，以便您拥有代表单个拖动的事件流。 var drag = mouseDown.first().concat(mouseMove.takeUntil(mouseUp));

接下来，将此事件流投影到previous,current元组流中。 var moves = drag

.scan({}, function(acc, x) {

return { previous: acc.current, current: x };

})

.skip(1);

...

您可以使用直线和二次曲线绘制弯头连接器以弯曲肘部。 例如，你可以在画布的左上角绘制一个从[x：10，y：100]到[x：75，y：20]并且角半径为12的肘部，如下所示： // top-left elbow from 10/100 to 75,20 with corner radius 12

ctx.beginPath();

ctx.moveTo(10,100);

ctx.lineTo(10,20+12);

ctx.quadraticCurveTo( 10,20, 10+12,20 );

ctx.

...

勾选+ 1到PitaJ和David Starkey - 他们是对的。 最简单/最有效的解决方案是修改光标本身。 如上所述，您甚至可以为光标执行自定义图像以进行颜色更改。 但是如果你绝对需要对齐网格，那么你必须使用像分层光标画布这样的东西。 没有办法强制用户的光标进入网格对齐。 (想想会导致的恶作剧！) 1号和3号都可以使用。 我会自己去3号。 然而，“最好的”取决于你。 Checkmark+1 to PitaJ and David Starkey--they are correct. The si

...

使用精灵的游戏， 纹理多边形的3D游戏， 图像编辑功能， 实时裁剪和缩放， 图像过滤器实时... 如果您只是使用画布来加载图像，那么绝对没有收益会有很多工作，因为您实际上必须将图像加载到img元素或Image()对象中，然后才能使用它在画布上 。 Games which use sprites, 3D games with textured-polygons, Image-editing functionality, Cropping and scaling in real-time, Image

...

您的代码在JSfiddle中运行得很好： http://jsfiddle.net/jXv83/ 我有一种感觉， square()永远不会被调用，所以你在那里的代码永远不会运行... Your code works just fine in JSfiddle: http://jsfiddle.net/jXv83/ I have a feeling that square() is never getting called so the code you have up there is never

...

只需替换它： ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);

ctx.clearRect(0, 0, canvas.width, canvas.height);

用这样的东西： ctx.fillLine(rect.startX, rect.startY, rect.w, rect.h);

ctx.clearLine(0, 0, canvas.width, canvas.height);

这当然不是100％有效的代码，但这个概念

...