CODEWITHSUNDEEP
konvajsreact-konvakonvakonvajs-reactjs
Liki
Liki

Reputation: 148

Insert link with Konva React

I want to to make linkable shapes / images on the canvas.

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

Something like this. ^

I didn't find anything in the docs, so maybe some of you found a way around and accomplish this?

Upvotes: 0

Views: 529

Answers (1)

Liki
Liki

Reputation: 148

I found a solution.

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

                >

The label tag supports mouse Enter/Leave/Click events, and I used handlers for those.

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

After handling your events, you might have noticed I used this.stageRef.draw(); to rerender the changes on the canvas. stageRef is a reference of the stage (obviously), and you can get one like this

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

You can make the label more interactive by adding dynamically increasing font size on hover, changing font color, changing cursor etc..

Upvotes: 2

Related Questions