我使用sketch.js插件在
HTML5画布上绘图.虽然它在桌面计算机上运行良好,但它似乎在移动浏览器上存在一些问题.
问题是,如果我绘制2个不同的形状,一旦触摸它,画布将重置为空白.
为了完全清楚,我将制作和示例：绘制数字’12’将首先绘制’1’然后当我开始绘制’2’时画布将清除并且仅保留数字’2’…
<!-- CANVAS -->
<canvas id="canvas1" style="width:100%; background:white; height:150px;"></canvas>
<script type="text/javascript">
$(function () {
$('#canvas1').sketch();
});
</script>
就是这个.我想知道是否有一些解决方法来保持各种图纸的历史.我对任何建议持开放态度,或者知道您是否发现了类似的问题.
解决方法
要实际修复此错误,您需要更改几行不同的代码.如果用户正在使用桌面(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行代码.
更换
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;
}
有关详细信息,请参阅下面的答案.
