如何为Konva元素的变换锚点设置样式？（基于konva-react）

示例1：修改锚点颜色、透明度与大小 #

Konva 的 Transformer 组件提供了一系列属性直接控制锚点样式，可按需设置：

• anchorFill：锚点填充色
• anchorOpacity：锚点透明度
• anchorSize：锚点尺寸
• anchorStroke：锚点边框颜色

代码示例 #

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

export default function CustomAnchorStyle() {
  const [rectRef, setRectRef] = useState(null);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect
          ref={setRectRef}
          x={50}
          y={50}
          width={200}
          height={150}
          fill="lightblue"
          draggable
        />
        {rectRef && (
          <Transformer
            node={rectRef}
            anchorFill="#888"       // 灰色填充
            anchorOpacity={0.5}     // 半透明
            anchorSize={12}         // 调整锚点大小
            anchorStroke="#ffffff"  // 白色边框
          />
        )}
      </Layer>
    </Stage>
  );
}

示例2：隐藏锚点，让元素边缘全域可拖拽调整 #

提供两种实现方式，可根据场景选择：

方式1：扩大透明边框实现 #

隐藏默认锚点，同时扩大边框可点击区域并设置为透明，用户看不到边框但能拖拽边缘调整大小：

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

export default function FullEdgeResize() {
  const [rectRef, setRectRef] = useState(null);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect
          ref={setRectRef}
          x={50}
          y={50}
          width={200}
          height={150}
          fill="lightblue"
          draggable
        />
        {rectRef && (
          <Transformer
            node={rectRef}
            anchorVisible={false}  // 隐藏默认锚点
            borderWidth={10}       // 扩大边框点击范围
            borderOpacity={0}      // 边框透明不可见
            borderEnabled          // 启用边框交互
          />
        )}
      </Layer>
    </Stage>
  );
}

方式2：自定义锚点覆盖元素边缘 #

通过 onAnchorCreate 事件修改每个锚点的尺寸，让锚点覆盖对应边缘区域并设置为透明：

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

export default function CustomAnchorArea() {
  const [rectRef, setRectRef] = useState(null);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect
          ref={setRectRef}
          x={50}
          y={50}
          width={200}
          height={150}
          fill="lightblue"
          draggable
        />
        {rectRef && (
          <Transformer
            node={rectRef}
            onAnchorCreate={(anchor) => {
              const rect = rectRef.getClientRect();
              // 根据锚点位置设置尺寸，覆盖对应边缘
              if (anchor.name().includes('top') || anchor.name().includes('bottom')) {
                anchor.width(rect.width);
                anchor.height(20); // 垂直方向点击高度
              } else {
                anchor.height(rect.height);
                anchor.width(20); // 水平方向点击宽度
              }
              anchor.fill('transparent'); // 锚点透明
            }}
          />
        )}
      </Layer>
    </Stage>
  );
}

内容的提问来源于stack exchange，提问作者Chris Miller