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
8
votes
3 answers

Change cursor on Hover in react-konva

I'm using react-konva to create a UI for an application. I want it so that the cursor changes to a pointer when hovering over a Rect. There is documentation for how to do it with konva but not for react-konva. Can anyone help?
SSPdude
  • 959
  • 1
  • 7
  • 11
6
votes
1 answer

Snapping Issue For Regular Polygons in React Konva

Here the bounding box of the triangle is not getting attached correctly to the ends of the triangle ,same is the case for all regular polygons.So when we are trying to snap shapes ,shapes are not getting snapped to the ends of regular polygons…
Athul R Nath
  • 73
  • 4
5
votes
2 answers

Jest encountered an unexpected token with react + konva and/or react-konva

With Konva and react-konva installed and imported, my jest@enzyme tests failed to run with this error: ● Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse,…
Peter Vida HU
  • 51
  • 3
4
votes
2 answers

How to implement an intelligent drag drop (like this) in react? Canvas or non-canvas based approach?

What approach to do intelligent drag drop like this in react? (canvas or non-canvas based approach?). That is to use React (with a library such as React DND) without using cavas, OR move to rendering/drawing this within React using HTML 5 "canvas"…
Greg
  • 34,042
  • 79
  • 253
  • 454
4
votes
0 answers

How can I get the intersection of three shapes colliding and delete the parts that are not colliding in KonvaJs?

If I am given 3 circles and they are positioned as the primary colors circles (3 circles intersecting each other), is there a function that might help me to delete the parts that are not colliding with anything and just keep the intersecting…
Promo Otter
  • 83
  • 4
3
votes
1 answer

how to detect onClick event using konva shape

I made custom shapes to be added on the click position with react-konva. Now I want to detect onClick event when added custom shapes are clicked, but I think there is a problem because onClick events for Stage and Shape are overlapped. (…
sieun
  • 39
  • 3
3
votes
1 answer

Uncaught Error: its-fine: useFiber must be called within a

I'm trying to use konva js in my react app and here is the version details package.json "react": "^16.8.6", "react-dom": "^16.8.6", "konva": "^8.4.2", "react-konva": "^18.2.3", min code to recreate error import { Stage } from…
Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
3
votes
1 answer

How to set a custom Size to exporting image in react-konva?

I have created a responsive stage using react-konva, but I cannot find a way to set a custom size to export the image. usually, right-click and saving the image is working as the size in the window at that time has. I wanted to add a button to…
Mayura Abesingha
  • 33
  • 4
3
votes
1 answer

ESM packages (konva) need to be imported. Use 'import' to reference the package instead

I get the following error when importing Html from react-konva-utils. I have tried importing this using a dynamic import and just by standard import. For instance: export const Html = dynamic( () => import("react-konva-utils").then((mod) =>…
jmecs
  • 143
  • 2
  • 13
3
votes
1 answer

Resizing canvas to fit within container

Having some trouble trying to get my Canvas/Stage to resize and fit correctly within the parent container. I've found other similar posts and while the answers did help me with obtaining the new screen size it still doesn't want to fit within the…
Jastreb
  • 37
  • 4
3
votes
1 answer

Calculate degrees of Linear Gradient in Canvas using Konva with React?

I want to calculate the degree used in a Linear Gradient → linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248)) into x & y co-ordinates to use it in Konva, which is basically a wrapper around Canvas. I have found quite similar…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
3
votes
2 answers

Export Canvas from React Konva to SVG & PDF?

Currently, I can only use jpeg & png exports like: stageRef.current?.getStage().toDataURL({ mimeType: 'image/jpeg', quality: 1 }) stageRef.current?.getStage().toDataURL({ mimeType: 'image/png', quality: 1 }) I want to export Canvas to svg as well…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
3
votes
1 answer

Snap grid, drag and drop with react-konva

I'm creating a RPG table game, using React-Konva. I did a infinite grid and some images tokens with drag and drop. So, its working fine. But, looking for another feature I found this using Canvas, its almost same I did, but with spap, the shapes…
Rogerio Azevedo
  • 786
  • 2
  • 13
  • 32
3
votes
1 answer

How to change the position of transformer rotation icon

I've started react-konva. And I am trying to use Transfomer. For now rotate handler is top-center and I want to place it to bottom-center, left or other side. How can I do that? https://konvajs.org/docs/select_and_transform/Transformer_Styling.html
Programmer
  • 65
  • 7
3
votes
1 answer

Unable to render content with React-Konva

I've recently been getting the following error when trying to render a Stage with React-Konva: Cannot read property 'getPooled' of null at Object.componentDidMount. As of now, I've been unable to render anything at all using Konva. I'm using…
perennial_
  • 1,798
  • 2
  • 26
  • 41
1
2 3
…
19 20