paper.js केवल जावास्क्रिप्ट

Question

का उपयोग करके एकाधिक कैनवास सेट अप करने के लिए मैं वेबपैप में 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 में बजाय खींचता है।

मैंने बहुत सी पढ़ाई की है, लेकिन मुझे अभी भी एक से अधिक कागजातकोप कैसे सेट अप करना है या एक दूसरे से विचार अलग करने का स्पष्ट स्पष्टीकरण नहीं मिला है।

क्या कोई जानता है कि पेपर.जेएस के साथ सही कैनवास का उपयोग कैसे किया जाए?

संपादित: http://jsfiddle.net/94RTX/1/

Answer 1

मैं पेपर.जेएस के साथ बड़े पैमाने पर काम नहीं किया है, लेकिन ऐसा लगता है कि Path पर प्रत्येक कॉल PaperScope का उपयोग नहीं कर रहा है, जिससे इसे एक्सेस किया जा रहा है, लेकिन वैश्विक paper ऑब्जेक्ट। इसलिए यदि आप प्रत्येक वांछितता से पहले 0 वांको अपने वांछित पेपरस्कोप पर ओवरराइट करते हैं तो इसे काम करना चाहिए।

See my updated fiddle।

Answer 2

उपयोग अपने कागजात अलग करने के लिए सरणियों: मैं इस समस्या को वर्णन करने के लिए एक jsFiddle बना लिया है।

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 

Answer 3

मुझे लगता है मैं समाधान नहीं मिला: मैं @freejosh से बेला का विस्तार भी (जैसे आकार बदलने) कॉलबैक के साथ काम करने के लिए: चाल कॉलबैक फ़ंक्शन के अंदर सही गुंजाइश फिर से लाने के लिए है:

http://jsfiddle.net/rassoh/mx9n3vsf/7/

var mypapers = []; 

initPaper(0, $("#canvas1")[0]); 
initPaper(1, $("#canvas2")[0]); 

function initPaper(id, canvasElement) { 
    var mousePosition = new paper.Point(0,0); 
    mypapers[id] = new paper.PaperScope(); 
    paper = mypapers[id]; 
    paper.setup(canvasElement); 
    var myCircle; 

    createCircle = function() { 
     if("undefined" !== typeof myCircle) { 
      myCircle.remove(); 
     } 
     // this function is called on resize, so we have to re-fetch the scope! 
     paper = mypapers[id]; 
     myCircle = new paper.Path.Circle(30, 30, 20); 
     var lightRed = new paper.Color(1, 0.5, 0.5); 
     var lightBlue = new paper.Color(0.5, 0.5, 1); 
     myCircle.style = { 
      fillColor: id === 0 ? lightRed : lightBlue, 
      strokeColor: "black" 
     }; 
    } 
    createCircle(); 

    var tool = new paper.Tool(); 
    tool.onMouseMove = function(event) { 
     mousePosition = event.lastPoint; 
    }; 
    paper.view.onFrame = function() { 
     if("undefined" === typeof myCircle) { 
      return; 
     } 
     var dist = mousePosition.subtract(myCircle.position); 
     dist = dist.divide(3); 
     myCircle.position = myCircle.position.add(dist); 
    }; 
    paper.view.onResize = function() { 
     createCircle(); 
    }; 
} 

$(window).resize(function() { 
    var width = $(".container").width()/2; 
    var height = $(".container").height(); 
    // this automatically triggeres paper's onResize event registered above 
    mypapers[0].view.viewSize = new paper.Size(width, height); 
    mypapers[1].view.viewSize = new paper.Size(width, height); 
}); 

कृपया ध्यान दें कि मैंने सही व्यवहार के परीक्षण के लिए मंडलियों के साथ एक साधारण बातचीत भी शामिल की है।

Answer 4

मैं वास्तव में इस थोड़ा अलग का समाधान:

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

जब मैं scope1 में आकर्षित करने के लिए करना चाहते हैं:

scope1.activate(); 
// now I draw 

इसी तरह जब मैं 2

scope2.activate(); 
// now I draw 

Answer 5

दायरे में आकर्षित करने के लिए चाहते हैं अधिक स्पष्ट रूप से प्रबंधित करने के लिए कि आप किस पेपरस्कोप को आइटम जोड़ रहे हैं, आप विकल्पसेट करने पर विचार कर सकते हैंसे 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);