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
2
votes
1 answer

how to avoid rect width or height grow unexpectedly during snap in konva

I was trying to snap the rect to show up a perfect square upon transform. i.e when resizing if width and height becomes same I'll show lines indicating it's a square. but, while doing the height or width of the rect is growing unexpectedly as shown…
Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
2
votes
1 answer

Konva/react-konva - restore canvas elements from JSON

I am creating a React application that uses react-konva and Konva for a drawing board. Currently, when the user clicks on the Save button it takes a "screenshot" (using the toDataUrl) of the board. The problem with this is that I would like to…
Matteo Robert
  • 165
  • 6
2
votes
0 answers

Custom React Component

I'm writing a react js app project will include a component that should look like the following pictures: The requirements are: User should be able to move the circles within the grid with the mouse Grid snap - circles can only be positioned on…
Sebastian Meckovski
  • 167
  • 4
  • 15
2
votes
2 answers

Text truncation issue in a Konva.Text shape with low lineHeight?

I'm creating an app very similar to Canva, or the Polotno studio using Konva React. I'm facing a very annoying situation concerning Text shapes: When the lineHeight is inferior to 1.2, the height of the shape is computed at a lower value than the…
Bruno Jurado
  • 31
  • 1
  • 4
2
votes
0 answers

Diagram tree using reat- konva

Hi i am completely new to konva, I know how to create basic shapes using konva,I want a create a digram tree. I tried many ways but it's not working Can any one suggest and guide me to create digram tree with react konva connected with arrows.
Robin
  • 21
  • 1
2
votes
1 answer

Konva.js How to drag images and resize with Transformer?

I'm trying to drag and drop these images to the stage. but when I dropped images, I received this error. Konva.js Konva error: Can not cache the node. Width or height of the node equals 0. Caching is skipped. The process that I thought of was drop…
JiHyun Kim
  • 33
  • 3
2
votes
1 answer

Is it possible to draw a shape based on an onClick Event in React JS using react-konva?

I am looking for a way to draw a shape based on a mouse event in react-konva, but have only been able to find methods to draw shapes on the screen statically
Namya LG
  • 31
  • 5
2
votes
1 answer

Change the opacity outside of a cropping rectangle in konva

I'm trying to build a image cropping tool with React and konva. I'd like to change the opacity outside of the cropping rectangle to blur the rest of the image. I have so far tried to set different opacities to the rectangle and the image but failed.…
mplusr
  • 151
  • 15
2
votes
0 answers

Is it possible to simulate a erase action without having to create an extra shape in KonvaJS?

I am following this guide which contains a brush and eraser functionality. The guide's code sets the "globalCompositeOperation" to "destination-out" and basically ends up creating another line that will cover whatever you have drawn before with the…
elco45
  • 220
  • 1
  • 11
2
votes
1 answer

Is it safe to use useRef (React) to save state of a canvas (Konva) for REST API

I'm building a little React application with the purpose of Able to move shapes on a canvas Save the state of the canvas Use REST API to upload/load from state So far my application allows me to move shapes on the canvas and then save the state of…
callsuper
  • 89
  • 11
2
votes
1 answer

How to get rid of 'Text components are not supported for now in ReactKonva. You text is: "Loading..."' using react-konva and react-google-maps/api?

I want to render a Konva shape on top of a Google Maps layer. Since I'm using React, I use react-konva and react-google-maps/api libraries to work with. Everytime I run yarn start, I get this error: Text components are not supported for now in…
Gane D. Geoffrey
  • 165
  • 1
  • 4
  • 10
2
votes
1 answer

is it possible to use an Icon as a rotater in react-konva Transformer

I want to use a custom icon as rotater in react-konva transformer as shown below :
omar abdelkefi
  • 23
  • 5
2
votes
1 answer

which mobile app framework supports konva

I understand at the current moment, react-konva is not supported in React Native environment; however, wondering if vue-konva supports mobile app? Or if you can suggest me a way to migrate konva canvas content to an android app? Appreciate your…
Deepti Patro
  • 21
  • 1
2
votes
1 answer

Konva continue to track mouse outside stage

I am trying to implement a joystick that can be used to control something like a robot in React.JS using the React-Konva library. Thus far I have managed to get something that sort of works by drawing a smaller circle inside a larger one and letting…
Gerharddc
  • 3,921
  • 8
  • 45
  • 83
2
votes
2 answers

React-konva. Dynamic import SVG

I have a folder with SVG. I need to dynamically add those SVG on Konva's stage. I try to use this component. But it does not work. const URLImage = (name) => { const [image] = useImage(`../images/svg/${name}.svg`); return
Ruslan Neck
  • 59
  • 7
1
2
3
…
19 20