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

Question

我正在使用fabricjsanimate函数来更改画布上文本元素的不透明度。 对于每一帧，我需要检查不透明度为 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>