Konva.js - 在时间间隔循环中绘制舞台答案

【问题标题】：Konva.js - draw on stage in time interval loopKonva.js - 在时间间隔循环中绘制舞台
【发布时间】：2021-10-05 07:56:32
【问题描述】：

我尝试使用 Konva.js 每 250 毫秒在时间循环中绘制多个矩形，但画布仅在循环完成后更新。我做错了什么？

function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
        currentDate = Date.now();
    } while (currentDate - date < milliseconds);
}


var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
});

var layer = new Konva.Layer();
stage.add(layer);

for (let i=0; i < 10; i++){
    var rect1 = new Konva.Rect({
        x: i*25,
        y: 20,
        width: 20,
        height: 20,
        fill: 'red'
    });
    layer.add(rect1);
    layer.draw();
    sleep(250);
}

【问题讨论】：

这不是处理动画延迟的最佳方式。您应该考虑使用提供计数器和时间差异的 Konva.Animation，可以在没有这种笨重的延迟机制的情况下使用。动画帧处理所有时间，并为您提供编写逼真运动的最佳机会。示例stackoverflow.com/questions/53277899/…

标签： konvajs

【解决方案1】：

您的 sleep 方法阻塞了主 JS 线程。您需要使用异步方法等待。有很多方法可以做到这一点。使用现代 js，您可以这样做：

// noprotect
const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);


const delay = (time) => new Promise(resolve => setTimeout(resolve, time));

async function startAddingShapes() {
  for (let i=0; i < 10; i++){
    const rect = new Konva.Rect({
      x: i*25,
      y: 20,
      width: 20,
      height: 20,
      fill: 'red'
    });
    layer.add(rect);
    await delay(250);
 } 
}


startAddingShapes();

演示：https://jsbin.com/sahamulako/1/edit?html,js,output

【讨论】：

有效。谢谢！