如何在不改变描边大小的情况下调整画布上形状的大小？

请记住，Konva.Transformer 会改变节点的 scaleX 和 scaleY 属性。 默认情况下，如果你正在变换一个形状，它的描边也会被缩放。在某些情况下，这不是理想的行为。

有两种方法可以防止描边缩放：

1. 重置形状的缩放比例
2. 使用 shape.strokeScaleEnabled(false) 和 transformer.ignoreStroke(false) 的组合

说明：有两个矩形可供调整大小。绿色矩形会重置它的缩放比例，红色矩形则只是禁止描边缩放。

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 rect1 = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: '#00ff00',
  stroke: 'black',
  strokeWidth: 5,
  draggable: true,
});
layer.add(rect1);

const tr1 = new Konva.Transformer({
  nodes: [rect1],
});
layer.add(tr1);

rect1.on('transformend', () => {
  // 变换结束后，需要重置缩放比例
  rect1.scaleX(1);
  rect1.scaleY(1);
  // 并手动增加宽度和高度
  rect1.width(rect1.width() * rect1.scaleX());
  rect1.height(rect1.height() * rect1.scaleY());
});

// 第二种方法 - 禁用描边缩放
const rect2 = new Konva.Rect({
  x: 200,
  y: 50,
  width: 100,
  height: 100,
  fill: '#ff0000',
  stroke: 'black',
  strokeWidth: 5,
  draggable: true,
  strokeScaleEnabled: false,
});
layer.add(rect2);

const tr2 = new Konva.Transformer({
  nodes: [rect2],
  ignoreStroke: true,
});
layer.add(tr2);

Open Sandbox

React

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

const App = () => {
  const [rect1Size, setRect1Size] = useState({
    width: 100,
    height: 100,
  });

  const rect1Ref = useRef();
  const rect2Ref = useRef();
  const tr1Ref = useRef();
  const tr2Ref = useRef();

  useEffect(() => {
    tr1Ref.current.nodes([rect1Ref.current]);
    tr2Ref.current.nodes([rect2Ref.current]);
  }, []);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect
          x={50}
          y={50}
          width={rect1Size.width}
          height={rect1Size.height}
          fill="#00ff00"
          stroke="black"
          strokeWidth={5}
          draggable
          ref={rect1Ref}
          onTransformEnd={(e) => {
            const node = rect1Ref.current;
            setRect1Size({
              width: node.width() * node.scaleX(),
              height: node.height() * node.scaleY(),
            });
            node.scaleX(1);
            node.scaleY(1);
          }}
        />
        <Transformer ref={tr1Ref} />

        <Rect
          x={200}
          y={50}
          width={100}
          height={100}
          fill="#ff0000"
          stroke="black"
          strokeWidth={5}
          draggable
          strokeScaleEnabled={false}
          ref={rect2Ref}
        />
        <Transformer ref={tr2Ref} ignoreStroke={true} />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-rect
        :config="rect1Config"
        @transformend="handleTransformEnd"
        ref="rect1Ref"
      />
      <v-transformer
        :config="tr1Config"
        ref="tr1Ref"
      />
      
      <v-rect
        :config="rect2Config"
        ref="rect2Ref"
      />
      <v-transformer
        :config="tr2Config"
        ref="tr2Ref"
      />
    </v-layer>
  </v-stage>
</template>

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

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

const rect1Size = ref({
  width: 100,
  height: 100
});

const rect1Config = {
  x: 50,
  y: 50,
  width: rect1Size.value.width,
  height: rect1Size.value.height,
  fill: '#00ff00',
  stroke: 'black',
  strokeWidth: 5,
  draggable: true
};

const rect2Config = {
  x: 200,
  y: 50,
  width: 100,
  height: 100,
  fill: '#ff0000',
  stroke: 'black',
  strokeWidth: 5,
  draggable: true,
  strokeScaleEnabled: false
};

const tr1Config = {};
const tr2Config = {
  ignoreStroke: true
};

const rect1Ref = ref(null);
const rect2Ref = ref(null);
const tr1Ref = ref(null);
const tr2Ref = ref(null);

const handleTransformEnd = () => {
  const node = rect1Ref.value.getNode();
  rect1Size.value = {
    width: node.width() * node.scaleX(),
    height: node.height() * node.scaleY()
  };
  node.scaleX(1);
  node.scaleY(1);
};

onMounted(() => {
  tr1Ref.value.getNode().nodes([rect1Ref.value.getNode()]);
  tr2Ref.value.getNode().nodes([rect2Ref.value.getNode()]);
});
</script>

Open Sandbox