Raphael-JS: Rect con una esquina redonda

Question

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

Crea un bonito rectángulo con esquinas redondeadas. ¿Es posible crear un rectángulo con solo una esquina redonda?

Answer 1

Las esquinas redondeadas cuentan con mapas directamente en los atributos subyacentes SVG rx y ry, se aplican a rectángulos enteros y por lo tanto no hay posibilidad de simplemente configurarlo en una esquina.

This blog post describe un enfoque en SVG que básicamente cubre las esquinas que no desea redondear. Aunque sus ejemplos parecen estar fuera de línea ahora, el enfoque debería ser bastante fácil para realizar ingeniería inversa en SVG.

Un enfoque alternativo sería usar a path en lugar de un objeto rectángulo y dibujar todo el contorno usted mismo. La sintaxis es un poco oscura pero es bastante fácil una vez que entiendes lo que está pasando. Pruebe Jakob Jenkov's SVG Path tutorial para una introducción.

Answer 2

Si utilizar Rafael 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); 
}; 

Tener un rectángulo con solamente la esquina superior derecha redondeada

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

Fuente y el ejemplo en línea: http://www.remy-mellet.com/blog/179-draw-rectangle-with-123-or-4-rounded-corner/

Answer 3

muy vieja pregunta, aquí hay un mejor camino. Me convertí a coordenadas relativas, que debe ser mejor en las animaciones ...

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