Stack Overflow
Stack Overflow

Questions tagged [konvajs-reactjs]

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

Konvajs-Reactjs 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 konvajs-reactjs.

118 questions
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
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
0 answers

Avoiding anti-aliasing with round painting in react-konva

I am trying to create a app with Konva and react-konva where the user can freely draw anything he wants on the stage, but mainly to use the mouse as a pen or a erasor. The user can only use two colors: red and green. Although, the user have to see…
Carlos Daniel Gomes
  • 41
  • 3
1
vote
0 answers

Image canvas toDataURL function is not wokring on ios

I have a drawImage function in my application which loads the image from a blob and then from that image object calls the toDataURL function for the canvas to draw image. The problem is that this code works on android and browser but not working on…
Ridham Sharma
  • 11
  • 3
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
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
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-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
vote
1 answer

Konvajs - overlay with transparency over existing video or embed video inside Konvajs canvas?

I am trying to do a drawing over a paused video. For this I want to use Konvajs. I guess I could try to embed the video inside Konvajs as a layer, but I could also just overlay the Konvajs element on top of the video and add transparency to it. The…
Compressed san
  • 45
  • 1
  • 4
1
vote
1 answer

react konva keep one layer fixed while zoom on stage

I'm developing a map (green rectangle ) and a path drawn over it ( black lines ) in Konva: The map has a fixed dimensions while the path is get from an API call. I want to be able to zoom the map either with the mousescroll or by clicking the…
Andrea Barnabò
  • 534
  • 6
  • 19
1
vote
1 answer

How to set the initial dimensions of a transformer when applying it on a group having clip properties in Konva?

I have a Konva.Group with a few nodes to which I have set clip properties to limit what is seen. I'm applying Konva.Transformer to the group and the problem I'm facing is that the Transformer encloses the entire group, even the unclipped portion.…
mplusr
  • 151
  • 15
1
2
3 4 5 6 7 8