Как заполнить пользовательскую форму/путь с помощью EaselJS

Question

Я изучаю CreateJS. Этот вопрос касается EaselJS.

Мне удалось нарисовать 3 дуги и наполнить их цветом.

Хотя, я хочу, чтобы конечный результат, чтобы выглядеть следующим образом:

Если я нарисовать треугольник, чтобы заполнить недостающее пространство, как я могу удалить цвет внутри нижней части дуга?

Если я установил его на transparent, он отобразит цвет треугольника.
Я мог бы установить его в белый цвет, чтобы выглядеть так, как я хочу в этом случае, но он выглядел бы плохо поверх цветного фона.

Есть ли какой-либо метод в API, который я пропускаю, чтобы сделать что-то похожее на заливку заливки внутри фигуры, нарисованной несколькими дугами/линиями?

Answer 1

Вместо того, чтобы рисовать три отдельные дуги, вы должны использовать arcTo, чтобы поддерживать непрерывный путь.

Что-то вроде этого (конечно, заменив цифры с точками/контрольные точки):

new Graphics().beginStroke(STROKE_COLOR) 
    .moveTo(0, 20) 
    .arcTo(150, 20, 150, 70, 50) 
    .arcTo(150, 20, 150, 70, 50) 
    .arcTo(150, 20, 150, 70, 50) 
    .endStroke();