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 に答える