राफेल-जेएस: एक गोल कोने के साथ आय

Question

paper.rect(0, 0, settings.width, settings.height, settings.radius); 

गोलाकार कोनों के साथ एक अच्छा आयताकार बनाता है। क्या सिर्फ एक गोल कोने के साथ एक आयत बनाना संभव है?

Answer 1

गोलाकार कोनों में अंतर्निहित एसवीजी rx और ry विशेषताओं पर सीधे नक्शा हैं, वे पूरे आयत पर लागू होते हैं और इसलिए इसे केवल एक कोने पर सेट करने की कोई संभावना नहीं है।

This blog post एसवीजी में मूल रूप से उन कोनों को कवर करने के दृष्टिकोण पर चर्चा करता है जिन्हें आप गोलाकार नहीं करना चाहते हैं। यद्यपि उनके उदाहरण अब ऑफ़लाइन प्रतीत होते हैं, लेकिन दृष्टिकोण को एसवीजी में रिवर्स इंजीनियर के लिए काफी आसान होना चाहिए।

एक आयताकार वस्तु के बजाय a path का उपयोग करने के लिए एक वैकल्पिक दृष्टिकोण होगा और पूरी रूपरेखा स्वयं को आकर्षित करें। वाक्यविन्यास थोड़ा अस्पष्ट है लेकिन यह समझने के बाद कि आप क्या कर रहे हैं, यह काफी आसान है। एक परिचय के लिए Jakob Jenkov's SVG Path tutorial आज़माएं।

Answer 2

आप राफेल जे एस का उपयोग करते हैं:

Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){ 
    var array = []; 
    array = array.concat(["M",x,r1+y, "Q",x,y, x+r1,y]); //A 
    array = array.concat(["L",x+w-r2,y, "Q",x+w,y, x+w,y+r2]); //B 
    array = array.concat(["L",x+w,y+h-r3, "Q",x+w,y+h, x+w-r3,y+h]); //C 
    array = array.concat(["L",x+r4,y+h, "Q",x,y+h, x,y+h-r4, "Z"]); //D 

    return this.path(array); 
}; 

केवल ऊपरी-दाएँ कोने के साथ एक आयत करवाने के लिए गोल

var paper = Raphael("canvas", 840, 480); 
paper.roundedRectangle(10, 10, 80, 80, 0, 20, 0, 0); 

स्रोत और ऑनलाइन उदाहरण: http://www.remy-mellet.com/blog/179-draw-rectangle-with-123-or-4-rounded-corner/

Answer 3

बहुत पुराने सवाल है, यहाँ एक बेहतर रास्ता है। मैं इसे रिश्तेदार निर्देशांक, जो एनिमेशन में बेहतर होना चाहिए करने के लिए परिवर्तित ...

Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){ 
    var array = []; 
    array = array.concat(["M",x+r1,y]); 
    array = array.concat(['l',w-r1-r2,0]);//T 
    array = array.concat(["q",r2,0, r2,r2]); //TR 
    array = array.concat(['l',0,h-r3-r2]);//R 
    array = array.concat(["q",0,r3, -r3,r3]); //BR 
    array = array.concat(['l',-w+r4+r3,0]);//B 
    array = array.concat(["q",-r4,0, -r4,-r4]); //BL 
    array = array.concat(['l',0,-h+r4+r1]);//L 
    array = array.concat(["q",0,-r1, r1,-r1]); //TL 
    array = array.concat(["z"]); //end 

    return this.path(array); 
};