Удаление всех элементов с нулевой непрозрачностью в Fabricjs - PullRequest
Новая
       67

Удаление всех элементов с нулевой непрозрачностью в Fabricjs

3 голосов
/ 23 декабря 2019

Я использую функцию fabricjs animate для изменения непрозрачности текстовых элементов на холсте. Для каждого кадра мне нужно проверить элементы с непрозрачностью 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>
...