konvajs - 使用 Konva React 插入链接

Question

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

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

像这样的东西。^

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

Answer 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}
        >

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