HTML5 Canvas 批量绘制技巧

更新：此演示与新版本的 konva@8 无关。在新版本中，Konva 会自动处理所有的批量绘制，无论何时在画布上发生更改。

如果您使用 Konva.autoDrawEnabled = false，则此演示可能仍然相关。

在某些情况下，我们可能希望尽快更新一个 Konva 图形，但又不想导致过多的重绘。例如，如果我们希望通过鼠标移动更新舞台上的一个元素，我们不希望使用 draw() 方法重绘图层，因为鼠标移动事件每秒可能触发数百次，这将导致每秒超过一百帧的强制帧率。通常情况下，这会导致动画不连贯，因为浏览器根本无法处理过多的重绘。

对于这种情况，使用 batchDraw() 方法要好得多，该方法会自动将重绘与 Konva 动画引擎连接起来。不管你调用多少次 batchDraw()，Konva 都会自动根据浏览器在任何给定时刻能够处理的最大帧数来限制每秒的重绘次数。

说明: 将鼠标移动到舞台上以旋转矩形

Vanilla

import Konva from 'konva';

// 为演示目的，禁用自动绘制
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', () => {
  // 在鼠标移动时旋转矩形
  rect.rotate(5);
  // 使用 batchDraw 代替 draw 提高性能
  layer.batchDraw();
});

Open Sandbox

React

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

// 为演示目的，禁用自动绘制
Konva.autoDrawEnabled = false;

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

  useEffect(() => {
    const stage = rectRef.current.getStage();
    
    stage.on('mousemove', () => {
      // 在鼠标移动时旋转矩形
      rectRef.current.rotate(5);
      // 使用 batchDraw 代替 draw 提高性能
      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';

// 为演示目的，禁用自动绘制
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 = () => {
  // 在鼠标移动时旋转矩形
  rectRef.value.getNode().rotate(5);
  // 使用 batchDraw 代替 draw 提高性能
  layerRef.value.getNode().batchDraw();
};
</script>

Open Sandbox