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

How to draw canvas back onto itself with React Konva Image?

I'm trying to implement this Stack Overflow questions' top answer in react-konva, but stuck on this line of code: ctx.drawImage(canvas, blurredRect.x, blurredRect.y, blurredRect.width, blurredRect.height, blurredRect.x, blurredRect.y,…
zenoh
  • 2,071
  • 1
  • 22
  • 38
0
votes
1 answer

Issue when adding multiple layers to react-konva container

I had a problem using react-konva due to Dom element. When I tried to add a function to resize the screen of konva according to the size of the dom. I got this error thrown after adding layers. const checkSize = contentRect => { const { width,…
taghrid mahdy
  • 1
  • 1
0
votes
1 answer

Is it possible to use Sepia values with KonvaJS filters?

I would like to use Sepia filter of KonvaJS with given percentage. Like 20% Sepia on https://www.cssfilters.co/ Is it possible to set values of Sepia on KonvaJS like that?
she hates me
  • 1,212
  • 5
  • 25
  • 44
0
votes
1 answer

Animating Line position in Konva

I have a network that I want to draw with Konva (and the react-konva bindings). When positions update I want to animate the nodes in the network to their new positions while also animating the start and end position of the link that connects them. I…
Tom
  • 2,734
  • 2
  • 22
  • 39
0
votes
1 answer

Removing applied filter with KonvaJS

I'm applying filters to Konva.Image but couldn't find any way to remove those filters and return to original image. How can I do that?
she hates me
  • 1,212
  • 5
  • 25
  • 44
0
votes
1 answer

React+Konva: How to fillPatternImage with uploaded image?

Following code (from images on imgur) in fillPatternImage works: var url = "http://www.imgur....." var newImage = new window.Image(); newImage.src = url; then I find ref to the shape I want to change and I use setAttr("fillPatternImage", image)…
Acy
  • 589
  • 2
  • 9
  • 25
0
votes
0 answers

To use concentric circles on human body canvas

I am working on an application which takes input from the patient on parameters such as Headache, Cold cough etc. For doctors dashboard need to highlight body part with animation (concentric circle) whose radius changes according to input by user.…
SM1105922
  • 127
  • 10
0
votes
3 answers

Is it possible to implement a Paint Bucket using Konva.js?

I’ve managed to implement, using konva, multiple tools that allow users to draw different shapes and patterns like: rectangle, circle, arrows, free draw, eraser, et. c. I’m trying to achieve something like: using a paint bucket, users should be able…
Lucaci Sergiu
  • 564
  • 5
  • 17
0
votes
0 answers

How to display dynamically rotated angle correctly?

Thank you in advance for paying attention to my problem. I am using a library called react-konva for working with canvas. My task was to build the angle between two lines and display it. Now it works, not perfectly, but still... But I can't resolve…
Praud
  • 297
  • 3
  • 13
0
votes
1 answer

How to add corner radius on konva group using clip function?

I'm struggling to apply corner radius (on all sides) in a group shape using a custom clip function. Here's my codesandbox: https://codesandbox.io/s/w28nrrj885
Ygor Fonseca
  • 15
  • 3
0
votes
1 answer

Rectangle does not re-render properly after transformation in react-konva

I have been using this (https://github.com/oasis10702/konva-simple-example) code in a project of mine and everything works fine. However, updating react and react-konva to the latest version causes some to me unintended behavior. When resizing a…
Anab
  • 99
  • 2
  • 8
0
votes
1 answer

How to differentiate react konva elements in the same layer via event.target?

Good Day, I'm trying to control a mouseleave event. The goal is to continue the stroke of the element when it hits a
NoobNewb
  • 583
  • 2
  • 10
  • 21
0
votes
1 answer

Add an independent resizeable container around Text in KonvaJs

I have gone through how Konva Labels work. But resizing a tag in this example resizes the text as well. I want the text to wrap or stay the same size on decreasing and increasing the container width respectively. Is this achievable?
Hassan-Zahid
  • 417
  • 1
  • 7
  • 21
0
votes
1 answer

Uncaught TypeError: Cannot read property 'getAbsoluteScale' of undefined

I am trying to transform circle but it throws error. I don't understand what is the problem i have already worked with transformations on Konva.Rect and there's no such error. Attaching transformer to Konva.Circle works properly, but when mouse is…
Maksym Tutskyi
  • 1
  • 2
0
votes
1 answer

How can I get image properties like scaleX in react-kova?

Like the example shown for shape, this has x,y,rotation etc. https://konvajs.github.io/docs/select_and_transform/Transform_Events.html Image in react-konva also extends shape. How can I get these values for image(with transformer) in react-konva.
Samdeesh
  • 905
  • 11
  • 23
1 2 3
…
19
20