在 Konva 中将变压器应用于具有剪辑属性的组时，如何设置变压器的初始尺寸？

问题描述

我有一个带有几个节点的 Konva.Group，我设置了剪辑属性来限制看到的内容。我将 Konva.Transformer 应用于组，我面临的问题是 Transformer 包围了整个组，甚至是未剪裁的部分。即使它功能齐全并且可以完成工作，这看起来也不太好。有没有什么办法可以设置transformer的初始宽度和高度，让它只包围被裁剪的部分？

这是应用剪辑和变换之前的组

这是应用剪辑和变换后的样子

import React,{useRef,useEffect} from 'react';
import { render } from 'react-dom';
import { Stage,Layer,Rect,Circle,Line,Group,Transformer } from 'react-konva';

const App = () => {
  const trRef = useRef(null)
  const grpRef = useRef(null)


  useEffect(()=>{
    const transformNode = trRef.current;
    transformNode.enabledAnchors(["top-left","top-right","bottom-left","bottom-right"])
    transformNode.nodes([grpRef.current])
  },[trRef])

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group ref={grpRef} clipX={0} clipY={0} clipwidth={200} clipHeight={200}>
        <Rect
          x={20}
          y={50}
          width={100}
          height={100}
          fill="red"
          shadowBlur={10}
        />
        <Circle x={200} y={100} radius={50} fill="green" />
        <Line
          x={20}
          y={200}
          points={[0,100,100]}
          tension={0.5}
          closed
          stroke="black"
          fillLinearGradientStartPoint={{ x: -50,y: -50 }}
          fillLinearGradientEndPoint={{ x: 50,y: 50 }}
          fillLinearGradientColorStops={[0,'red',1,'yellow']}
        />
        </Group>
        <Transformer rotateEnabled={false} ref={trRef} />
      </Layer>
    </Stage>
  );
};

render(<App />,document.getElementById('root'));

解决方法

这是 Konva.Transform 的默认行为，无法更改。一种解决方法是在剪切部分周围创建一个透明矩形，对其应用变换，然后将更改复制到组中。

import React,{useRef,useEffect} from 'react';
import { render } from 'react-dom';
import { Stage,Layer,Rect,Circle,Line,Group,Transformer } from 'react-konva';

const App = () => {
  const trRef = useRef(null)
  const grpRef = useRef(null)
  const rectRef = useRef(null)

  // To copy the transform matrix from the rectangle to the group
  function handleTransform(e){
    const shape1 = e.target;
    const transform = shape1.getTransform().copy();
    const attrs = transform.decompose();
    grpRef.current.setAttrs(attrs);
  }

  useEffect(()=>{
    const transformNode = trRef.current;
    transformNode.enabledAnchors(["top-left","top-right","bottom-left","bottom-right"])
    transformNode.nodes([rectRef.current])
  },[trRef])

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group draggable>
          {/* Transparent rectangle to which the transform is now applied to */}
          <Rect
            ref={rectRef}
            x={0}
            y={0}
            width={200}
            height={200}
            id="invisible-rect"
          />
        <Group ref={grpRef} clipX={0} clipY={0} clipWidth={200} clipHeight={200}>
        <Rect
          x={20}
          y={50}
          width={100}
          height={100}
          fill="red"
          shadowBlur={10}
        />
        <Circle x={200} y={100} radius={50} fill="green" />
        <Line
          x={20}
          y={200}
          points={[0,100,100]}
          tension={0.5}
          closed
          stroke="black"
          fillLinearGradientStartPoint={{ x: -50,y: -50 }}
          fillLinearGradientEndPoint={{ x: 50,y: 50 }}
          fillLinearGradientColorStops={[0,'red',1,'yellow']}
        />
        </Group>
        </Group>
        <Transformer onTransform={handleTransform} rotateEnabled={false} ref={trRef} />
      </Layer>
    </Stage>
  );
};

render(<App />,document.getElementById('root'));

这是上述代码的 demo。感谢 Anton，这个很棒的库的创建者提出了这个解决方案。

Reference - Konva 形状变换共享很简单