paper.rect(0, 0, settings.width, settings.height, settings.radius);
Создает красивый прямоугольник с закругленными углами. Можно ли создать прямоугольник с одним круглым углом?Raphael-JS: Rect с одним круглым углом
paper.rect(0, 0, settings.width, settings.height, settings.radius);
Создает красивый прямоугольник с закругленными углами. Можно ли создать прямоугольник с одним круглым углом?Raphael-JS: Rect с одним круглым углом
Скругленные углы отображаются непосредственно на базовые атрибуты SVG rx
и ry
, они применяются ко всем прямоугольникам, и поэтому нет возможности просто установить его на одном углу.
This blog post обсуждает подход в SVG, в основном закрывающий углы, которые вы не хотите округлять. Хотя его примеры, похоже, сейчас отключены, подход должен быть довольно легко перестроить в SVG.
Альтернативным подходом было бы использовать a path вместо объекта прямоугольника и нарисовать весь контур самостоятельно. Синтаксис немного неясен, но достаточно простой, как только вы поймете, что происходит. Попробуйте Jakob Jenkov's SVG Path tutorial для введения.
Если вы используете Рафаэль 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/
Очень старый вопрос, вот лучший путь. Я преобразовал его в относительные координаты, которые должны быть лучше в анимации ...
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);
};
Это прекрасно работает для статических скругленных прямоугольников, но не работает, если вам нужно использовать Raphael живого метод, к сожалению. Хотелось бы увидеть версию, способную жить. – nickb
@nickb Почему бы не работать с анимацией? Да, это просто путь. Интересно, что такое зависание? – Kato