时间戳

首页 > 解决方案 > Konva.js - 在时间间隔循环中绘制舞台

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

问题描述

我正在尝试使用 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);
}

标签： konvajs

解决方案

您的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

推荐阅读