स्क्रीन पिक्सल में घूर्णनित एसवीजी तत्व की सीमाएं पाएं?

Question

मैं एक HTML तत्व को सही तरीके से ओवरले करने के लिए, स्क्रीन पिक्सेल में मनमानी एसवीजी तत्व के बाध्यकारी बॉक्स को पाने का सबसे अच्छा तरीका खोजने का प्रयास कर रहा हूं। ऑब्जेक्ट के बाउंडिंग बॉक्स को पुनर्प्राप्त करने और मैट्रिक्स को बदलने के लिए अब तक मेरा दृष्टिकोण .getBBox() और .getCTM() का उपयोग करना है, फिर this question पर स्वीकृत उत्तर में वर्णित बाउंडिंग बॉक्स बिंदुओं में परिवर्तन लागू करें।

// get the element 
var el = $(selector)[0], 
    pt = $(selector).closest('svg')[0].createSVGPoint(); 

// get the bounding box and matrix 
var bbox = el.getBBox(), 
    matrix = el.getScreenCTM(); 

pt.x = bbox.x; 
pt.y = bbox.y; 
var nw = pt.matrixTransform(matrix); 
pt.x += bbox.width; 
pt.y += bbox.height; 
var se = pt.matrixTransform(matrix); 

// make a div in the screen space around the object 
var $div = $('<div class="bbox"/>').css({ 
     left: nw.x, 
     top: nw.y, 
     width: se.x - nw.x, 
     height: se.y - nw.y 
    }) 
    .appendTo('body'); 

आप अपने परीक्षण यहाँ देख सकते हैं: http://jsfiddle.net/nrabinowitz/zr2jX/

हालांकि, परीक्षण से पता चलता है के रूप में, इस दृष्टिकोण जब वहाँ एक रोटेशन को बदलने में शामिल विफल रहा है - ऐसा लगता है सीमांकन बॉक्स की तरह पूर्व गणना की जाती है घूर्णन, इसलिए घुमावदार बाउंडिंग बॉक्स के कोनों को काम नहीं कर रहा है।

मैं परिवर्तित तत्वों के गैर-घुमावदार बाउंडिंग बॉक्स की सही गणना कैसे कर सकता हूं?

Answer 1

कुछ शोध करने के बाद, यहाँ सबसे अच्छा विकल्प मैंने पाया हैं:

• getBoundingClientRect() आधुनिक ब्राउज़रों में एसवीजी तत्वों के लिए अच्छी तरह से काम करने लगता है, और काफी तेजी से होता है, लेकिन परिणाम के लिए मंच से कुछ हद तक भिन्न हो सकते हैं मंच (विशेष रूप से यदि आपके पास पर्याप्त स्ट्रोक चौड़ाई है)। हालांकि, @ सेर्गीयू के बिंदु पर, यह आकार में परिवर्तनों के लिए जिम्मेदार नहीं है, और आपको घुमावदार बाउंडिंग बॉक्स की सीमा देता है, वास्तविक पथ या वस्तु नहीं, इसलिए यह काफी अपमानजनक हो सकता है - see criticism here। उदाहरण बेला: http://jsfiddle.net/stevenbenner/6M5zf/

• मेरा मुख्य लक्ष्य स्थितीय कोनों और सीमांकन आयत के मध्य बिन्दुओं मिल गया था, और अंत में मैंने तय कर लिया है कि घुमाया बाउंडिंग बॉक्स का उपयोग कर यहाँ तक कि एक घुमाया के 'असली' बाउंडिंग बॉक्स के लिए बेहतर हो सकता है आकार। मैं उपर्युक्त दृष्टिकोण का उपयोग करके ऐसा करने में सक्षम था, और फिर एन, एस, ई, डब्ल्यू पदों के लिए जितना संभव हो सके अंक प्राप्त करने के लिए अंक चला रहा था। तुम मेरे उदाहरण बेला यहाँ देख सकते हैं: http://jsfiddle.net/nrabinowitz/sPtzV/

Answer 2

मुझे लगता है कि नहीं लगता है, संभव है क्योंकि तिरछा और रोटेशन एक प्रोफ़ाइल परिवर्तन, या कैसे दो अक्षों पर आकार के अनुमानों देखने के शामिल है।

आप रूपांतरण मैट्रिक्स की गणना कर सकते हैं जो सीटीएम के घूर्णन भाग को अनदेखा कर देगा, लेकिन तब आपके पास कोई गारंटी नहीं है कि नया बीबीओक्स अभी भी आपके घूर्णन तत्व को घेरेगा। उदाहरण के लिए, यदि आपके पास सर्कल है, तो रोटेशन बाउंडिंग बॉक्स के आयामों को प्रभावित नहीं करता है। यदि, दूसरी ओर, आपके पास आधार पथ के रूप में हीरा है, और आप इसे 45 डिग्री से घुमाते हैं, तो अंत में यह केवल एक वर्ग है, बाउंडिंग बॉक्स अलग है: मूल रूप से आप विकर्ण को माप रहे थे, और अब आपको एक बाउंडिंग बॉक्स प्राप्त करना होगा जो पक्ष की लंबाई को मापता है। इससे कोई फर्क नहीं पड़ता कि आप सीटीएम का उपयोग कैसे करते हैं, आप आकार में बदलाव को ध्यान में रख सकते हैं।

तो, घूर्णन वास्तव में काफी महत्वपूर्ण है, इसे अनदेखा करना एक विकल्प नहीं है; लेकिन केवल स्थानीय बाउंडिंग बॉक्स और रूपांतरण मैट्रिक्स कुछ भी नहीं बताता है कि घूर्णन होने पर आकृति प्रोफाइल कैसे बदलता है।