paper.rect(0, 0, settings.width, settings.height, settings.radius);
Creates a nice rectangle with rounded corners. Is it possible to create a rectangle with just one round corner?
If you use 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);
};
To have a rectangle with only the upper-right corner rounded
var paper = Raphael("canvas", 840, 480);
paper.roundedRectangle(10, 10, 80, 80, 0, 20, 0, 0);
Source and online example: http://www.remy-mellet.com/blog/179-draw-rectangle-with-123-or-4-rounded-corner/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With