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

创建一个带有圆角的漂亮矩形。是否可以创建一个只有一个圆角的矩形?

4

3 回答 3

26

如果你使用 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);
};

使矩形仅右上角为圆角

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/

于 2011-09-05T23:11:46.443 回答
8

圆角功能直接映射到底层 SVGrxry属性,它们适用于整个矩形,因此不可能仅将其设置在单个角上。

这篇博客文章讨论了 SVG 中的一种方法,该方法基本上覆盖了您不希望圆角的角落。尽管他的示例现在似乎已离线,但该方法应该很容易逆向工程到 SVG。

另一种方法是使用路径而不是矩形对象并自己绘制整个轮廓。语法有点晦涩,但一旦您了解发生了什么,就很容易了。试试Jakob Jenkov 的 SVG 路径教程作为介绍。

于 2010-07-23T15:43:48.677 回答
2

非常老的问题,这是一条更好的路径。我将其转换为相对坐标,这在动画方面应该更好......

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);
};
于 2014-11-29T18:54:32.120 回答