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

Konva.js with Redux

I've tried to solve it in different ways but I couldn't. Is there any simple way to use Konva.js with Redux and React Hooks. As I read about, Konva's context mechanism is different from React-Redux. And so, even though my all App in Provider…
abdullah yıldız
  • 168
  • 1
  • 4
1
vote
0 answers

How to fix wrong act() around your test interactions

I created an app with create react app. npx create-react-app someapp --template typescript Then I installed konva and react-konva yarn add konva react-konva The App.tsx has been reduced to a minimum. import { Stage, Layer, Rect, Circle } from…
user1791139
  • 606
  • 1
  • 11
  • 27
1
vote
1 answer

react konva keep one layer fixed while zoom on stage

I'm developing a map (green rectangle ) and a path drawn over it ( black lines ) in Konva: The map has a fixed dimensions while the path is get from an API call. I want to be able to zoom the map either with the mousescroll or by clicking the…
Andrea Barnabò
  • 534
  • 6
  • 19
1
vote
1 answer

How to set the initial dimensions of a transformer when applying it on a group having clip properties in Konva?

I have a Konva.Group with a few nodes to which I have set clip properties to limit what is seen. I'm applying Konva.Transformer to the group and the problem I'm facing is that the Transformer encloses the entire group, even the unclipped portion.…
mplusr
  • 151
  • 15
1
vote
1 answer

Increase Arrow from both sides in React-Konva

I'm drawing a Line with React-Konva. Once the Line is drawn, I would like to display an Arrow (with pointers on both sides) underneath that Line. That Arrow should be longer (both sides) than the Line but should point the same direction. What I've…
Barbell
  • 194
  • 1
  • 6
  • 19
1
vote
3 answers

Hide transparent image from download while using React Konva

I want to download only the papayawhip square box without the transparent image behind it. I am using React Konva. I have the following code: import * as React from "react" import { Stage, Layer, Rect } from "react-konva" import type { Stage as…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
1
vote
0 answers

Rendering lots of canvas elements with react-konva

Working on a project built with react and react-konva. It's a 2d map of the warehouse. The map has lots of racks, they're basically just simple rectangles, but there are close to 20k of them. The map is very laggy. So we're now trying to optimize…
mindescape
  • 11
  • 1
1
vote
1 answer

Render set of images as video in React application

I am building a React application where I have to call some external API to get images that represent frames of a video, so, I get one image per request and a video has up to 1000 frames, therefore my current approach is that I request an image,…
M.Alsioufi
  • 565
  • 2
  • 7
  • 16
1
vote
1 answer

React Konva share ref between sibling components throws error

I have App.tsx which contains 2 sibling components: Konva.tsx: It has the Canvas Options.tsx: It has a Download Canvas button So I created a ref named stageRef in App.tsx to pass it to Konva.tsx & Options.tsx. I use React.forwardRef to forward…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
1
vote
1 answer

Listening to Window Resize event in Mobx not updating Stage component's width & height in React Konva

I have a observable win in Mobx which gets updated when the window gets resized. updateWin function updates the win observable. FrameItStore.tsx import { makeObservable, observable, action, computed } from "mobx"; import { Point,…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
1
vote
2 answers

How to set stage width and height to 100% React Konva

I want to set the width and height of my Stage to 100%. Kind of like this, so that it fills the parent div: Is this possible? Thanks!
user14358266
1
vote
1 answer

Konva Draggable Rect with Children

I want to add a draggable Rect (red in the screenshot below) with children (the icon and text in the screenshot below). Whenever I try this, I get this error: TypeError: parentInstance.add is not a function Here is the code of just trying to add…
user14358266
1
vote
2 answers

React Konva's `use-image` library throws TypeScript error

The complete error is: TS2322: Type '[HTMLImageElement | undefined, "loaded" | "loading" | "failed"]' is not assignable to type 'HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas |…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
1
vote
1 answer

Migrating from webpack/CRA to snowpack: Uncaught SyntaxError: The requested module X does not provide an export named Y

Please help me understand what is causing the error message below. I'm trying to migrate a project to Snowpack, having used create-react-app previously. In this project I am using a library called react-konva for some canvas stuff. This library…
Ludwig Nagelhus
  • 177
  • 8
1
vote
0 answers

Why scaling pattern behaves differently in Safari but not in Chrome or Firefox

I'm working on an application where the user can choose photo frame for the uploaded picture with KonvaJS and React. I'm using KonvaJS for drawing the frame around the picture. The image of a frame's material is scaled to fit the frame while…
Testy
  • 71
  • 1
  • 7
1 2 3
…
19 20