Почему замаскированное изображение покрыто цветом маски? - PullRequest
Новая
       43

Почему замаскированное изображение покрыто цветом маски?

0 голосов
/ 27 марта 2019

Я использую createJS для маскировки изображения, и маска будет отрисовываться пользователем.

Поскольку маска будет обновляться при перетаскивании пользователем, я использовал mouseAlphaMaskFilter с кэшированием изображения для достижения эффекта маски.К сожалению, это приводит к неожиданному.Картинка покрыта цветом обводки, и картинка видна только тогда, когда цвет обводки является полупрозрачным.

Вот текущее тестирование (Пожалуйста, перетащите на холст, чтобы увидеть его результат) 

var stage = new createjs.Stage("canvas");

var shape, bmp, oldX, oldY, size, color;
var stageWidth = 550;
var stageHeight = 400;

mycolor = createjs.Graphics.getRGB(255, 255, 255, .5);

shape = new createjs.Shape();
bmp = new createjs.Bitmap("https://ocdn.eu/pulscms-transforms/1/dZtktkqTURBXy8xNTI0OTU1NWRlNDMyZDNiMjcwZDY2YjVlODJjNDRiNC5qcGVnkZUCzQMWAMLD");
shape.cache(0,0,550,400);
bmp.filters = [new createjs.AlphaMaskFilter(shape.cacheCanvas)];
bmp.cache(0,0,550,400);

stage.on("stagemousemove", function (evt) {
    if (oldX) {
        shape.graphics.beginStroke(color)
        .setStrokeStyle(size, "round")
        .moveTo(oldX, oldY)
        .lineTo(evt.stageX, evt.stageY);
    }
    oldX = evt.stageX;
    oldY = evt.stageY;
    shape.updateCache();
    bmp.updateCache();
    stage.update();
})

stage.on("stagemouseup", function (event) {
    color = mycolor;
});

stage.on("stagemousedown", function (event) {
    color = mycolor;
    size = 20;
});

stage.on("stagemouseup", function (event) {
    color = "";
});

stage.addChild(bmp);
stage.addChild(shape);
stage.update();

Ожидаемый результат в виде обычной маски от createJS (Но этот метод bmp.mask = shape работает только при неизменной маске.)

Извините за мой плохойобъяснение выше.Я благодарен, если какая-либо помощь может привести меня в правильном направлении.

1 Ответ

0 голосов
/ 27 марта 2019

Маска формы не нуждается в кэшировании. Вы можете сделать то же самое, используя только форму в качестве маски. Это означает, что вам также не нужно кэшировать растровое изображение. Кроме того, маски не должны быть добавлены к сцене.

AlphaMaskFilter лучше, если у вас есть различные уровни непрозрачности, которые вы хотите применить.

Вот супер простая версия вашего кода: https://codepen.io/lannymcnie/pen/drEBvw?editors=0010

var shape = new createjs.Shape();
shape.graphics.drawCircle(200,200,100);
bmp.mask = shape;

Приветствия

...