javascript - 删除 Fabricjs 中的所有零不透明度元素

Question

我正在使用 fabricjs animate函数更改 Canvas 上文本元素的不透明度。对于每一帧，我需要检查不透明度为 0% 的元素并使用 canvas.remove 删除它们.

目前，我已经想出了这段代码，我正在为 requestAnimationFrame 的每一次火灾运行。 :

canvas.getObjects().filter((obj) => obj.get("opacity") === 0).forEach(canvas.remove)

但是，在迭代时，过滤项目并运行 canvas.remove , 我得到 Uncaught TypeError: Cannot read property 'indexOf' of undefined .

下面是这个问题的简单实现(不是实际代码):

const canvas = new fabric.StaticCanvas(document.querySelector("canvas"), { backgroundColor: "black" })

// CODE HERE:
function removalLogic() {
  canvas.getObjects().filter((obj) => obj.get("opacity") === 0).forEach(canvas.remove)
}

const rect = new fabric.Rect({
  width: 100, height: 100,
  left: 10, top: 20,
  fill: "grey",
})

canvas.add(rect)

rect.animate("opacity", "0", {
    duration: 2500,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: removalLogic,
})

<canvas height="512" width="512"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>

Answer 1

1. 使用.map() 遍历canvas 的所有对象。
2. 使用 canvas.remove(obj) 删除对象。
3. 你的这个陈述是不正确的 obj.get("opacity") === 0).forEach

const canvas = new fabric.StaticCanvas(document.querySelector("canvas"), { backgroundColor: "black" })

// CODE HERE:
function removalLogic() {
  console.log(canvas.getObjects().length);
  canvas.getObjects().map((obj) => ((obj.get("opacity") == 0)? canvas.remove(obj) :''))
  console.log(canvas.getObjects().length);
  
}

const rect = new fabric.Rect({
  width: 100, height: 100,
  left: 10, top: 20,
  fill: "grey",
})

canvas.add(rect)

rect.animate("opacity", "0", {
    duration: 2500,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: removalLogic,
})

<canvas height="512" width="512"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>