同じページに2つの別々のPaperJSキャンバスアイテムを並べて表示するにはどうすればいいですか？

Question

私はバニラJSを使用して私のWebページでPaperJSを使用しています。

1つのキャンバスが動作しますが、別のキャンバスを試してみると、最後に呼び出されたキャンバスだけがレンダリングされます。エラーがスローされていないと私は承知している限り、私はここでの例を参照してくださいnew PaperScope();

を使用してそれらを正しくスコープだ：私は2つの機能を（同じ両方）2をターゲットとすべきもの持って https://codepen.io/anon/pen/bWgEXN?editors=0010

をページ上に別々のキャンバス要素があります。

は、私はそうのような設定にスコープをしようとしている：

ウィンドウに保存されているグローバルオブジェクト：

window.paper = {}; 

セットアップ1：

function pattern_1(selector) { 

    window.papers.paper_1 = new paper.PaperScope(); 

    const paperObj = window.papers.paper_1; 
    const pattern = document.querySelector(selector); 

    paperObj.install(window); 

    window.onload = function() { 
    paperObj.setup(pattern); 
    // Etc etc, more code follows... 
    } 

} 

セットアップ2 （同じ名前だが異なる名前）：

function pattern_2(selector) { 

    window.papers.paper_2 = new paper.PaperScope(); 

    const paperObj = window.papers.paper_2; 
    const pattern = document.querySelector(selector); 

    paperObj.install(window); 

    window.onload = function() { 
    paperObj.setup(pattern); 
    // Etc etc, more code follows... 
    } 

} 

彼らはそのようにのように呼ばれています。

pattern_1('#item_1'); 
pattern_2('#item_2'); 

のようにHTMLに見えます：私は私の人生のために把握することはできません

<canvas id="item_1"></canvas> 
<canvas id="item_2"></canvas> 

私はつもりです場所ここで間違っている？

これらを別々の項目としてスコープすることについての助けがあれば、素晴らしいものになります。彼らは決してお互いにコミュニケーションする必要はありません。

ありがとうございます。

Answer 1

window.onloadメソッドを上書きしています。あなたが持っているものの簡易版は、次のとおりです。

function pattern_1(selector) { 
    // code code code 
    window.onload = function() { 
    // Etc etc, more code follows... 
    } 
} 

function pattern_2(selector) { 
    // code code code 
    window.onload = function() { 
    // Etc etc, more code follows... 
    } 
} 
pattern_1(...); 
pattern_2(...); 

あなたがwindowためonload方法を定義pattern_1呼び出すとき。 pattern_2に電話するときは、はwindowのonloadメソッドをに上書きします。このため、2番目のキャンバスにのみ更新が届いています。

あなたはaddEventListenerを使用することによって、複数のイベントリスナーを追加することができます。これにより

function pattern_1(selector) { 
    // code code code 
    window.addEventListener("load", function() { 
    // Etc etc, more code follows... 
    }); 
} 

function pattern_2(selector) { 
    // code code code 
    window.addEventListener("load", function() { 
    // Etc etc, more code follows... 
    }); 
} 
pattern_1(...); 
pattern_2(...); 

を、あなたの各メソッドは、イベントハンドラを追加しますので、それらの両方がイベントを受信します。