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

Set Konva transform controls to the top of the canvas

I'm trying to transform an image that sits behind another layer holding a png ( the template ). I want to transform the image below this layer but keep it where it is so the above layer stays as the template. Is it possible to show the transform…
jhodgson4
  • 1,566
  • 3
  • 20
  • 35
1
vote
0 answers

Vertical scroll within group

I'm working on a canvas with draggable nodes. Some of the nodes contain a list of items which I display on the canvas. I'm currently rendering all the item under each other. The structure I'm currently rendering looks looks like the…
Bob van 't Padje
  • 685
  • 1
  • 6
  • 17
1
vote
1 answer

Konva Line Not Appearing

Hi while I was writing some code for a web application using the React I decided to use the library Konva to make shapes. class Prism extends Component{ render() { return(

Swinnerton Dyer
  • 17
  • 1
  • 4
1
vote
3 answers

Unable to load PDF images into HTML5 canvas as Image object using Konva

I am unable to load a Konva Image object in my canvas if the source is a PDF. No errors are thrown but the canvas is blank where the image should be. Are there any known workarounds for this? Any suggestions welcome.
Lorentz9
  • 131
  • 1
  • 1
  • 6
1
vote
0 answers

react-konva get attributes in sub component declaration

I used a react-konva Group with 3 Rect shapes inside it - they are all displayed at the same place and the only difference is their width so i can get some sort of a multi-color process bar. This is my current code: import React from 'react'; import…
Michael Berelejis
  • 76
  • 6
1
vote
1 answer

Animate a shape along a line or path in konva

Is it possible in Konva to animate a shape (marker, circle) along a lline/path. I tried to manually calculate positions over time but this is only feasible if the line is straight from A to B, but I'm interested in a bezier curve and multiple path…
florian norbert bepunkt
  • 2,099
  • 1
  • 21
  • 32
1
vote
1 answer

React Konva Blend Modes

I'm having trouble recreating a blendmode between two Rectangle nodes using react-konva. So far I've tried changing the order the nodes are rendered, adding extra groups and applying the composite operation to those and setting the composite…
jagomez8
  • 175
  • 1
  • 7
1
vote
1 answer

showing a react konva label if visited a konva element

I am using React Konva 1.1.6 and learning how to use it. In the following code, I am trying to show a label near the mouse pointer every time my mouse passes over the konva arrow. Yet, my label just disappears. Am I missing something in my code? I…
Jose Cabrera Zuniga
  • 2,348
  • 3
  • 31
  • 56
1
vote
1 answer

Konva - Unable to completely destroy stage in react when unmounting component

I am using the Konva API directly in my react componen, and it works perfectly. I only have one big problem. The problem is that when the component that contains the ref container is unmounted the react app crashes, saying that staging has no…
Ionathan Rus
  • 13
  • 4
1
vote
0 answers

react konva zoom in and zoom out on mouse scroll on pointer location not working properly

I'm trying to draw rectangle on an omage using react konva I want to draw a rectangle when the image is being zoomed in/Out w.r.t the mouse pointer position and mouse wheel event but the problem is the rectangle is drawn accornding to position of…
Akshay Kumar
  • 17
  • 8
1
vote
1 answer

Flip Image with react-konva

With https://github.com/lavrton/react-konva How can I flip an image (horizontally or vertically) I am using this function, but it is not working: flip = direction => { this.setState({ width: -this.state.width }) }
Alan
  • 9,167
  • 4
  • 52
  • 70
1
vote
0 answers

Guide to Crop uploaded images using React Konva

I am using React Konva to upload images (multiple) to the stage and I want to implement crop uploaded functionality. Can anyone give me a guide/ steps ?
Roshan Fernando
  • 87
  • 1
  • 10
1
vote
2 answers

react-konva warning 'Konva' is not defined

I'm trying to learn how to use the canvas in react via a package called react-konva. npm installation was simple enough, and I added some demo code that works... // in MainComponent.js import {Stage, Layer, Rect} from 'react-konva'; // in…
user1272965
  • 2,814
  • 8
  • 29
  • 49
0
votes
0 answers

Konva and perspectivets integration

I have a React project involving image perspective management using perspective.ts in a custom polygon I draw using Konva. I would like to be able to drag the shape and move individual dots to change the shape and update the new image accordingly. A…
Hadrien Grenacs
  • 11
  • 2
0
votes
0 answers

KonvaJS drag drop and resize along with Html of react-konva-util

In our application we need to add annotations to pdf, those annotations have actions like delete and close which we have attached at bottom of react using react-konva-utils. Now every time we drag drop the annotations we need to update state. But…
Richa Joshi
  • 1
1 2 3
…
19 20