Raphael-JS：帶有一個圓角的矩形

Question

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

創建一個帶圓角的漂亮矩形。是否可以創建一個只有一個圓角的矩形？

Answer 1

圓角特徵直接映射到基礎SVG rx和ry屬性，它們適用於整個矩形，因此不可能將其設置在單個角落。

This blog post討論了一種基本上覆蓋了你不想四捨五入的角的SVG方法。雖然他的例子現在似乎已經脫機，但這種方法應該很容易反向工程到SVG。

另一種方法是使用a path而不是矩形對象並自己繪製整個輪廓。語法有點模糊，但一旦你明白髮生了什麼，就足夠簡單了。有關介紹，請嘗試Jakob Jenkov's SVG Path tutorial。

Answer 2

如果使用拉斐爾JS：

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); 
};