删除 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

使用.map()遍历canvas的所有对象。
使用canvas.remove(obj)删除对象。
你的这个说法是不正确的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>

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

Deleting all zero-opacity elements in Fabricjs

javascript

fabricjs