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

你想在不改变形状描边大小的情况下改变形状大小吗？

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

有两种方法可以防止描边缩放：（1）重置形状的缩放；或（2）使用 shape.strokeScaleEnabled(false) 和 transformer.ignoreStroke(false) 的组合。

说明：有两个矩形需要调整大小。绿色的矩形将重置其缩放。红色的矩形将仅禁用描边缩放。

Konva ignore strokeview raw

<!DOCTYPE html>
<html>
  <head>
    <!-- USE DEVELOPMENT VERSION -->
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Resize Text Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      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);

      var rect1 = new Konva.Rect({
        x: 50,
        y: 60,
        width: 100,
        height: 100,
        draggable: true,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 5,
      });
      layer.add(rect1);

      var tr1 = new Konva.Transformer({
        nodes: [rect1],
        // ignore stroke in size calculations
        ignoreStroke: true,
        // manually adjust size of transformer
        padding: 5,
      });
      layer.add(tr1);

      // first way to skip stroke resize, is just by resetting scale
      // and setting width/height instead
      rect1.on('transform', () => {
        rect1.setAttrs({
          width: Math.max(rect1.width() * rect1.scaleX(), 5),
          height: Math.max(rect1.height() * rect1.scaleY(), 5),
          scaleX: 1,
          scaleY: 1,
        });
      });

      // another solution is to use combination of strokeScaleEnabled and ignoreStroke
      var rect2 = new Konva.Rect({
        x: 250,
        y: 60,
        width: 100,
        height: 100,
        draggable: true,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 5,
        // do not scale strokes
        strokeScaleEnabled: false,
      });
      layer.add(rect2);

      var tr2 = new Konva.Transformer({
        nodes: [rect2],
        // ignore stroke in size calculations
        ignoreStroke: true,
        // manually adjust size of transformer
        padding: 5,
      });
      layer.add(tr2);
    </script>
  </body>
</html>