CreateJS маскирует изображения за корзиной

Итак, у меня есть холст с несколькими элементами внутри него. Я хочу применить маску изображения к изображению, чтобы отображалась только часть этого изображения. Моя проблема в том, что мне нужно расположить маску относительно сцены, но показать только ту часть изображения, которая находится за этой маской. Причина, по которой мне нужно это сделать, заключается в том, что я собираюсь манипулировать изображением (поворачивать, масштабировать, наклонять и т. д.). Это довольно сложно объяснить, поэтому, если вам нужна дополнительная информация, пожалуйста, дайте мне знать. Я дал несколько изображений ниже, чтобы помочь объяснить.

Итак, как вы можете видеть на изображениях ниже, мне нужно, чтобы маска оставалась на том же месте, но показывала только то, что находится в круге. Поэтому, когда я перемещаю и манипулирую изображением, мне нужно, чтобы маска оставалась на том же месте, но показывала, какая часть изображения находится за ней.

введите здесь описание изображения

введите здесь описание изображения

введите здесь описание изображения


javascript canvas html createjs easeljs
person Glen Robson    schedule 14.11.2014    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы должны быть в состоянии сделать Контейнер, который имеет:

  1. Bitmap как первый дочерний элемент, имеющий изображение
  2. Черное наложение Shape как второй дочерний элемент
  3. Второе растровое изображение с тем же изображением
  4. Форма маски, которая применяется к фигуре.

Фигура маски может перемещаться относительно растрового изображения/фигуры, а затем Контейнер может трансформироваться целиком.

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

var c = new createjs.Container().set();
var b = new createjs.Bitmap(image);
var o = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,imageWidth,imageHeight));
var b2 = new createjs.Bitmap(image);
var m = new createjs.Shape(new createjs.Graphics().dc(0,0,50));
b2.mask = m;

c.addChild(b, o, b2);
stage.addChild(c);

Ваше здоровье.

person Lanny    schedule 15.11.2014
comment
Спасибо, я действительно разобрался с этим до того, как вы опубликовали свой ответ, но в основном я сделал то же самое, что вы упомянули. Добавил изображение в контейнер, а затем замаскировал контейнер. Спасибо за ответ! - person Glen Robson; 17.11.2014
comment
Просто быстрое продолжение - Chrome не сглаживает маски, но вы можете обойти это, вместо этого используя растровую заливку в окне просмотра (с преобразованием матрицы) вместо создания окна просмотра с использованием маски. Я развил эту концепцию немного дальше и создал небольшую демонстрацию лупы: lab.gskinner.com/magnifier. - person Lanny; 19.09.2015