KineticJS вычитает одну форму из другой

Question

У меня есть стадия KineticJs, где пользователь может рисовать объекты - прямоугольники и полигоны.

Я хотел бы, чтобы пользователь мог выбрать любые два объекта и вычесть первую выбранную форму из второй выбранной формы.

В идеале пользователь будет выбирать параметры из контекстного меню («вычесть эту фигуру», «из этой формы»), и форма реза не будет затронута, изменится только форма разреза.

То, что я застрял на том, как вычитать формы А из формы В.

Вот ссылка на чертеж, который показывает, что я имею в виду:

https://docs.google.com/drawings/d/1X8ccw2YqDwMF8JwUYy_TeUnMX-4q6PcPsH8SjViyO3E/edit?usp=sharing (в «контекстное меню» элементы являются плавающие прямоугольники).

Возможно ли это?

Answer 1

Изменение одной формы с использованием другой формы называется композицией.

В вашем случае вычесть новый круг из существующего прямоугольника будет выполнять операцию компоновки, называемую «назначение-выход».

KineticJS не предлагает составные операции над объектами.

Это как композиционный ваш прямоугольник минус круг с использованием не Кинетические HTML холста:

// draw the rectangle 

ctx.fillStyle="lightblue"; 
ctx.fillRect(20,20,80,160); 

// save the context state 

ctx.save(); 

// set compositing to destination-out 
// all new drawings will "cut-out" existing 
// drawings where they both overlap 

ctx.globalCompositeOperation="destination-out"; 

// draw the circle 

ctx.beginPath(); 
ctx.arc(100,90,30,0,Math.PI*2); 
ctx.closePath(); 
ctx.fill(); 

// restore the context state 
// This also turns off compositing 

ctx.restore(); 

Что вы можете сделать, чтобы достичь вашего эффекта в KineticJS

демонстрационного : http://jsfiddle.net/m1erickson/m34tn/

• Создать закадровый холст
• Нарисовать прямоугольник-минус-круг на этом холсте
• Используйте, что холст в качестве источника для Kinetic.Image

В результате, вы будете иметь Кинетический объект изображения с желаемой формой.