Stack Overflow
Stack Overflow

Questions tagged [konvajs-reactjs]

React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework.

Konvajs-Reactjs 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 konvajs-reactjs.

118 questions
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

KonvaJS, Possible to have a draggable group of images?

I'm using react-konva and I need to be able to drag multiple images at once (not using mutliselect). It appears that Konva handles this by using Groups or Containers. I looked at the TypeScript files and: export declare class Group extends…
Dor-Ron
  • 1,787
  • 3
  • 15
  • 27
0
votes
0 answers

Adding drag and drop connectors in react-konva

I'm using react-konva and I'm trying to add connector lines between circles by dragging from one circle and then dropping it on the other circle to be connected. So far I have tried it by clicking the circles to create a line between them and made…
mplusr
  • 151
  • 15
0
votes
2 answers

React Konva - undo free draw lines

I was following this tutorial on how to build a whiteboard with react and konva and it provides an undo function for shapes but does not work for lines because lines are not added to the layer in the same way. How can I implement undo for free draw…
cbutler
  • 833
  • 13
  • 36
0
votes
1 answer

ReactJS and Konva free drawing with pencil, brush and eraser

I want to create a simple app where I can choose between pencil, brush and eraser. I have Home.js and addLine.js. But there is a bug which I cant fix. When I change from brush back to pencil I'am drawing with the pencil but there is something like a…
retro
  • 51
  • 8
0
votes
1 answer

Importing IReact type definition

I have a variable that holds a Group Reference and when I call getClientRect() it returns the "IReact" type. Since IReact is not in the default types index should I import the type from the internal types file or is there a better…
Gustavo Morais
  • 548
  • 6
  • 17
0
votes
0 answers

Capture or Export konvajs stage with the layer position

I have 2 layers on my KonvaJs Stage. The layer on front or the topmost contains shape (ie. circle or rect). The layer on the back is an image with 3200x3200 dimension (This will act as the background image). My stage is only 1024x1024. Now I had my…
mr.b
  • 2,708
  • 8
  • 39
  • 64
0
votes
2 answers

ReactJS sending ref to global useContext state (Konva)

I am using useContext as a global state solution. I have a Store.jsx which contains my state, and a reducer.jsx which reduces. I am using Konva to create some shapes on an HTML5 Canvas. My goal is when I click on a shape I want to update my global…
davidgotmilk
  • 33
  • 3
0
votes
2 answers

How to get ending position of line in React-Konva

Sorry, I'm new to coding and am struggling on something I believe is quite basic. I want to draw a shape via multiple konva line objects. Once I've created a line, instead of manually calculating where the next line should begin, I'm thinking there…
Steven Michael
  • 31
  • 3
0
votes
1 answer

Konvajs: How to change position of group of texts

I'm using Konvajs, I have group of texts, and I want don't allow drag group outside of the canvas, I'm tried solved that using dragBoundFunc, but that don't help me, now I just try change group position during dragmove, but setPosition,…
Programmer
  • 65
  • 7
0
votes
1 answer

How can I disable shadowOffset scaling in KonvaJS?

I am using strokeScaleEnabled=false to disable stroke width scaling. However shadow offset is still scaling when I scale stage. I see no "shadowOffsetScaleEnabled" property to disable shadow offset scaling. Is there any other API or I must…
EGL 2-101
  • 1,203
  • 8
  • 17
0
votes
1 answer

How to avoid shapes from changing size and position when deleting previous shape component with same component name? Konva

I have been having this issue using react-konva were when I remove a shape within the array all shapes move to initial position and if the shape is placed in one position above the deleted one and has the same component name for e.g: deleted ===…
Camille Basbous
  • 299
  • 5
  • 11
  • 34
0
votes
1 answer

React-konva - Conneting Circle with a Line using mouse click

I am using react-konva and I have two Circle component that I would like to connect with a Line. I have accomplished that by hardcoding but I want to make it interactive. My goal: when I click a Circle component it would create a Line component.…
dracoboros
  • 55
  • 2
  • 7
0
votes
1 answer

How can I simulate CSS like Object-Fit Cover in Konvajs React?

This is really easy in DOM because I can just do object-fit: cover in css and the image would crop and fill in the width and height. But in Konvajs the default seems to be to fill it. Here is what I've tried: const [image] =…
Lester Dela Cruz
  • 61
  • 1
  • 6
1 2 3 4 5 6
7
8