javascript HTML5 刮刮卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11877236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Scratch Card
提问by Quadrant6
I'm trying to setup a wee scratch card game, where there are several panels and you drag over or touch (ipad, smartphone etc) to scratch and reveal the image beneath.
我正在尝试设置一个刮刮卡游戏，其中有几个面板，您可以拖动或触摸（ipad、智能手机等）来刮擦并显示下方的图像。
I'm not a JS guru so I've searched extensively and found what I believe is the best script:
我不是 JS 大师，所以我进行了广泛的搜索并找到了我认为最好的脚本：
http://www.websanova.com/tutorials/jquery/html5-jquery-scratch-pad-plugin
Uses canvas and jQuery. It also lets you see the percentage scratched but it doesn't work on mobile.
http://www.websanova.com/tutorials/jquery/html5-jquery-scratch-pad-plugin
使用画布和 jQuery。它还可以让您看到划伤的百分比，但它不适用于移动设备。
I'm looking at the JS but don't know how to go about adding touch events to the script: https://github.com/websanova/wScratchPad/blob/master/wScratchPad.js
我正在查看 JS，但不知道如何向脚本添加触摸事件：https: //github.com/websanova/wScratchPad/blob/master/wScratchPad.js
?
?
采纳答案by sq2
I don't use jQuery much, so not sure how to extend jQuery extensions per se, but looking at the example code on githubyou want to add changes to these lines (110-140):
我不怎么使用 jQuery，所以不确定如何扩展 jQuery 扩展本身，但是查看github上的示例代码，您想对这些行 (110-140) 添加更改：
this.sp =
$('<div></div>')
.css({cursor: 'default', position: 'relative'})
.append(
$(this.canvas)
.attr('width', this.settings.width + 'px')
.attr('height', this.settings.height + 'px')
.css({cursor: 'default'})
.mousedown(function(e)
{
e.preventDefault();
e.stopPropagation();
$this.scratch = true;
$this.scratchFunc(e, $this, 'Down');
})
)
$(document)
.mousemove(function(e)
{
if($this.scratch) $this.scratchFunc(e, $this, 'Move');
})
.mouseup(function(e)
{
//make sure we are in draw mode otherwise this will fire on any mouse up.
if($this.scratch)
{
$this.scratch = false;
$this.scratchFunc(e, $this, 'Up');
}
});
If you modify or duplicate this block, and add touchevents replicating the functionality of the mousedown, mousemove and mouseup handlers, you should be mostly there.
如果您修改或复制此块，并添加复制 mousedown、mousemove 和 mouseup 处理程序功能的触摸事件，您应该大部分时间都在那里。
