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

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

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

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

Я застрял на том, как вычесть форму A из формы B.

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

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

Это возможно?


subtraction intersection shape kineticjs
person Dakisan    schedule 04.02.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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.

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

person markE    schedule 04.02.2014