javascript - 划痕效果插件：无需抬起鼠标即可在多个面板上划痕

Question

我正在使用 HTML5 rabid scratch 插件来实现一个小面板网格，这些面板可以被刮掉以显示背后的图像。

演示：http: //jsfiddle.net/CeTR8/2/

问题：

当您单击并拖动面板时，它会划伤该面板，但您必须为每个面板进行 mouseup 和 mousedown。我想从一个到另一个从头开始，而不必mouseup和mousedown。

我已经尝试进行以下修改以触发 mousemove（如果鼠标按钮也按下）并且它在 Mac 中的 safari/chrome 上有些工作，但在 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/

有没有更好的方法可以跨浏览器工作？

Answer 1

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

改变了

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

至

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