我正在使用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,但它没有帮助我,我的代码只是得到了错误。
有人能给予我一个解决方案吗?
1条答案
按热度按时间7d7tgy0s1#
它在最新的konva版本中通过
cornerRadius
属性得到支持:https://konvajs.org/api/Konva.Image.html#cornerRadius
字符串