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

Question

我试图用Konva.js在每250ms的时间循环中绘制多个矩形，但画布只在循环完成后更新。我做错了什么?

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);
} 

Answer 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、输出