Как нарисовать прямоугольник с 1 круглым углом?

Question

Как нарисовать прямоугольник с 1 закругленным углом и залить его цветом?

Я пытаюсь использовать метод arcTo со следующим кодом:

this.bgGraphics.beginFill(0xFFCC00, 1);
this.bgGraphics.moveTo(0, 0);
this.bgGraphics.lineTo(45, 0);
this.bgGraphics.arcTo(45, 0, 60, 15, 15);
this.bgGraphics.lineTo(60, 60);
this.bgGraphics.lineTo(0, 60);
this.bgGraphics.endFill();

Т.е. я рисую прямоугольник 60 х 60, а затем пытаюсь использовать arcTo из точки 45, 0 в 45, 15 с радиусом 15,

Но вместо закругленного угла в правой верхней части оно обрезается:

Answer 1

arcTo() метод немного сбивает с толку. Координаты (x1,y1) не являются начальной точкой кривой. Думайте об этом больше как о точках для ручек Безье. Чтобы получить нужную дугу, вам нужно потянуть ручку Безье прямо вдоль оси x. Таким образом, ваш метод должен выглядеть так:

this.bgGraphics.arcTo(60, 0, 60, 15, 15);

Answer 2

Поскольку это все один цвет, как насчет рисования скругленного прямоугольника с Graphics.drawRoundedRect а затем рисовать округлые части, которые вы не хотите? Вы бы нарисовали прямоугольник с закругленными углами в натуральную величину, а затем накрыли углы, которые вы хотите, квадратными с нормальными канатами, например:

Answer 3

Я согласен с Кармаконом. Я просто хотел добавить, что иногда проще использоватьquadraticCurveTo(), так как у него меньше вариантов. Вы указываете контрольную точку Безье x и y и конечную точку x и y. Однако вы не получите удобства параметра радиуса.

this.bgGraphics.quadraticCurveTo(60, 0, 60, 15);

Вот сравнение:

- arcTo(x1,y1,x2,y2,r);
x1  The x-coordinate of the first tangent   
y1  The y-coordinate of the first tangent   
x2  The x-coordinate of the second tangent  
y2  The y-coordinate of the second tangent  
r   The radius of the arc

- quadraticCurveTo(cpx,cpy,x,y);
cpx The x-coordinate of the Bézier control point    
cpy The y-coordinate of the Bézier control point    
x   The x-coordinate of the ending point    
y   The y-coordinate of the ending point

Очень полезно видеть изображения выше, но я пока не могу их опубликовать. Посмотрите на W3Schools или на developer.mozilla.org хорошие изображения того, как работают параметры.