GetBBox() SVGRect की गणना कैसे की जाती है?

Question

मेरे पास g तत्व है जिसमें एक या अधिक path तत्व शामिल हैं। जैसा कि मैंने another question में उल्लेख किया है, मैं g तत्व को transform विशेषता का कंप्यूटिंग करके स्केल और अनुवाद करता हूं ताकि यह कैनवास के किसी अन्य भाग में ग्रिड पर फिट हो।

गणना दो आयताकारों के बीच अंतर, getBBox()g तत्व और ग्रिड के चारों ओर आयताकार के बीच अंतर का उपयोग करके की जाती है।

यहाँ सवाल यह है कि - मैं बदलना है के बाद, मैं g तत्व की सामग्री को अद्यतन करने और बिना फिर से getBBox() फोन, transform को हटाने। परिणामस्वरूप आयताकार की गणना transform पर विचार किए बिना की जाती है। मैं उम्मीद करता हूं कि यह बदलाव को प्रतिबिंबित करे। क्या यह व्यवहार एसवीजी विनिर्देश के अनुरूप है? मैं रूपांतरित आयत के बाध्यकारी बॉक्स को कैसे प्राप्त करूं?

यह, बीटीडब्ल्यू, फ़ायरफ़ॉक्स 4 में चल रहे एक HTML 5 दस्तावेज़ में है, यदि इससे कोई फर्क पड़ता है।

अद्यतन: स्पष्ट रूप से यह व्यवहार विनिर्देश के उल्लंघन में स्पष्ट रूप से स्पष्ट रूप से प्रतीत होता है। पाठ here at w3c से:

SVGRect getBBox()

वर्तमान उपयोगकर्ता अंतरिक्ष में तंग सीमांकन बॉक्स देता है (यानी, 'परिणत' विशेषता के आवेदन, यदि कोई हो के बाद) सभी की ज्यामिति पर निहित ग्राफिक्स तत्व, स्ट्रोकिंग, क्लिपिंग, मास्किंग और फ़िल्टर प्रभावों के अनन्य)। ध्यान दें कि जब विधि को अभी तक प्रस्तुत नहीं किया गया है, तब भी प्राप्त करने के लिए GetBBox को वास्तविक बाउंडिंग बॉक्स वापस करना होगा।

क्या मैं इसे सही ढंग से पढ़ रहा हूं? यदि ऐसा है तो यह एसवीजी कार्यान्वयन फ़ायरफ़ॉक्स का उपयोग करता है में एक इरेटा प्रतीत होता है; मुझे किसी अन्य को आजमाने का मौका नहीं मिला है। अगर कोई मुझे कहां इंगित कर सकता है तो मैं एक बग रिपोर्ट दर्ज करूंगा।

Answer 1

व्यवहार आप देख सही है, और कल्पना के साथ संगत:

मैं तुम्हें यहाँ इंगित कर सकते हैं, दुर्भाग्य से मैं यह काम कर रहा बनाने के लिए सक्षम नहीं था। ट्रांसफॉर्म लागू हो जाता है, तो बॉक्स को "वर्तमान उपयोगकर्ता इकाइयों" में गणना की जाती है, यानी वर्तमान उपयोगकर्ता स्थान। तो यदि आप तत्व पर एक परिवर्तन के परिणाम देखना चाहते हैं तो आपको माता-पिता नोड या इसी तरह के बॉक्स को देखने की आवश्यकता होगी। यह थोड़ा उलझन में है, लेकिन SVG Tiny 1.2 spec for SVGLocatable में बहुत बेहतर समझाया गया है जिसमें कई उदाहरण हैं जो स्पष्ट करते हैं कि यह क्या करना है।

Answer 2

जाहिर है getBBox() रूपांतरणों को ध्यान में नहीं लेता है। http://tech.groups.yahoo.com/group/svg-developers/message/22891

Answer 3

