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
2
votes
1 answer

Turn off Konvajs warnings

When having more than five layers, Konva outputs a warning to the console along the lines of: "The stage has n layers. Recommended maximin number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree…
some one
  • 77
  • 5
2
votes
1 answer

react-konva: disable canvas element devicePixelRatio scale

I'm using react-konva when I render a with width:750, it will render a element with width 750 * devicePixelRatio will render (in iPhone 7) How do I disable this behavior ?
Littlee
  • 3,791
  • 6
  • 29
  • 61
2
votes
2 answers

React Konva change zIndex on drag

Hey so I have little drag and drop game written in React konva. My draggable piece looks like this (simplified for convenience return this.props.areas.map((area) =>
Robert Lemiesz
  • 1,026
  • 2
  • 17
  • 29
1
vote
0 answers

Create frames and get coordinates of drawing in Konva React JS

I have the following code file App.js, using this code I am able to draw square/rectangle shape using mouse events. see working here : https://www.awesomescreenshot.com/video/18588785?key=8a5877587128b9d65b77999becd3f2e3 App.js File code: import…
Deep Kakkar
  • 5,831
  • 4
  • 39
  • 75
1
vote
0 answers

How can I recalculate the coord of point after (rotate, translate and scale)

There are two stages. Both include hall image. Hall image size is static but two stages dimension is dynamic. The image which is located in the middle of the stages and there are thousands of polygons on image. I draw several polygons on the first…
Akbar Bobomurodov
  • 11
  • 2
1
vote
0 answers

Getting react__WEBPACK_IMPORTED_MODULE_0__.useId in react when creating polygon bounding annotation

I am getting TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useId in my react app. I am using konva and react-konvathat lets a user to draw a polygon bounding annotation following this blog…
realtouseef
  • 11
  • 4
1
vote
1 answer

Limited workspace in React-Konva

I work with React-Konva and am trying to make a limited size workspace (like in photoshop) with scalability. So that when you scale the workspace window starts to take up more and more space on the screen. But after writing the function, the…
Shell
  • 13
  • 4
1
vote
1 answer

Blur the outer part of the konna-react element when out of the container's range

I use the react-konva library to manipulate the elements of the canvas and I am trying to make the outside of an element blur when it comes out of the container (the inside part of element is not changed). Similar to drag elements in polotno:…
thitbachi
  • 96
  • 1
  • 8
1
vote
1 answer

React-konva render dynamic Text inside Shape

I am Rendering shape name at bottom center of shape something like this. (Shape name is dynamic) First approach---> I tried to render Shape name inside of Group of Shape but the problem i am facing when text name length increase it start affecting…
Muhammad Sami
  • 520
  • 2
  • 8
  • 21
1
vote
1 answer

How do I Create a Vertical Arrow with Text Annotation with Dynamic Text Positioning in Konva?

I'm trying to draw some geometric shapes in the user interface via Konva and react-konva. One basic element is a vertical arrow with annotated text to show the dimension of a shape, as shown below: It's created by the following code snippet, which…
比尔盖子
  • 2,693
  • 5
  • 37
  • 53
1
vote
1 answer

Small extra movement after dragging the Rect node. Is this a bug?

I'm trying to implement stepped positioning on canvas elements in KonvaJS. Here is the minimal, reproducible example I've created to see the problem better: https://codesandbox.io/s/autumn-wave-wkz4ut?file=/src/App.tsx Everything is fine if the…
Devwulf
  • 370
  • 4
  • 11
1
vote
0 answers

How can I add image and Animation on React Konva, to work Simultaneously?

The first image of contains a lion and an animated gif of yoda When I drag animated Yoda on canvas it turns into image, How can I make both animations and images work on Canvas. I tried merging Animation code and image code, but didn't work.
Sham Mallik
  • 11
  • 1
1
vote
1 answer

Prevent shape rotation by dragging in Konva

I'm using react-konva (Konva) and I need to prevent rotating the shape(rectangle) by clicking on corner point and dragging it over diagonal corner point. That will rotate the rectangle by 180 or -180 deg. Setting rotation=0 works only if you do…
Vejsil Hrustić
  • 179
  • 1
  • 7
1
vote
1 answer

Responsive position of a draggable element in React-Konva

I am using react-konva to try and make a tool where users can visualize and plan their frame wall. The user can choose a background, then chooses a frame size and different posters. It kind of looks like this: So far I have made a background image…
William S
  • 39
  • 6
1
vote
1 answer

Problems when applying react-konva rotation

I want to move the shape and change the direction using the arrow key. Moving was successful. But When 'rotation' is applied, the 'text' position changes. How do I keep the text position and only change the orientation of the…
zhdwl
  • 13
  • 3
1 2 3
…
19 20