paper.js如何仅使用javascript设置多个画布

Question

我正在尝试在webapp中使用paper.js,但我无法让它与多个画布一起使用.就像画布在画布之间混淆一样,所以当我打算在画布1上画画时,它会出现在画布2上.

在每个视图中,我都是这样初始化文章:

this.mypaper = new paper.PaperScope();
this.mypaper.setup($("myCanvasId")[0]);

当我创建新的纸质对象时,我使用的是本地范围:

var circle = new this.mypaper.Path.Circle(10, 10, 5);

但是,当我在view1中创建一个圆时,它会在view2中绘制它.

我已经做了很多阅读,但我还没有找到如何设置多个论文镜或如何相互隔离视图的明确解释.

有谁知道如何正确使用paper.js多个画布？

编辑:我已经创建了一个jsFiddle来说明问题:http://jsfiddle.net/94RTX/1/

Answer 1

我没有广泛使用Paper.js,但似乎每次调用Path都不是使用PaperScope它来访问它,而是使用全局paper对象.因此,如果paper在每次实例化之前覆盖到所需的PaperScope,它应该可以工作.

看我更新的小提琴.

Answer 2

我实际上解决了这个问题:

var scope1 = new paper.PaperScope();
var scope2 = new paper.PaperScope();

当我想在scope1中绘制时:

scope1.activate();
// now I draw

同样,当我想在范围2中绘制时

scope2.activate();
// now I draw

Answer 3

为了更明确地管理要添加项目的 paperscope，您可以考虑将该选项设置insertItems为false。

  var paper1 = new paper.PaperScope();
  paper1.setup(canvasElement);
  paper1.settings.insertItems = false; 

这样，当您创建新的纸张项目时，它们不会自动添加到纸张中。因此，无论您的论文项目是在哪个范围内创建的，您仍然决定将其添加到一篇论文或另一篇论文中。例如，理论上你可以这样做：

  // create a second scope 
  var paper2 = new paper.PaperScope();
  // create a circle in the first scope
  var myCircle = new paper1.Path.Circle(new paper1.Point(100, 70), 50);
  myCircle.fillColor = 'black';
  // add that circle to the second scope's paper 
  paper2.project.activeLayer.addChild(myCircle);