वहाँ कम से कम 2 आसान लेकिन कुछ हद तक hacky तरीकों से आप क्या पूछते हैं ... अगर वहाँ अच्छे (कम hacky) तरीके हैं, मैं उन्हें अभी तक नहीं मिला है

करने के लिए कर रहे हैं आसान Hacky # 1:
ए) एक रेक्ट स्थापित करें जो "untransformed" bbox से मेल खाता है जो group.getBBox()
लौटा रहा है b) समूह के "अपरिवर्तित परिवर्तन" को उस आय
c) पर लागू करें।getBBox() अब bbox आप देख रहे हैं लौटना चाहिए

आसान Hacky # 2: (केवल क्रोम में परीक्षण)
क) element.getBoundingClientRect() है, जो पर्याप्त जानकारी देता है का उपयोग आप bbox का निर्माण करने के लिए आप

Answer 4

एसवीजी समूहों के पास बुरा अभ्यास है - सभी परिवर्तनों को जमा करने के लिए नहीं। मेरे पास इस मुद्दे से निपटने का मेरा तरीका है। मैं वर्तमान परिवर्तन डेटा को संग्रहीत करने के लिए अपने स्वयं के विशेषताओं का उपयोग कर रहा हूं जिसमें मैं किसी और परिवर्तन में शामिल हूं। एटटेक्स्ट के रूप में जमा मूल्य को संग्रहीत करने के लिए alttext, value, name .... या सिर्फ x और y जैसे एक्सएमएल संगत विशेषताओं का उपयोग करें।

उदाहरण:

<g id="group" x="20" y"="100" transform="translate(20, 100)"> 
<g id="subgroup" alttext="45" transform="rotate(45)"> 
<line...etc... 

इसलिए जब मैं परिवर्तनों बना रही हूँ मैं ले रहा हूँ उन हस्तनिर्मित विशेषता मान, और जब यह वापस लेखन, मुझे लगता है मैं बना लिख ​​रहा हूँ दोनों को बदलने और विशेषताओं के साथ ही मूल्य बस सभी जमा मूल्यों को रखने के लिए। रोटेशन के लिए

उदाहरण:

function symbRot(evt) { 

evt.target.ondblclick = function() { 

stopBlur(); 
var ptx=symbG.parentNode.lastChild.getAttribute("cx"); 
var pty=symbG.parentNode.lastChild.getAttribute("cy"); 
var currRot=symbG.getAttributeNS(null, "alttext"); 

var rotAng; 
if (currRot == 0) { rotAng = 90 } else if (currRot == 90) { rotAng = 180 } else if (currRot == 180) { rotAng = 270 } else if (currRot == 270) { rotAng = 0 }; 
symbG.setAttributeNS(null, "transform", "rotate(" + rotAng + "," + ptx + ", " + pty + ")"); 
symbG.setAttributeNS(null, "alttext", rotAng); 
}; 
} 

Answer 5

मैं एक सहायक समारोह है, जो svg तत्व के विभिन्न मैट्रिक्स रिटर्न (भी बदल तत्व की bbox) बनाया है।

कोड यहाँ है: https://stackoverflow.com/a/13111598/1691517

और पूर्ण कार्यात्मक उदाहरण यहाँ है: http://jsbin.com/acowaq/1

Answer 6

लोग अक्सर getBBox और getBoundingClientRect के व्यवहार अंतर से उलझन में मिलता है।

getBBox एक एसवीजी एलिमेंट की मूल विधि है जो HTML DOM तत्व के ऑफसेट/क्लाइंटविड्थ को खोजने के बराबर है। चौड़ाई और ऊंचाई तत्व को घुमाए जाने पर भी कभी भी नहीं बदला जा रहा है। इसका उपयोग एचटीएमएल डोम तत्वों के लिए नहीं किया जा सकता है।

getBoundingClientRect एचटीएमएल और एसवीजी दोनों तत्वों के लिए आम है। bounded rectangle चौड़ाई और ऊंचाई तत्व बदल जाएगा जब तत्व घुमाया जाता है या जब अधिक तत्व समूहित होते हैं।