Raphael-JS: Rect with one round corner

paper.rect(0, 0, settings.width, settings.height开发者_如何学Python, 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/

The rounded corners feature maps directly on to the underlying SVG rx and ry attributes, they apply to whole rectangles and so there's no possibility of just setting it on a single corner.

This blog post discusses an approach in SVG of basically covering up the corners you don't want rounded. Although his examples appear to be offline now, the approach should be fairly easy to reverse engineer into SVG.

An alternative approach would be to use a path instead of a rectangle object and draw the whole outline yourself. The syntax is a little obscure but is easy enough once you understand what's going on. Try Jakob Jenkov's SVG Path tutorial for an introduction.

Very old question, here's a better path. I converted it to relative coordinates, which should be better at animations...

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