HTML5 Canvas 批量绘制技巧

更新：此示例不适用于新版 konva@8。在新版本中，Canvas 发生任何更改时，Konva 都会自动执行所有批量绘制。

如果使用 Konva.autoDrawEnabled = false，此示例仍可能适用。

在某些情况下，我们可能要尽快更新 Konva 图形， 但不希望产生过多重绘。例如，如果要通过 mousemove 更新舞台上的 元素，就不应使用 draw() 方法重绘图层。因为 mousemove 事件每秒可能触发 数百次，从而强制每秒渲染一百多帧。 浏览器通常无法处理过多重绘，因此动画可能出现卡顿。

对于这种情况，最好使用 batchDraw() 方法。 该方法会自动将重绘接入 Konva 动画引擎。 无论调用 batchDraw() 多少次，Konva 都会根据浏览器当前可以处理的最高帧率， 自动限制每秒重绘次数。

**操作说明：**在舞台上移动鼠标以旋转矩形。

Vanilla

import Konva from 'konva';

// For demo purposes, disable auto draw
Konva.autoDrawEnabled = false;

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

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

const rect = new Konva.Rect({
  x: stage.width() / 2 - 50,
  y: stage.height() / 2 - 25,
  width: 100,
  height: 50,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 4,
});

layer.add(rect);

stage.on('mousemove', () => {
  // rotate rectangle on mouse move
  rect.rotate(5);
  // use batchDraw instead of draw for better performance
  layer.batchDraw();
});

Open Sandbox

React

import { Stage, Layer, Rect } from 'react-konva';
import { useRef, useEffect } from 'react';

// For demo purposes, disable auto draw
Konva.autoDrawEnabled = false;

const App = () => {
  const rectRef = useRef(null);
  const layerRef = useRef(null);

  useEffect(() => {
    const stage = rectRef.current.getStage();
    
    stage.on('mousemove', () => {
      // rotate rectangle on mouse move
      rectRef.current.rotate(5);
      // use batchDraw instead of draw for better performance
      layerRef.current.getLayer().batchDraw();
    });
  }, []);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer ref={layerRef}>
        <Rect
          ref={rectRef}
          x={window.innerWidth / 2 - 50}
          y={window.innerHeight / 2 - 25}
          width={100}
          height={50}
          fill="green"
          stroke="black"
          strokeWidth={4}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize" @mousemove="handleMouseMove">
    <v-layer ref="layerRef">
      <v-rect :config="rectConfig" ref="rectRef" />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Konva from 'konva';

// For demo purposes, disable auto draw
Konva.autoDrawEnabled = false;

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const rectConfig = ref({
  x: window.innerWidth / 2 - 50,
  y: window.innerHeight / 2 - 25,
  width: 100,
  height: 50,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 4
});

const layerRef = ref(null);
const rectRef = ref(null);

const handleMouseMove = () => {
  // rotate rectangle on mouse move
  rectRef.value.getNode().rotate(5);
  // use batchDraw instead of draw for better performance
  layerRef.value.getNode().batchDraw();
};
</script>

Open Sandbox