paper.Tool 在多个画布上不起作用答案

【问题标题】：paper.Tool is not working on Multiple canvaspaper.Tool 在多个画布上不起作用
【发布时间】：2018-01-31 23:28:34
【问题描述】：

我有两个画布，第一个工作正常，但是当我初始化第二个画布时，paper.Tool 无法正常工作，有时 onMouseMove 事件对其他人不起作用。

var dataLoad;
var mypapers = []
$(document).ready(function () {
    dataLoad = new DataLoad();
    mypapers[0] = new paper.PaperScope();
    mypapers[1] = new paper.PaperScope();
    mypapers[0].setup(document.getElementById('dataCanvas'));
    dataLoad.Init();
});


  // "returnedData" THIS ARRAY COMES FROM AN AJAX CALL
  DataLoad.prototype = {
      Init: function () {
         var self = this;
         var paperData = new 
         DataReader(document.getElementById('dataCanvas'));
         paperData.Init(returnedData[i],mypapers[0]);
         paperData.Draw(true);
         self.datas.push(paperData);
      }
   });

直到这里一切都很好，第一个画布上填充了我设置的图形。

DataReader.prototype = {
  Init: function (data,mypaper) {
    var self = this;
    paper = mypaper;
    self.paper = paper;
    self.toolPan = new self.paper.Tool()
    self.toolPan.activate();
    self.toolPan.onMouseDrag = function (event) {
       var delta = event.downPoint.subtract(event.point)
       self.paper.view.scrollBy(delta)
    };

    self.toolPan.onMouseMove = function (event) {
        self.OnMouseMove(event);
    };
     self.toolPan.onMouseUp = function (event) {
        // AFTER MAKE A SELECTION OF ITEMS IN THE CANVAS CALLING THE SECOND CANVAS
        var core = self.HighlightElementsInBox();
        self.dc = new DefineComponent();
        self.dc.Init(core);
        $('#DCCanvas').modal('toggle'); // THE CANVAS IS INSIDE THIS  BOOTSTRAP MODAL
    }
  }

});

/* this initialize the second canvas that basically creates another instance of the same prototype i use to manipulate paperjs in the first canvas */

DefineComponent.prototype = {
  Init: function (dataCore) {
    var self = this;
    mypapers[1].setup(document.getElementById('DCCanvas')); // setting second canvas
    var paperDataDC = new DataReader(document.getElementById('DCCanvas'));
    paperDataDC.Init(dataCore,mypapers[1]);
    paperDataDC.Draw(true);
    self.datas.push(paperDatasDC);
  }

});

在第二个画布中，所有内容都正确绘制，但事件onmousedrag 和onmousemove 无法正常工作，第一个事件将画布移动到鼠标不在的另一个位置，mousemove 仅在某些地方有效画布根本没有。

【问题讨论】：

没有paperjs专家？？？？？？
我认为，如果您尝试创建一个最小的示例 - 显示您的问题 - 在 stackoverflow 中作为“code sn-p”或在外部作为 jsfiddle (link to a simple paper.js example) 或类似的东西 - 这样其他人就可以轻松地构建或调试您的代码..

标签： javascript jquery canvas drag paperjs

【解决方案1】：

当您创建两个不同的 paperScope 时，您需要在使用其中一个或另一个时在它们之间切换。

您将两个 paperScopes 保存在“mypapers”数组中

mypapers[0] = new paper.PaperScope();
mypapers[1] = new paper.PaperScope();

所以要使用你应该做的任何一个

mypapers[0].activate();
// or
mypapers[1].activate();

查看this（最低设置）我上面的意思示例。

此外，如果您需要更多帮助，请遵循 stefan 的建议，因为如果没有最小的工作示例，人们很难尝试提供帮助

【讨论】：