Stack Overflow
Stack Overflow

Questions tagged [react-konva]

react-konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework.

react-konva is, judging by the volume of questions arising on SO, an increasingly popular combo for development of HTML5 canvas solutions within Reactjs. The Git page is at https://github.com/konvajs/react-konva

As a subject, it is sufficiently different from the plain JS Konvajs library that folks will benefit from tagging it with a specific tag. This will assist others searching for solutions that are specifically Konvajs-Reactjs, but they should also consider broadening their searches to plain konvajs as there is a wider body of question material for this and although it is plain-JS, the concepts are generally taken into react-konva.

292 questions
1
vote
1 answer

React Konva: onMouseOver doesn't trigger when a shape above it is removed?

I have a project with two on top of each other. The at the bottom changes its color when the cursor is hovering over it. export const BottomSquare = () => { const [color, setColor] = useState("green"); return (
Riexn
  • 113
  • 2
  • 11
1
vote
1 answer

How can I render circles around rectangle in Konva js?

I need to render table and chairs like in this picture: I dont know how to calculate position of circles around rect. I tried some code, but its not working...Anybody knows how to solve it? Check my code: let smallCircleRadius = 20 let tableSize =…
Louis Hudson
  • 25
  • 1
  • 4
1
vote
1 answer

Shapes not rendering within Stage in react-konva

I have a few lines of code to create a Rectangle or any other shapes I have tried are not rendering within the Stage. I have tried adding html elements, however they do render within the Stage. Is this caused due to the use of refs? There are no…
Aaeron
  • 23
  • 4
1
vote
0 answers

How to stack rotations with different offsets? Is there a way to "freeze" transformations (rotation and offset) before applying new values?

I'd like to change rotation and offset of a shape multiple times. I need to "freeze" transformations before applying new rotation and offset, so that when I change offsetX, the shape will move horizontally, not along the X axis of a shape at an…
ellis
  • 181
  • 10
1
vote
0 answers

getting react-konva context in a parent handler - is there a better way than my code below?

Is there a better way, that is: (a) having to pass the child event back to the parent to be able to extract the stage/layer to then be able to do a konva node "find", and (b) having to "find" nodes using this approach (as using Konva-React JSX I…
Greg
  • 34,042
  • 79
  • 253
  • 454
1
vote
0 answers

konva react sdk, fade out all drawn line

I have a requirement to fade out all lines drawn after a fixed delay. I followed the simple drawing example. The code sandbox is available in the following url. https://konvajs.org/docs/react/Free_Drawing.html Please advise.
dpatra
  • 52
  • 8
1
vote
1 answer

Konva (react) - Group draggable and child drggable

I want to have a group which is draggable. Inside the group I have a child which is also draggable. Currently dragging the group works properly. But sometimes the child is not selected properly when I start drag. And when it does start dragging, it…
Jellohouse
  • 165
  • 3
  • 12
1
vote
1 answer

JSX element type (anything from react-konva) does not have any construct or call signatures

I'm using React with TypeScript and konva. After updating "@types/react" from "^17.0.39" to "^18.0.1" appears this error on every konva component.
Andrey
  • 11
  • 3
1
vote
1 answer

Is there a way to scale the text fontsize using react konva on transform end

I have the following code below where once the text has been transformed on the screen the font size has gotten bigger but when i log fontsize it is the exact same as before.Is there anyway to get the updated fontsize as when I reload the page after…
coder5666666666
  • 37
  • 5
1
vote
0 answers

Konva.js How can I resize the image with fixed position?

I'm trying to resize image with Transformer. The problem lies that when the image is resized, the image is not fixed and moves as much as it is reduced in that direction. For these reasons, I removed offset offsetX={image ? image.width / 2 : 0}…
JiHyun Kim
  • 33
  • 3
1
vote
2 answers

React Konva move screen with two fingers on touchpad

I'm looking for the correct event to navigate on the canvas with two fingers on touch pad. I'm using React Konva.js and I found a good example on the site https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html The problem that I don't…
user1791139
  • 606
  • 1
  • 11
  • 27
1
vote
2 answers

React Konva Rotation/Revolution Animation

Hey I am new to react konva. I am creating a project in which i want a rectangle to revolves around an object. Can anybody advise me on how to achieve this. Any help is much appreciated
…
tanmya
  • 73
  • 7
1
vote
1 answer

Konva line polygon within another line polygon detection

I use React Konva and want to know if a Konva line polygon is completely within another line polygon, what is the best way to do it?
user1791139
  • 606
  • 1
  • 11
  • 27
1
vote
1 answer

Konva-React Rotation Displaying

is there a simple method to get Konva arrow object's rotation attribute after I draw an arrow with coordinates of points? I could get with trigonometry but I wonder is there a custom way in Konva to get rotation info?
abdullah yıldız
  • 168
  • 1
  • 4
1
vote
1 answer

react-konva drag and drop image with draggable stage and scroll zoom - how to change drop location to match zoom/current position

So I am trying to build an app where users have a library of images available to them and they can drag and drop them onto a stage to create a kind of image diagram. so for this I wanted to give them the ability to zoom in and out of the stage as…
Soultide
  • 15
  • 3
1 2 3
…
19 20