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
4
votes
0 answers

How can I get the intersection of three shapes colliding and delete the parts that are not colliding in KonvaJs?

If I am given 3 circles and they are positioned as the primary colors circles (3 circles intersecting each other), is there a function that might help me to delete the parts that are not colliding with anything and just keep the intersecting…
Promo Otter
  • 83
  • 4
3
votes
1 answer

Uncaught Error: its-fine: useFiber must be called within a

I'm trying to use konva js in my react app and here is the version details package.json "react": "^16.8.6", "react-dom": "^16.8.6", "konva": "^8.4.2", "react-konva": "^18.2.3", min code to recreate error import { Stage } from…
Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
3
votes
1 answer

ESM packages (konva) need to be imported. Use 'import' to reference the package instead

I get the following error when importing Html from react-konva-utils. I have tried importing this using a dynamic import and just by standard import. For instance: export const Html = dynamic( () => import("react-konva-utils").then((mod) =>…
jmecs
  • 143
  • 2
  • 13
3
votes
1 answer

What is the best way to drag a transformer by dragging from empty areas in Konvajs?

I'm currently following this guide to select shapes in the stage and put them inside a Transformer. If possible, I'd like to drag an entire Transformer with all of its content without touching any of the shapes inside. For example, I have two lines…
elco45
  • 220
  • 1
  • 11
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
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
0 answers

React-konva : 'Stage' is not exported by node_modules/react-konva/lib/ReactKonva.j

My aim was to introduce the following code into my existing react web application below. https://codesandbox.io/s/oxwx9q9ko6?file=/src/index.js:0-3896 I first stated off by just creating a simple-react app which included the code below and it worked…
Raza
  • 21
  • 2
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
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
2
votes
1 answer

Selecting multiple objects using the hitbox when drawing a box in konvajs

I'm currently trying to select multiple objects (specifically lines) and adding them to a Group/Transformer by drawing a box. To do this, I followed this very helpful stackoverflow question. After implementing it, I wasn't really happy with the…
elco45
  • 220
  • 1
  • 11
2
votes
1 answer

The issue with drawing straight line and rectangle in Konvajs React

I wanted to create drawing app in React and to achieve that I came across something called Konvajs. Then, I started and somehow achieved that I can draw non-straight lines like this But what I wanted to draw is straight lines like this and…
user13647380
  • 83
  • 8
2
votes
1 answer

React-konva double connected objects with arrow

I'm trying to expand the Connected Objects demo by allowing two nodes (shapes of Circle class) to be double referenced (A connects to B with Arrow1 and B connects to A with Arrow2). I work with react-konva package. I have implemented a demo on Code…
Charles Nikolopoulos
  • 35
  • 4
2
votes
1 answer

React-Konva Custom Shape using arcTo renders incorrectly

I am using Konva with Konva-React to draw a simple custom shape consisting of two perpendicular lines joined by an arc. The API documentation for custom shape states that we can use the renderer to access the HTML5 Canvas context. As such I have…
Jeff Pirie
  • 71
  • 6
2
votes
2 answers

React Konva change zIndex on drag

Hey so I have little drag and drop game written in React konva. My draggable piece looks like this (simplified for convenience return this.props.areas.map((area) =>
Robert Lemiesz
  • 1,026
  • 2
  • 17
  • 29
1
vote
0 answers

Table Management Features by Creating Shapes and Drag-and-Drop in React.js

I am building an application in React.js that requires users to create and manipulate floorplans with detailed table management functionality. The features I need to implement include: The features I need to implement include: Create a Floorplan:…
ali
  • 11
  • 3
1
2 3 4 5 6 7 8