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
1
vote
1 answer

React-konva slow drag performance with large number of lines rendered

I have problem with dragging functionality while having large number of rendered lines in React-konva. Currently I am mapping over Array.apply(null, Array(10000)) to render lines horizontally. However, it is very laggy comparing to dragging over an…
Rvfvl
  • 349
  • 4
  • 18
1
vote
1 answer

How to capture the first frame of a video in react-konva

I made a simple video player using react-konva and I want to display the first frame as a thumbnail before the video is played. Here's my approach: I'm using Konva.Image to display the video and Konva.Animation to update the image. import Konva…
mplusr
  • 151
  • 15
1
vote
2 answers

Is there any way to export as a SVG on Konva

In my project I am using konvajs. Is there any way to export as a SVG image ?
mkaya387
  • 368
  • 2
  • 10
1
vote
1 answer

How can I fill a konva rect with fillPatternImage in React or create an infinite grid with the same svg image in React

I've already created the masonry grid with konva and React here is the example of how far I have come: https://codesandbox.io/s/masonry-grid-image-konva-react-cp73d Docs about Konva Image in React https://konvajs.org/docs/react/Images.html I need to…
Vrokn
  • 13
  • 1
  • 3
1
vote
2 answers

Select + hold and drag a shape should scroll horizontally or vertically

I want a shape i.e. Rect select using the mouse (left hold and drag) should scroll it horizontally if goes to right side and if goes to bottom should scroll vertically in React Konva. If anyone has used trello, i'm trying to emulate the ability to…
Nidhi Dadiya
  • 798
  • 12
  • 31
1
vote
1 answer

react-konva set a shape at the center of stage

I am using react-konva for drawing shapes on a stage and to edit them I select that shape and the shape has be set to focus on stage(i.e come to the center of the stage). On the click of a button I am updating the X,Y and scale of the stage but I am…
Nadeem Haider
  • 160
  • 1
  • 12
1
vote
1 answer

Show loading indication when drawing large canvas

I'm rendering a canvas with a lot of elements. Because the high amount of elements and the complex shapes of the elements the elements are not displayed instantly, but are displayed with a delay (sometimes more than 10 seconds). During this time the…
Bob van 't Padje
  • 685
  • 1
  • 6
  • 17
1
vote
1 answer

How can I switch the y-axis in the Konva.js stage to start from bottom to top instead of top to bottom?

I would like to plot data from a Cartesian coordinate system. With the origin (0/0) starting on the bottom left. Within HTML-canvas the origin is in the top-left. How do I switch the y-axis (in react-konva or konva)? function App() { const points…
Stefan Crummenerl
  • 35
  • 1
  • 6
1
vote
1 answer

How to reset position of a dragged canvas on react-konva?

I have a react konva project where you can load an image into a canvas and then move around dragging the canvas. If you load a different image, then it appears on the position where the previous image was dragged to. I am guessing if there is any…
Danielo515
  • 5,996
  • 4
  • 32
  • 66
1
vote
1 answer

ReactJS KonvasJS How to create 2 layers that cannot overlaps

i'm trying to create 2 layers (Images) that cannot overlap, So they can still dragged freely, but won't showed over each other. I've tried using zIndex or a blank Rect, but can't figure out how to make 2 draggable layers that can't overlap (Very…
Itay Elkouby
  • 344
  • 1
  • 15
1
vote
1 answer

Encountered: Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons

I was creating a project with React and Konva.js but faced the error of "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching…
user13647380
  • 83
  • 8
1
vote
1 answer

Mouse enter and mouse leave event listeners for stage component in react-konva does not work

Is there mouse enter and mouse leave event listeners for stage component in react-konva? I need to implement collaboration pointer similar like Figma when the users mouse enter, move, and leave the canvas. Tried to use onMouseEnter and onMouseLeave…
Inovramadani
  • 1,955
  • 3
  • 14
  • 34
1
vote
0 answers

How to implement Eraser tool in Konva js without using destination-out and drawing with white color we need like object erasing?

enter code hereCan we implement Object Erasing in konva js for eraser tool. Actually i need to erase free drawing line if we erase with destination-out im facing issues while moving or dragging lines from one place to another. To overcome this issue…
Rajashekhar Reddy
  • 126
  • 3
  • 11
1
vote
1 answer

Cannot get image to load into Konva-React, Getting TypeError: react-konva webpack ...Image is not a constructor

I am trying to use Konva-React to set image within shape objects using fillpatternImage. I've tried a few different ways but apparently I need to use an Image object, not a Konva Image for fillPatternImage. Why I cannot use Konva.Image() in…
Edward Han
  • 13
  • 1
  • 3
1
vote
2 answers

Hovering over icons on top of an element with onMouseOver in react-konva

I have a element containing a rectangle and a set of icons on top of the group that should only be visible if the user moves the cursor within the boundaries of that 's contents. Wether the icons are being shown or not is triggered…
genox
  • 23
  • 6
1 2 3
…
19 20