रैप पाठ एक आयत में फिट: राफेल

Question

किसी को भी समारोह है कि शब्द सीमाओं पर पाठ को तोड़ने आयत

बाद में फिट कर सकते हैं के बारे में पता आयत और पाठ के लिए कोड है

window.onload = function() { 

    var outsideRectX1=30, outsideRectY1=30,outsideRectX2=220, outsideRectY2=480, outsideRectR=10; 
    var group = paper.set(); 


    var rect1=paper.rect(outsideRectX1+40, outsideRectY1+70, 80, 40,10); 
    var text3=paper.text(outsideRectX1+75, outsideRectY1+85,"Test code for wrap text").attr({fill: '#000000', 'font-family':'calibri', 'font-size':'14px'}); 

    group.push(rect1); 
group.push(text3); 

    }; 

जब टेक्स्ट से अधिक है आयताकार चौड़ाई यह स्वचालित रूप से लपेटती है ताकि यह हमेशा आयताकार सीमाओं में प्रदर्शित हो।

Answer 1

मुझे यकीन नहीं है कि आयताकार के आकार के अनुसार पाठ को लपेटने का कोई सीधा तरीका है या नहीं। हो सकता है कि आप लाइन ब्रेक या "\ n" निर्दिष्ट कर सकें। या आप पाठ की लंबाई बढ़ने के साथ ही आयत का आकार बदलने का प्रयास कर सकते हैं।

यहां एक नमूना कोड है जहां आयत टेक्स्ट आकार बढ़ने के रूप में आकार बदलती है।

var recttext = paper.set(); 
el = paper.rect(0, 0, 300, 200); 
text = paper.text(0,10, "Hi... This is a test to check whether the rectangle dynamically changes its size.").attr({"text-anchor":"start",fill:'#ff0000',"font-size": 14}); 
text1=paper.text(0,30,"hi").attr({"text-anchor":"start",fill: '#ff0000',"font-size": 14}); 
//el.setSize(495,200); 
recttext.push(el); 
recttext.push(text); 
recttext.push(text1); 
alert(recttext.getBBox().width); 
alert(recttext.getBBox().height); 
var att = {width:recttext.getBBox().width,height:recttext.getBBox().height}; 
el.attr(att); 
recttext.translate(700,400); 

Answer 2

मैं जानता हूँ कि यह अब एक छोटे से विलम्बित है, लेकिन आप मेरी [राफेल अनुच्छेद] में रुचि हो सकती [1] परियोजना।

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

उपयोग उदाहरण और दस्तावेज गिटहब पेज पर उपलब्ध कराए जाते हैं।