Canvas - 元素在 ThresholdFilter 之后消失
Canvas - Element disappears after ThresholdFilter
我的阈值过滤器有问题。到目前为止我的代码:
var stage = new c.Stage("Canvas");
var canvas = document.getElementById('Canvas');
var currHeight = $('.canvasColumn').height();
canvas.width = 3335;
canvas.height = 3335;
$('#Canvas').css("height", currHeight + "px");
$('#Canvas').css("width", currHeight + "px");
$('#button').on("click", () => {
var imgfb = new Image();
imgfb.src = "/public/img/testFB.png";
var bmp = new c.Bitmap(imgfb);
bmp.set({x : 0, y: 0, name : "testFB"});
stage.addChild(bmp);
stage.update();
//layer is a function which sets onClickListeners for pressmove etc.
layer(bmp);
});
$('#filt').on("click" ,() => {
var bmp = stage.getChildByName("testFB");
bmp.cache(bmp.x, bmp.y, bmp.image.width, bmp.image.height);
bmp.filters = [new createjs.ThresholdFilter(0, 0, 0, 0xdf1318, true)];
bmp.updateCache();
stage.update();
});
由于高分辨率的 png,我必须缩小 canvas 的高度和宽度样式。如果我执行过滤器,只要位图位于 x = y = 0 位置,它就可以工作。但是,只要我移动位图,它就会在屏幕过滤后消失 (canvas)。你能指出我的错误吗?
本例中使用的图片可以在这里找到:
http://www.freepngimg.com/download/facebook/1-2-facebook-download-png.png
PS:如果我设置:
bmp.cache(0, 0, 10000, 7000);
它也可以,但速度非常慢。
我找到了解决方案:
缓存的输入参数x和y是基于bmp的,也就是本地的。因此将两者都设置为 0.
我的阈值过滤器有问题。到目前为止我的代码:
var stage = new c.Stage("Canvas");
var canvas = document.getElementById('Canvas');
var currHeight = $('.canvasColumn').height();
canvas.width = 3335;
canvas.height = 3335;
$('#Canvas').css("height", currHeight + "px");
$('#Canvas').css("width", currHeight + "px");
$('#button').on("click", () => {
var imgfb = new Image();
imgfb.src = "/public/img/testFB.png";
var bmp = new c.Bitmap(imgfb);
bmp.set({x : 0, y: 0, name : "testFB"});
stage.addChild(bmp);
stage.update();
//layer is a function which sets onClickListeners for pressmove etc.
layer(bmp);
});
$('#filt').on("click" ,() => {
var bmp = stage.getChildByName("testFB");
bmp.cache(bmp.x, bmp.y, bmp.image.width, bmp.image.height);
bmp.filters = [new createjs.ThresholdFilter(0, 0, 0, 0xdf1318, true)];
bmp.updateCache();
stage.update();
});
由于高分辨率的 png,我必须缩小 canvas 的高度和宽度样式。如果我执行过滤器,只要位图位于 x = y = 0 位置,它就可以工作。但是,只要我移动位图,它就会在屏幕过滤后消失 (canvas)。你能指出我的错误吗?
本例中使用的图片可以在这里找到:
http://www.freepngimg.com/download/facebook/1-2-facebook-download-png.png
PS:如果我设置:
bmp.cache(0, 0, 10000, 7000);
它也可以,但速度非常慢。
我找到了解决方案:
缓存的输入参数x和y是基于bmp的,也就是本地的。因此将两者都设置为 0.