svg - वर्तमान परिवर्तन मैट्रिक्स के लिए स्ट्रोक चौड़ाई प्रतिरक्षा कैसे करें




postscript coordinate-transformation (2)

एसवीजी (और कैनवास, क्वार्ट्ज, पोस्टस्क्रिप्ट, ...) में, रूपांतरण मैट्रिक्स पथ निर्देशांक और रेखा चौड़ाई दोनों को प्रभावित करता है। क्या समायोजन करने का कोई तरीका है ताकि रेखा चौड़ाई प्रभावित न हो? उदाहरण के लिए, एक्स और वाई के लिए स्केल अलग है, जो स्क्वायर को एक आयताकार बनाता है, जो ठीक है, लेकिन यह लाइनों को दोनों तरफ व्यापक बनाता है।

  <g transform="rotate(30) scale(5,1) ">
      <rect x="10" y="10" width="20" height="20" 
            stroke="blue" fill="none" stroke-width="2"/>
  </g>

मैं देख सकता हूं कि कई मामलों में उपयोगी होगा, लेकिन क्या इसका चयन करने का कोई तरीका है? मुझे लगता है कि मैं एक अलग पेन टीएम रखना चाहता हूं या कलम को एक अंडाकार होने में सक्षम होना चाहता हूं कि सीटीएम एक सर्कल में परिवर्तित हो जाता है, लेकिन मुझे ऐसा कुछ नहीं दिख रहा है।

मुझे लगता है कि, मुझे लगता है कि मुझे अपने सीटीएम के बारे में एसवीजी नहीं बताना है और इसके बजाय निर्देशांक स्वयं को बदलना है, जिसका मतलब है कि प्राइमेटिव्स जैसे rect को उनके path समकक्षों में परिवर्तित करना।


पोस्टस्क्रिप्ट में, पथ का वर्णन करने और स्ट्रोक करने से अलग घटनाएं होती हैं, इसलिए अलग "पेन" टीएम होना पूरी तरह से संभव है।

%!PS
%A Funky Shape

matrix currentmatrix %save normal matrix for stroke pen
306 396 translate
72 72 scale
1 1 5 { pop
    360 5 div rotate
    1 0 translate
    0 0 moveto
    1 1 5 { pop
        360 5 div rotate
        1 0 translate
        1 0 lineto
        -1 0 translate
    } for
    -1 0 translate
    closepath
} for
setmatrix
[ 1 -3 4 2 0 0 ] concat %put some skew in the pen
10 rotate     %makes it look more "organic"
stroke
showpage

संपादित करें:

वास्तव में यह व्यवहार प्राप्त करने के लिए एक विशेषता है जिसे आप अपने आयत में जोड़ सकते हैं:

vector-effect="non-scaling-stroke"

यह गलत था:

यह काम करेगा यदि आप ट्रांसफॉर्म को सीधे आकार में लागू करते हैं, न कि समूह में। यह निश्चित रूप से, यदि आप कई वस्तुओं को समूहबद्ध करना चाहते हैं और उन्हें एक साथ स्केल करना चाहते हैं, तो वह दृष्टिकोण काम नहीं करेगा।

<rect x="10" y="10" width="20" height="20" 
            stroke="blue" fill="none" stroke-width="2"
            transform="rotate(30) scale(5,1)"/>

यह आपके एसवीजी दर्शक पर भी निर्भर हो सकता है; इंकस्केप आपकी फ़ाइल को जिस तरीके से आप चाहते हैं (स्ट्रोक चौड़ाई पैमाने पर प्रभावित नहीं होती है) लेकिन क्रोम इसे दिखाता है जैसा आपने दिखाया है।







coordinate-transformation