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

Adding drag and drop connectors in react-konva

I'm using react-konva and I'm trying to add connector lines between circles by dragging from one circle and then dropping it on the other circle to be connected. So far I have tried it by clicking the circles to create a line between them and made…
mplusr
  • 151
  • 15
0
votes
1 answer

Is there any limit for Stage width and height in React Konva?

I was working with React Konva. Using it's stage element width to be 90,000 and height to be 60,000. it gives blank page with a sad smile. Can anyone tell me what's the limit for stage width and height?
Nidhi Dadiya
  • 798
  • 12
  • 31
0
votes
2 answers

React Konva - undo free draw lines

I was following this tutorial on how to build a whiteboard with react and konva and it provides an undo function for shapes but does not work for lines because lines are not added to the layer in the same way. How can I implement undo for free draw…
cbutler
  • 833
  • 13
  • 36
0
votes
1 answer

ReactJS and Konva free drawing with pencil, brush and eraser

I want to create a simple app where I can choose between pencil, brush and eraser. I have Home.js and addLine.js. But there is a bug which I cant fix. When I change from brush back to pencil I'am drawing with the pencil but there is something like a…
retro
  • 51
  • 8
0
votes
1 answer

Selection of shapes using mouse drag and drop not working - React Konva

I am trying to create a multiple shape selection using Transformer of React konva. It is working well with the mouse click on one shape and then to other shape, creates a whole selection of both shapes. i want this to be achieved by mouse drag and…
Nidhi Dadiya
  • 798
  • 12
  • 31
0
votes
1 answer

multiple depth exceeded in react hooks

I am trying to create multiple selection of shapes using transformer of react konva. I want to pass multiple nodes to Transformer. while doing this, i am getting multiple depth exceedederror. i am using a shape ref from the child component and…
Nidhi Dadiya
  • 798
  • 12
  • 31
0
votes
1 answer

Apply Caman JS preset filters to Konva React

By creating a ref for the layer component I am able to access the canvas element which I could then pass to the caman function to apply a preset filter to the image in the canvas. This works as expected however, when saving the stage as an image the…
Kevin Mangal
  • 230
  • 1
  • 3
  • 14
0
votes
1 answer

ToDataURL output Webp image

We currently tried out putting type as "image/webp" in konva toDataURL function.But we still get a png image.Is there a way to get webp image as output. downloadURI( inputRefs[0].getStage().toDataURL({ pixelRatio: 1,type:"image/webp" }),…
Athul R Nath
  • 73
  • 4
0
votes
1 answer

react-konva - running sprite animation and filter at the same time

To summarize, I can't animate Konva sprites and apply Konva filters at the same time. I'm drawing a complex stage using react-konva, and parts of it contains animated images using Sprite component animations. In order to start the animations, I am…
gunshinx
  • 3
  • 2
0
votes
1 answer

React Konva - Performance of large number of nodes

I am trying to draw large number of nodes in React Konva based on this performance demo. My code: const ZoomTest = (props) => { let width = window.innerWidth; let height = window.innerHeight; const [rects, setRects] = useState([]) const…
droidbee
  • 134
  • 2
  • 16
0
votes
1 answer

How to save stage of canvas in JSON format?

In my current project I want to build something like Image Editor with react and react-konva. First of all, I render a konva stage with some props and default draggable stars. In the next step we can set background image for our stage using Image…
Elli Zorro
  • 463
  • 3
  • 19
0
votes
1 answer

Importing IReact type definition

I have a variable that holds a Group Reference and when I call getClientRect() it returns the "IReact" type. Since IReact is not in the default types index should I import the type from the internal types file or is there a better…
Gustavo Morais
  • 548
  • 6
  • 17
0
votes
1 answer

React-Konva Free Drawing with hooks

I found a good example using React-Konva and Free Drawing, but i could pu working with React-Hooks. That example is very nice and simple. It could be found here: React-Konva Example import React, { Component } from "react"; import Konva from…
Rogerio Azevedo
  • 786
  • 2
  • 13
  • 32
0
votes
0 answers

React-Konva get node absolute x and y

I am trying to get the absolute position of a drawn node. The Konva docs show that it's possible to find a node with: // select node with id foo var node = stage.find('#foo'); And though it might help, but I couldn't find a way to access…
DSCH
  • 2,146
  • 1
  • 18
  • 29
0
votes
1 answer

Download not working in react konva JS video

class MyVideo extends React.Component { constructor(...args) { super(...args); const video = document.createElement('video'); video.src = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'; this.state = { video: video }; …
RajKumar Jain
  • 11
  • 5
1 2 3
…
19 20