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

Assigning ref in react-konva

How do we assign ref to the stage or layer object. I am using react-konva. When I do console.log(stageE1), it says undefined. useEffect(() => { var stage = new Konva.Stage({ container: 'stage', width: window.innerWidth, …
Sunil Shrestha
  • 63
  • 5
0
votes
1 answer

How to add controls to React Konva Video Stage

hey so I wanted to play a video as my konva stage. I used an example from sandbox but I cant figure out how to add the video player control to it.Can somebody help Thanks constructor(...args) { super(...args); const video =…
tanmya
  • 73
  • 7
0
votes
1 answer

react konva animation to follow a path

Hey I am new to react konva and wanted to create an animation in which a rectangle follows a user defined path of dots. First user defines the path by clicking on screen and initializing the destination dots and then the rectangle should follow the…
tanmya
  • 73
  • 7
0
votes
1 answer

How To create this custom shape in react konva

Hi I am new to react konva and trying to make a custom shape for my project I wanted to create the yellow element which is basically a trapezium with curved sides and should fit inside the red ring as shown in the image. Any help is much…
tanmya
  • 73
  • 7
0
votes
1 answer

How to Add styling to Image Component in React Konva

I am complete beginner in react konva. I am using Image component with the use-image hook to display a picture but I want the picture to be round. I tried different css approach but nothing seems to work. Any Help is much appreciated import picture…
tanmya
  • 73
  • 7
0
votes
1 answer

Applying RGBA Filter to SVG Image on Konva.js

I've just replaced the .png file with my .svg file on this demo: https://konvajs.org/docs/filters/RGBA.html But filtering doesn't work, it says: konva.min.js.download:12 Konva error: Unable to apply filter. Failed to execute 'getImageData' on…
Railson Sousa
  • 1
0
votes
1 answer

Delete function bug on a node using React-Konva

So I have updated my previous react-konva example code with my latest problem: https://codesandbox.io/s/react-konva-drag-and-drop-image-with-delete-button-on-tranform-6977j?file=/src/Draganddrop.js I am trying to add a delete button to every image…
Soultide
  • 15
  • 3
0
votes
1 answer

display shapes where user clicks in react konva

I am a complete beginner in react konva and trying to make a simple project. I just want to display a rectangle wherever user clicks so like if user clicked at 3 position he can see 3 rectangle on the canvas. How can I achieve this? I found this…
droid
  • 68
  • 5
0
votes
1 answer

How to redact/blur parts of an image using javascript (Konva)?

I'm trying to create an image editor that can mask personal identifiable information. We're using konva right now to add black Rect shapes over images, but we would love to use the blur or even pixelate feature. Im not sure I'm going about this…
Orry
  • 257
  • 1
  • 3
  • 10
0
votes
1 answer

Is it possible to set blur for a rect element in konva.js?

I want to use blur for rect elements (like filter: blur in css) in my React application. I tried to use it following konva tutorials but it doesn't work. It's possible? What am i doing wrong? This is my attempt at implementing this in my React…
Izzei -
  • 7
  • 2
0
votes
1 answer

error "e.GetBoundingClientRect() is not a function" in React while using React-konva

I am a newbie in Reactjs, I am trying to create a function where a circle is created at the position of a mouse click. The problem is that everytime i clicked, the error "e.getClickCoords is not a function" is shown. Also, there is an error "shapes…
BOB
  • 1
  • 3
0
votes
1 answer

Canvas and React Konva scalability for large datasets?

I'm working with a small group to build an interactive interface that will render a list of nodes and show how they are connected, almost like how some database modelers are. This is within a pre-existing application, and we will have up to a couple…
sjmunro
  • 91
  • 4
0
votes
1 answer

Resize Text within Group

I have a case where I would like to resize the Group using middle-right and middle-left anchors but the result is not what we are actually expecting. If the group is resized using middle-right and middle-left, it should adjust the text's width and…
Mr. Chinito
  • 1
0
votes
1 answer

image is not being added on the canvas through socket.io?

Hi im building a collaborative whiteboard app with Konva. I want to drag images on the canvas and also make it displayed to the other clients connected to the app. I've tried to do some things but its not really working.. Here is what im trying to…
dvid vid
  • 31
  • 10
0
votes
1 answer

Moving a Polygon with react-kova - update the position

I use Konva embedded in React. I try to move a polygon created using a finished Line. The corner points are draggable. The approach supposed to be simple. You use the points coordinates and add the relative position. My problem is that the corner…
KLE
  • 3
  • 1
1 2 3
…
19 20