Canvas - ThresholdFilter 后元素消失答案

【问题标题】：Canvas - Element disappears after ThresholdFilterCanvas - ThresholdFilter 后元素消失
【发布时间】：2023-03-19 12:40:02
【问题描述】：

我的阈值过滤器有问题。到目前为止我的代码：

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，我必须缩小画布的高度和宽度样式。如果我执行过滤器，只要位图位于 x = y = 0 位置，它就可以工作。但是，一旦我移动位图，它就会在从屏幕（画布）过滤后消失。你能指出我的错误吗？

此示例中使用的图片可以在这里找到：

http://www.freepngimg.com/download/facebook/1-2-facebook-download-png.png

PS：如果我设置：

bmp.cache(0, 0, 10000, 7000);

它也可以，但速度非常慢。

【问题讨论】：

标签： javascript canvas createjs easeljs threshold

【解决方案1】：

我找到了解决办法：

cache 的输入参数 x 和 y 是基于 bmp 的，这意味着本地。因此将两者都设置为 0。

【讨论】：