paper.js如何使用javascript设置多个画布 [英] paper.js how to set up multiple canvases using only javascript

问题描述

我想在webapp中使用paper.js，但是我无法使用它来处理多个画布。它就像画布在画布之间混合，所以当我打算在画布1上绘制时，它出现在画布2上。

I'm trying to use paper.js in a webapp, but I've been unable to get it to work with multiple canvases. It's like the scopes are getting mixed up between the canvases, so when I intend to draw on canvas 1, it appears on canvas 2.

在每个视图中，我按如下方式初始化纸张：

In each view, I'm initialize the paper like this:

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

当我创建新的纸张对象时，我使用本地范围：

When I create new paper objects, I use what should be the local scope:

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

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

However, when I create a circle in view1, it draws it in view2 instead.

我做了很多阅读，但我还没有找到一个清楚的解释，如何设置多个论文或者如何隔离彼此的视图。

I've done a lot of reading, but I still haven't found a clear explanation of how to setup multiple paperscopes or how to isolate views from each other.

有没有人知道如何正确地使用多个画布和paper.js？

Does anyone know how to use multiple canvases with paper.js correctly?

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

EDIT: I've created a jsFiddle to illustrate the problem: http://jsfiddle.net/94RTX/1/

推荐答案

我没有广泛使用Paper.js，但似乎每次调用路径不使用正在访问的 PaperScope ，而是使用全局纸目的。因此，如果你在每个实例化之前覆盖纸张到你想要的PaperScope。

I haven't worked with Paper.js extensively, but it seems that each call to Path isn't using the PaperScope from which it's being accessed, but the global paper object. So if you overwrite paper to your desired PaperScope before each instantiation it should work.

查看我更新的小提琴。

这篇关于paper.js如何使用javascript设置多个画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！