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

Konva zoom fill to content on the stage

Hi I'm very lost on how to accomplish this. I'm basically trying to zoom into some content when it is added to the stage. I have one stage and one layer. Some shapes are added to the layer, let's say some Lines are added with some predefined points…
Pablo Corso
  • 119
  • 2
  • 6
0
votes
1 answer

Fit image completely inside Konva Stage - Layer - Rect

Trying to put a background image into a using a Rect inside a Layer and fillPaternImage property of Rect. The background image does take the entire space of the stage but it gets cropped. How do you fit/cover the entire space of the stage…
Abhishek Chhabra
  • 25
  • 5
0
votes
1 answer

Konvajs (react-konva) dom portal position relative to parent group

I have a Konva Group which contains a portal so that I can render HTML Dom elements like this: https://konvajs.org/docs/react/DOM_Portal.html Inside my portal I have a Wavesufer.js waveform. Is there any way to make the dom elements in the portal…
Jellohouse
  • 165
  • 3
  • 12
0
votes
1 answer

How can i do shape.preventDefault(true); in react-konva

Related Github issue https://github.com/konvajs/react-konva/issues/555 There you can see, shape.preventDefault(true);, but I didn't found any way to call this method using React. The components I am using …
Rahul
  • 1,858
  • 1
  • 12
  • 33
0
votes
1 answer

Clip an Image in Konva that uses Canvas path?

I saw a similar question here but I have an array of radius instead of a number so it couldn't use + operator. The radius has 4 values: [top, right, bottom, left]
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
0
votes
1 answer

React-konva mobile zoom and draggable image

I am using Konva.js to build a canvas app. This app allows user to drag an image and zoom at any point. This works perfectly on Desktop. However, I like this app to be responsive for mobile devices. The problem here is canvas zoom and image drag…
hcacode
  • 75
  • 1
  • 9
0
votes
1 answer

React Konva center text in square

I am trying to create a button with some text centred using a Rect and a Text component. Here is a piece of code:
Andrea Barnabò
  • 534
  • 6
  • 19
0
votes
1 answer

Adding Padding with React Konva

I want to create the equivalent of this (sudo code):

My Text

With React Konva elements. I know how to start, using Group, Rect, and Text, but I can't figure out how to do the padding. Hope someone can help!…
user12989805
0
votes
1 answer

Make a responsive rectangle in Konva (React Konva) that maintains aspect ratio

In CSS, I can do it like:
body { max-width: 1366px; margin: 0 auto; padding: 20px; } .aspect-ratio-box { height: 0; padding-top: 56.25%; background: red; } Here's the CodePen. Try resizing the…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
0
votes
1 answer

Konva onDragMove and onDragEnd not updating position?

I'm trying to onDragMove to manually update an elements position. The shape itself is dragging around, and the is updating the objects, but it is not being rendered? Same with onDragEnd. Both are updating the array of shapes correctly, but it is not…
codebytesfl
  • 198
  • 1
  • 8
0
votes
1 answer

When loop completes using freehand drawing using konvajs event?

I have made canvas on car image and implemented free hand drawing using KonvaJs . what I want is -: when free hand completes a closed loop (any shape) fill color within closed shape. can anyone tell me is there any event when closed loop is…
shubham soni
  • 41
  • 4
0
votes
1 answer

How to add an audio file to React konva?

I am trying to make a site like office 365 PowerPoint. I started using React konva. I got stucked on adding audio file to konva stage with new layer. I searched alot butcan't found solution. I should be able to add an audio file and adjust its…
Nabin Shrestha
  • 11
  • 1
0
votes
1 answer

TypeError: fiber is undefined (React-Konva + RollupJS)

I am trying to use rollup to build a mini react component library of sorts, as soon as I add a react-konva component the errors appears, when I add the konva to the example I using to test the library it works fine leading me to assume its something…
KieranLewin
  • 1,780
  • 2
  • 7
  • 13
0
votes
1 answer

Generate thumbnail from stage for react-konva

I have created a react app Which is very similar to office whiteboard. I would like to generate a thumbnail or card preview of each whiteboard and wondering how to go about it. My initial thought was to just create a card component and render the…
cbutler
  • 833
  • 13
  • 36
1 2 3
…
19 20