Raphael-JS: Rect mit einer runden Ecke

Question

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

Erzeugt ein schönes Rechteck mit abgerundeten Ecken. Ist es möglich, ein Rechteck mit nur einer runden Ecke zu erstellen?

Answer 1

Die abgerundeten Ecken zeichnen sich direkt auf den zugrundeliegenden SVG rx und ry Attributen ab, sie gelten für ganze Rechtecke und daher gibt es keine Möglichkeit, sie nur auf eine Ecke zu setzen.

This blog post diskutiert einen Ansatz in SVG von im Grunde decken die Ecken, die Sie nicht möchten abgerundet. Obwohl seine Beispiele jetzt offline zu sein scheinen, sollte der Ansatz relativ einfach in SVG rekonstruiert werden können.

Ein alternativer Ansatz wäre die Verwendung a path anstelle eines Rechteckobjekts und zeichnen Sie die gesamte Gliederung selbst. Die Syntax ist ein wenig unklar, aber es ist einfach genug, wenn Sie erst einmal verstanden haben, was vor sich geht. Versuchen Sie Jakob Jenkov's SVG Path tutorial für eine Einführung.

Answer 2

Wenn Sie Raphael 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); 
}; 

Um ein Rechteck haben nur mit der rechten oberen Ecke abgerundet

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

Quelle und Online-Beispiel: http://www.remy-mellet.com/blog/179-draw-rectangle-with-123-or-4-rounded-corner/

Answer 3

Sehr alte Frage, hier ist ein besserer Weg. Ich baute es zu relativen Koordinaten, die auf Animationen besser sein sollte ...

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