reactjs 如何为react-konva Image元素添加边框半径

1u4esq0p  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(92)

我正在使用React-konva来制作一些可拖动的组件。下面是我的代码:

const URLImage = ({ image, isSelected, onSelect, onTransform }) => {
  const imageRef = useRef();
  const trRef = useRef();
  const [img] = useImage(image.src);

  useEffect(() => {
    if (isSelected) {
      // we need to attach transformer manually
      trRef.current.nodes([imageRef.current]);
      trRef.current.getLayer().batchDraw();
    }
  }, [isSelected]);

  return (
    <>
    <Group>
      <KonvaImage
        ref={imageRef}
        image={img}
        x={image.middle ? image.x - image.width / (2 / image.scaleX) : image.x}
        y={image.middle ? image.y - image.height / (2 / image.scaleY) : image.y}
        width={image.width}
        stroke="rgba(255, 255, 255, 0.1)" // Add a transparent outline
        strokeWidth={1} // Adjust the thickness of the outline
        height={image.height}
        scaleX={image.scaleX}
        scaleY={image.scaleY}
        draggable={image.draggable} // Make image with id 1 unmovable
        onClick={onSelect} // Handle mouse events
        onTap={onSelect} // Handle touch events
        onDragEnd={(e) => {
          image.middle = false;
          image.x = e.target.x();
          image.y = e.target.y();
        }}
        onTransformEnd={(e) => {
          image.middle = false;
          image.x = e.target.x();
          image.y = e.target.y();

          // Update the scale
          image.scaleX = e.target.scaleX();
          image.scaleY = e.target.scaleY();

          onTransform();
        }}
      />
      {isSelected && <Transformer ref={trRef} />}
      </Group>
    </>
  );
};

字符串
我想给它加一个边界半径。
我也看到了this question,但它没有帮助我,我的代码只是得到了错误。
有人能给予我一个解决方案吗?

7d7tgy0s

7d7tgy0s1#

它在最新的konva版本中通过cornerRadius属性得到支持:
https://konvajs.org/api/Konva.Image.html#cornerRadius

<KonvaImage
  cornerRadius={10}
  {...otherProperties}
/>

字符串

相关问题