HTML5 Canvas 强制更新教程

Konva.Transformer 会自动追踪附加节点的属性变化，因此它会自动调整自身的属性。

但在某些情况下，Konva.Transformer 无法做到这一点。目前 Konva.Transformer 无法追踪 Konva.Group 节点内部的深层变化。在这种情况下，您需要使用 forceUpdate 方法来重置变换工具。

操作说明：点击按钮，观察变换器如何变化。

Vanilla

import Konva from 'konva';

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

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

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

const group = new Konva.Group({
x: 50,
y: 50,
draggable: true,
});
layer.add(group);

const text = new Konva.Text({
text: 'Some text here',
fontSize: 24,
});
group.add(text);

const rect = new Konva.Rect({
width: text.width(),
height: text.height(),
fill: 'yellow',
});
group.add(rect);

// add the shape to the layer
rect.moveToBottom();

const tr = new Konva.Transformer({
nodes: [group],
padding: 5,
// enable only one anchor
enabledAnchors: ['middle-left', 'middle-right'],
});
layer.add(tr);

const button = document.createElement('button');
button.innerHTML = 'Change text';
document.body.appendChild(button);
button.addEventListener('click', () => {
text.text('Something else is here');
rect.width(text.width());
// we need to update transformer manually
tr.forceUpdate();
});

Open Sandbox

React

import { Stage, Layer, Text, Rect, Group, Transformer } from 'react-konva';
import { useState, useRef, useEffect } from 'react';

const App = () => {
  const [text, setText] = useState('Some text here');
  const groupRef = useRef();
  const trRef = useRef();

  const handleClick = () => {
    setText('Something else is here');
  };

  useEffect(() => {
    if (trRef.current) {
      trRef.current.nodes([groupRef.current]);
    }
  }, []);

  return (
    <>
      <button onClick={handleClick}>Change text</button>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Group
            x={50}
            y={50}
            draggable
            ref={groupRef}
          >
            <Rect
              width={text.length * 10}
              height={30}
              fill="yellow"
            />
            <Text
              text={text}
              fontSize={24}
            />
          </Group>
          <Transformer
            ref={trRef}
            padding={5}
            enabledAnchors={['middle-left', 'middle-right']}
          />
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <button @click="changeText">Change text</button>
    <v-stage :config="stageSize">
      <v-layer>
        <v-group :config="groupConfig" ref="groupRef">
          <v-rect :config="rectConfig" />
          <v-text :config="textConfig" />
        </v-group>
        <v-transformer :config="transformerConfig" ref="transformerRef" />
      </v-layer>
    </v-stage>
  </div>
</template>

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

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

const text = ref('Some text here');
const groupRef = ref(null);
const transformerRef = ref(null);

const groupConfig = {
  x: 50,
  y: 50,
  draggable: true
};

const textConfig = computed(() => ({
  text: text.value,
  fontSize: 24
}));

const rectConfig = computed(() => ({
  width: text.value.length * 10,
  height: 30,
  fill: 'yellow'
}));

const transformerConfig = {
  padding: 5,
  enabledAnchors: ['middle-left', 'middle-right']
};

const changeText = () => {
  text.value = 'Something else is here';
};

onMounted(() => {
  if (transformerRef.value && groupRef.value) {
    transformerRef.value.getNode().nodes([groupRef.value.getNode()]);
  }
});
</script>

Open Sandbox