Question

我有两个画布，第一个工作正常，但是当我初始化第二个时，纸张。工具无法正常工作，有时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仅适用于画布的某些地方而不是全部。

Answer 1

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

您将两个paperScopes保存在＆＃34; mypapers＆＃34;阵列

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

所以要使用你应该做的任何事情

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

查看上面我的意思的this（min setup）示例。

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

paper.Tool不在多个画布上工作

1 个答案: