1

我正在尝试设置一个小刮刮卡游戏，其中有几个面板，您可以拖动或触摸（ipad、智能手机等）来刮擦并显示下面的图像。

我不是 JS 大师，所以我进行了广泛的搜索，发现了我认为最好的脚本：

http://www.websanova.com/tutorials/jquery/html5-jquery-scratch-pad-plugin
使用画布和 jQuery。它还可以让您查看划伤的百分比，但它不适用于移动设备。

我正在查看 JS，但不知道如何向脚本添加触摸事件： https ://github.com/websanova/wScratchPad/blob/master/wScratchPad.js

?

4

1 回答 1

1

我很少使用 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');
    }
});

如果您修改或复制此块，并添加复制 mousedown、mousemove 和 mouseup 处理程序功能的触摸事件，您应该大部分都在那里。

于 2012-08-09T05:59:16.177 回答