7

में निश्चित स्थिति को रखकर तत्व को स्केल कैसे करें मैं नीचे की स्थिति को निश्चित स्थिति में स्केल करना चाहता हूं।एसवीजी

<path id="container_svg_rectsymbol1" fill="red" stroke-width="1" stroke="Gray" d="M 73.1111111111111 -71.75 L 83.1111111111111 -71.75 L 83.1111111111111 -61.75 L 73.1111111111111 -61.75 L 73.1111111111111 -71.75" transform="scale(1)"/> 

जब स्केलिंग शुरू हो रहा है तो यह एक स्थान से दूसरे स्थान पर जाता है। मैं ऑब्जेक्ट को स्थानांतरित नहीं करना चाहता हूं, मैं बस ऑब्जेक्ट के आकार को बड़ा करना चाहता हूं।

मैंने निम्नलिखित लिंक का उल्लेख किया है।

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

कैसे निश्चित स्केलिंग करना है?

मैं तत्व को एनिमेट करना चाहता हूं iee निश्चित स्थिति में आकार बढ़ाएं। मैंने निम्नलिखित तरीके से लागू किया है। लेकिन यह तत्व मूल से तत्व को स्थानांतरित करता है। कृपया नीचे कोड देखें।

var box = element.getBBox(); 
var scaleVal=null, x=null, y=null; 
$(element).animate(
    { 
      scale: 1, 
      centerX:box.x+(4*transX), 
      centerY:box.y+(4*transY) 
    }, 
    { 
      duration: 4000, 
      step: function(now,fx) { 
       if (fx.prop == "scale") { 
        scaleVal = now; 
       } else if (fx.prop == "centerX") { 
        x = now; 
       } else if (fx.prop == "centerY") { 
        y = now; 
       } 

       if(!sf.util.isNullOrUndefined(scaleVal) && !sf.util.isNullOrUndefined(x) && !sf.util.isNullOrUndefined(y)) { 
        $(element).attr("transform", "translate("+(-x*(scaleVal-1))+","+(-y*(scaleVal-1))+")scale(" + scaleVal + ")"); 
       } 
      } 
    ) 

केंद्रित बिंदु में स्केलिंग के लिए नीचे दिए गए लिंक को संदर्भित करता है।

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

लेकिन यह अभी भी मूल से शुरू होता है और तत्व को बड़ा करता है।

धन्यवाद,

शिव

+0

कोशिश करें [phrogz] (http://stackoverflow.com/questions/4850821/svg-coordinates-with-transform-matrix) उत्कृष्ट उत्तर –

+0

@ एल्विन: यह मेरी आवश्यकता के लिए प्रासंगिक नहीं है। – SivaRajini

उत्तर

16

स्केलिंग मूल (0, 0), इसलिए यदि आपके आकार पर केंद्रित नहीं है पर केंद्रित है (0, 0) ले जाने के लिए दिखाई देगा। यह पहली अपने आकार का अनुवाद तो यह मूल पर केंद्रित है ठीक करने के लिए, तो यह स्केल, फिर इसे वापस अनुवाद करें:

transform="translate(78.11 -66.75) scale(2) translate(-78.11 66.75)"

ध्यान दें कि परिवर्तनों उलटे क्रम में किया जाता है।

आप प्रारंभ करने के लिए शुरू होने वाले आकार को बनाकर और फिर स्केलिंग और इसे बदलने के द्वारा चीजों को सरल बना सकते हैं।

<path id="container_svg_rectsymbol1" fill="red" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="translate(78.11 -66.75) scale(3)"/>

तुम भी परिवर्तित कर सकते हैं मैट्रिक्स में बदलना है, जो और अधिक कुशल होगा:

<path opacity="0.5" fill="red" stroke-width="1" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="matrix(3 0 0 3 78.11 -66.75)"/>

[संपादित करें] jQuery चेतन का उपयोग करने के लिए, यह (0 से स्केलिंग काम करना चाहिए 1 4 सेकंड):

 var box = element.getBBox(); 
     var cx = box.x + box.width/2; 
     var cy = box.y + box.height/2; 

     $(element).animate(
      { scale: 1 }, 
      { duration: 4000, 
       step: function(now, fx) { 
        scaleVal = now; 
        $(element).attr("transform", "translate(" + cx + " " + cy + ") scale(" + scaleVal + ") translate(" + (-cx) + " " + (-cy) + ")"); 
       } 
      } 
     ); 
+0

मुझे पता है कि उस पोस्ट में वर्णित मूल्य -78.11 और 66.75 का मूल्य क्या है और 78.11, -66.75 – SivaRajini

+0

जैसी अगली पंक्ति में बदल गया है, मैंने प्रश्न संपादित किया है। क्या आप इसे संदर्भित कर सकते हैं। तत्व – SivaRajini

+0

की केंद्रित स्थिति से स्केल मान के साथ एनीमेशन कर रहा हूं वे मान आपके द्वारा खींचे गए आकार का केंद्र हैं। आप GetBBox का उपयोग कर सकते हैं। इस मामले में मान बॉक्स.एक्स + बॉक्स.विड्थ/2 और box.y + box.height/2 हैं। पहले इन मानों के नकारात्मक का अनुवाद करें, फिर स्केल करें, फिर सकारात्मक मान का अनुवाद करें। –

3

ठीक है, अब है कि मैं आपके सवाल का पुन: पढ़ने की है, ऐसा लगता है कि आप +०१२३२२५०१६६५ उपयोग करना चाहते हैंऔर रहस्यमय "चाल" का सामना करना भी, जो एसवीजी (मुझे शामिल) सीखने वाले सबसे शुरुआती लोगों के लिए भ्रमित है।

स्केलिंग origin(0,0) से मापा जाता है, इसलिए यदि वस्तु स्थान (50,-100), पर जब scale(2) लागू करने, वस्तु स्थान (50*2, -100*2) =>(100, -200) करने के लिए दोगुनी है। इसलिए आपको translate(-50,100) द्वारा इसे सही करने की आवश्यकता है।

matrix() का उपयोग करने के लिए अगला क्षेत्र होगा क्योंकि यह काफी सहज है। उपरोक्त उदाहरण को स्केल करने के लिए matrix(2 0 0 2 -50 100) की आवश्यकता होगी और इसे मूल पर वापस ले जाया जाएगा।matrix() कोड के साथ, आप flip() और mirror() आसानी से दूसरे और तीसरे क्षेत्र के साथ कर सकते हैं। फिर इन दो परिवर्तनों के लिए आपको ऑब्जेक्ट की लंबाई और/या चौड़ाई का अनुवाद करना होगा।

+0

मैंने अनुवाद के नीचे कुछ चीज़ की कोशिश की (-centerX * (कारक -1), -centerY * (कारक -1)) स्केल (कारक) – SivaRajini

+0

नीचे दिए गए लिंक से संदर्भित http://commons.oreilly.com/wiki/index .php/SVG_Essentials/Transforming_the_Coordinate_System – SivaRajini

+1

लेकिन यह अभी भी काम नहीं कर रहा है। मैं अनुवाद का उपयोग कर रहा हूं साथ ही – SivaRajini