用Konva React插入链接

问题描述

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

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

类似这样的事情。 ^

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

解决方法

我找到了解决方法。

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

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