Рафаэль-JS: Rect с одним круглым углом - PullRequest
Новая
       2

Рафаэль-JS: Rect с одним круглым углом

8 голосов
/ 22 июля 2010 
paper.rect(0, 0, settings.width, settings.height, settings.radius);

Создает красивый прямоугольник с закругленными углами.Можно ли создать прямоугольник с одним круглым углом?

Ответы [ 3 ]

25 голосов
/ 06 сентября 2011

Если вы используете 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/

8 голосов
/ 23 июля 2010

Функция скругленных углов отображается непосредственно на нижележащие атрибуты SVG rx и ry, они применяются ко всем прямоугольникам и поэтому нет возможности просто установить егоодин угол.

В этом блоге обсуждается подход в SVG, заключающийся в том, чтобы скрыть углы, которые вы не хотите округлять.Хотя его примеры теперь кажутся автономными, подход должен быть довольно простым для обратного инжиниринга в SVG.

Альтернативным подходом будет использование path вместо объекта прямоугольника и рисованиевесь набросок сам.Синтаксис немного неясен, но достаточно прост, когда вы понимаете, что происходит.Попробуйте учебник SVG Path Якоба Дженкова для ознакомления.

2 голосов
/ 29 ноября 2014

Очень старый вопрос, вот лучший путь. Я преобразовал его в относительные координаты, которые должны быть лучше при анимации ... 

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