Raphael-JS:有一个圆角的Rect

Question

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

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

Answer 1

如果你使用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/

Answer 2

圆角特征直接映射到底层SVG rx和ry属性,它们适用于整个矩形,因此不可能只将其设置在一个角上.

这篇博客文章讨论了SVG中基本上掩盖你不想要四舍五入的角落的方法.虽然他的示例现在似乎处于脱机状态,但这种方法应该很容易逆向工程到SVG.

另一种方法是使用路径而不是矩形对象并自己绘制整个轮廓.语法有点模糊,但一旦你理解了正在发生的事情就很容易.尝试使用Jakob Jenkov的SVG Path教程进行介绍.