0

私は HTML5ラビッド スクラッチ プラグインを使用して、小さなパネルのグリッドを実現しています。このグリッドをスクラッチすると背後の画像が表示されます。

デモ: http://jsfiddle.net/CeTR8/2/

問題：

パネルをクリックしてドラッグすると、そのパネルが傷つきますが、パネルごとにマウスアップとマウスダウンを行う必要があります。マウスアップとマウスダウンをしなくても、スクラッチからスクラッチしたいのですが。

mousemoveでトリガーするように次の変更を加えてみました（マウスボタンも押されている場合）。Macのサファリ/クロームでは多少機能していますが、IE9やおそらく他のものでは機能していません..

  // Bind downHandler to mousemover instead
  self.theCanvas.bind('mousemove', $.proxy(self.addDownHandler, self));

  // self.theCanvas.bind('mousedown', $.proxy(self.addDownHandler, self));
  // self.theCanvas.bind('mouseup', $.proxy(self.addUpHandler, self));
  // $(window).bind('mouseup', $.proxy(self.addUpHandler, self));

....

  addDownHandler: function (e) {
     // only scratch if mouse down
     if(e.which == 1){
        var self = this;
        self.theCanvas.bind('mousemove', $.proxy(self.mouseMoveHandler, self));
     }
  }

現在の http://jsfiddle.net/CeTR8/3/

ブラウザ間で機能する、これを行うためのより良い方法はありますか?

4

1 に答える 1

0

http://jsfiddle.net/ericjbasti/CeTR8/5/

かわった

self.theCanvas.bind('mousedown', $.proxy(self.addDownHandler, self));

に

$(window).bind('mousedown', $.proxy(self.addDownHandler, self));
于 2013-08-13T04:44:01.223 に答える