使用sketch.js绘制移动网页画布重置ontouch [英] Drawing canvas for mobile webpages with sketch.js resets ontouch

问题描述

我使用 sketch.js 插件在HTML5画布上绘图。虽然它在桌面计算机上运行良好，但它似乎在移动浏览器上存在一些问题。

I am using the sketch.js plugin for drawing on HTML5 canvas. While it works fine on desktop computers it seems to have some issues on mobile browsers.

问题是如果我绘制2种不同的形状，一旦我触摸它，画布就会重置为空白。

The problem is that if I draw 2 different shapes, the canvas will reset to blank as soon as I touch it.

为了完全清楚，我将制作示例：绘制数字'12'将首先绘制'1'然后当我开始绘制'2'时画布将清除并仅保留数字'2'...

Just to be completly clear I will make and example: drawing the number '12' will first draw '1' and then when I start drawing '2' the canvas will clear and only keep the number '2'...

<!-- CANVAS -->
<canvas id="canvas1" style="width:100%; background:white; height:150px;"></canvas>
                        <script type="text/javascript">
                            $(function () {
                                $('#canvas1').sketch();
                            });                                               
                        </script>

就是这样。我想知道是否有一些解决方法来保持各种图纸的历史。我对任何建议持开放态度，或者知道你是否发现了类似的问题。

This is it. I am wondering if there is some workaround to keep the history of the various drawings. I am open to any suggestion or to know if you have found a similar problem.

推荐答案

要真正解决这个问题，你需要更改几行不同的代码。如果用户正在使用桌面（mousedown，mousemove，mouseleave，mouseup）或移动设备（touchstart，touchend，touchcancel），则插件会在每个事件期间进行检查。要确定用于绘制下一个点的鼠标/手指位置，正在调用jQuery的 e.pageX 。这是在移动设备中直接定义的，因此插件正在检查移动设备，如果检测到移动设备，则保存由 e.originalEvent.targetTouches [0] .pageX 定义的用户手指位置。问题来自touchend或touchcancel，因为没有为这两个事件定义 e.originalEvent.targetTouches [0] ，所以 e.originalEvent.targetTouches [ 0] .pageX 返回错误并重绘整个画布。要解决此问题，您需要在第100/101行周围编辑2行代码。

To actually fix this bug, you need to change a few different lines of code. The plugin is checking during each event if the user is using a desktop (mousedown, mousemove, mouseleave, mouseup) or a mobile (touchstart, touchend, touchcancel). To determine the mouse/finger position to draw the next point, jQuery's e.pageX is being called. This is directly defined in mobile, so the plugin is checking for mobile and if mobile is detected, saving the user's finger position defined by e.originalEvent.targetTouches[0].pageX. The problem comes from touchend or touchcancel because e.originalEvent.targetTouches[0] is not defined for these two events, so e.originalEvent.targetTouches[0].pageX returns an error and the entire canvas is redrawn. To fix this, you need to edit 2 lines of code around line 100/101.

替换

e.pageX = e.originalEvent.targetTouches[0].pageX;
e.pageY = e.originalEvent.targetTouches[0].pageY;

使用

if (e.originalEvent.targetTouches[0] !== undefined && e.originalEvent.targetTouches[0].pageX!==undefined){
    e.pageX = e.originalEvent.targetTouches[0].pageX;
}
if (e.originalEvent.targetTouches[0] !== undefined &&e.originalEvent.targetTouches[0].pageY){
    e.pageY = e.originalEvent.targetTouches[0].pageY;
}

有关详细信息，请参阅以下答案。

See the answer below for more details.

Sketch.js pageX undefined error

这篇关于使用sketch.js绘制移动网页画布重置ontouch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！