使用 Konva React 插入链接答案

【问题标题】：Insert link with Konva React使用 Konva React 插入链接
【发布时间】：2021-02-12 11:42:00
【问题描述】：

我想在画布上制作可链接的形状/图像。

<Stage>
  <Layer>
    <a href="somewhere">
      <Circle/>

类似的东西。 ^

我在文档中没有找到任何内容，所以也许你们中的一些人找到了解决方法并完成了这个？

【问题讨论】：

标签： konvajs react-konva konva konvajs-reactjs

【解决方案1】：

我找到了解决办法。

<Label x={350} y={350}
                       onMouseEnter={this.onMouseEnterHandler}
                       onMouseLeave={this.onMouseLeaveHandler}
                       onClick={(e)=>window.location="https://www.google.com"}
                       className={this.state.zoom ? 'zoom' : ''}

                >

label 标签支持鼠标 Enter/Leave/Click 事件，我使用了这些事件的处理程序。

onMouseEnterHandler=(e)=>{
    console.log(e)
    e.target.fill('blue');
    this.stageRef.draw();
    this.setState({
        hovered:true,
        zoom:true
    })
}
onMouseLeaveHandler=(e)=>{
    e.target.fill('white');
    this.stageRef.draw();
    this.setState({
        hovered:false,
        zoom:false
    })
};

处理完您的事件后，您可能已经注意到我使用this.stageRef.draw(); 重新渲染画布上的更改。 stageRef 是舞台的参考（显然），你可以像这样得到一个

        <Stage
            className={this.state.hovered ? 'special' : ''}
            ref={node=>this.stageRef = node}
        >

您可以通过在悬停时动态增加字体大小、更改字体颜色、更改光标等来使标签更具交互性。

【讨论】：