कैनवास Fabric.js में निर्देशांक

Question

मैं सिर्फ fabric.js के साथ शुरू कम करते हैं और मैं एक (शायद शुरुआत) त्रुटि है:

मैं निम्नलिखित कोड के साथ jQuery के साथ कपड़े का उपयोग कर रहा:

$(document).ready(function() { 

canvas = new fabric.StaticCanvas('scroller'); 

canvas.add(
    new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' }) 
); 

}); 

इस कोड को कैनवास पर 140x100 आयत खींचना चाहिए। अफसोस की बात है, आयत का केवल एक चौथाई दिखाई देता है। यदि मैं शीर्ष और बाएं मानों को उच्च संख्या में बदलता हूं, तो कैनवास पर आयताकार अधिक दिखाई देता है।

तो ऐसा लगता है कि कैनवास मूल 0/0 पर नहीं है, लेकिन sth पर है। अधिक है।

क्या कोई जानता है कि इसे कैसे ठीक किया जाए या मैं क्या गलत कर रहा हूं?

अग्रिम धन्यवाद, McFarlane

Answer 1

यहाँ कुछ उदाहरण के साथ एक jsfiddle कड़ी है http://jsfiddle.net/pukster/sdQ7U/2/

मेरा अनुमान है fabric.js मूल (मध्य बिंदु) से सब कुछ गणना करता है कि क्योंकि यह वास्तव में एक चौथाई आ रहा है है एक आयत के आयत के 10 गुना आकार के साथ भी एक आयताकार। मेरा अनुमान है कि top और left वास्तव में उत्पत्ति बाध्यकारी बॉक्स के शीर्ष और बाएं किनारे मूल को संदर्भित करते हैं। समस्या है कि fabricjs पर बहुत कम दस्तावेज है। वहाँ किसी भी कारण से आप fabricjs उपयोग कर रहे हैं और नहीं easeljs

संपादित यहाँ एक ही बेला है, लेकिन आयतों के बजाय चौकोर साथ (इसे और अधिक स्पष्ट है) http://jsfiddle.net/pukster/sdQ7U/3/

संपादित ठीक हूँ अब लगभग पूरी तरह से निश्चित है कि है fabric.js केंद्र को top/left के रूप में उपयोग करता है। मैंने अपने example off of their site को फटकारा और पारदर्शी कटरपार्ट के साथ उन आकारों को ओवरले किया जिन्हें वे शुद्ध कैनवास http://jsfiddle.net/pukster/uathZ/2/ (नीली सीमा कैनवास तत्व की सीमा है) में कोडित किया गया था।

क्या आप देखते हैं कि बक्से हैं बिल्कुल आधा लेकिन वृत्त (मैं केवल एक अर्द्ध वृत्त अन्यथा यह होगा discernable नहीं किया गया है आकर्षित किया) पूरी तरह से ओवरलैप हो रही है की भरपाई है। यह एचटीएमएल कैनवास में बी/सी है, सर्कल निर्देशांक (x,y) मूल को संदर्भित करता है और शीर्ष बाएं नहीं। मैं त्रिकोण बी/सी के साथ परेशान नहीं था मेरी त्रिकोणमिति थोड़ा जंगली है। मुझे व्यक्तिगत रूप से लगता है कि यह top और left शर्तों का उपयोग करने के लिए भ्रामक है, जब x और y अधिक प्रतिनिधि और छोटे होते।

Answer 2

हां, यह बेहद अप्रत्याशित और यहां तक ​​कि अधिक अनियंत्रित है।

वर्कअराउंड:

सेट

originX: "left" 
originY: "top" 

प्रत्येक निर्मित ऑब्जेक्ट के लिए

।

संपादित करें: या नीचे टिप्पणी में कंगैक्स सरल समाधान का उपयोग करें।

Answer 3

मैं टिप्पणी करना चाहता हूं लेकिन ऐसा करने की प्रतिष्ठा की कमी है।

fabric.Object.prototype.originX = "left"; 
fabric.Object.prototype.originY = "top"; 

आकार ठीक गाया जाता है लेकिन जब मैं आकार बदलने या ले जाने के लिए उसका चयन करें, यह एक अलग स्थान पर ऑफसेट हो जाता है: तो वैसे भी, यहाँ क्या होता है जब मैं निम्न कार्य है। सबसे अच्छा तरीका सेट() विधि का उपयोग करके अलग-अलग ऑब्जेक्ट के लिए निर्देशांक सेट करना प्रतीत होता है।