13

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/

4

7 に答える 7

14

私は Paper.js を広範囲にPath使用していませんが、への各呼び出しはPaperScope、アクセス元の ではなく、グローバルpaperオブジェクトを使用しているようです。したがって、paper各インスタンス化の前に目的の PaperScope に上書きすると、機能するはずです。

私の更新された fiddle を参照してください。

于 2013-06-03T16:21:06.950 に答える
4

配列を使用して論文を分離します。

this.mypapers = []

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

mypapers.push(mypaper);

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

mypapers.push(mypaper);

var circle = new this.mypapers[0].Path.Circle(10,10,5);
var circle2 = new this.mypapers[1].Path.Circle(10,10,10);

編集: 私はあなたの js フィドルを更新しました: http://jsfiddle.net/94RTX/3/

どうやら、セットアップごとに前のセットアップが消去されるため、解決策は次の順序で実行することです。

setup canvas 1-> draw canvas 1 -> setup canvas 2 -> draw canvas 2
于 2013-05-31T22:18:38.527 に答える
1

@freejoshの回答は10.2でうまく機能しますが、フィドルは最新バージョン（現在の12.2）にアップグレードするときに1つのキャンバスを再利用します：

http://jsfiddle.net/ecneto/86qckn2h/1/

これは単純な修正です。ダウングレードするか、scope.activate() を使用できます。これは、紙をオーバーライドするよりもはるかに優れています。

http://jsfiddle.net/ecneto/n91rdp6z/2/

mypapers[0].activate();
var circle1 = new paper.Path.Circle(30, 30, 20);
circle1.style = {
    fillColor: new paper.Color(1, .5, .5),
    strokeColor: "black"
};

mypapers[1].activate();
var circle2 = new paper.Path.Circle(60, 60, 20);
circle2.style = {
    fillColor: new paper.Color(.5, .5, 1),
    strokeColor: "black"
};
于 2019-12-15T17:47:56.660 に答える