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

Equivalents of KonvaJS filter values

I'm trying to find KonvaJS filter values' equivalents of CSS filters on https://www.cssfilters.co/ For example how can I apply "1977" filter with KonvaJS. I tried many options but I'm getting different results everytime. Also is it possible to give…
she hates me
  • 1,212
  • 5
  • 25
  • 44
1
vote
1 answer

How to set HTML-id for a canvas element rendered with react-konva

I am using react-konva in a project to render HTML5-canvas elements: import desktop_tea_1 from "./previews_desktop/tea_1.png"; const DesktopTea1 = () => { const [desktop_tea_1_const] = useImage(desktop_tea_1); return
user8865520
1
vote
3 answers

Unable to load PDF images into HTML5 canvas as Image object using Konva

I am unable to load a Konva Image object in my canvas if the source is a PDF. No errors are thrown but the canvas is blank where the image should be. Are there any known workarounds for this? Any suggestions welcome.
Lorentz9
  • 131
  • 1
  • 1
  • 6
1
vote
2 answers

How to create a Konva-React context menu

To the best of my knowledge there isn't an easy/built in way with Konva to create a context menu for right clicking on objects. I am busy working on a project which requires the use of context menus, so I thought I'd just create my own. Needless to…
Ebbs
  • 1,030
  • 3
  • 20
  • 38
1
vote
1 answer

React Konva Blend Modes

I'm having trouble recreating a blendmode between two Rectangle nodes using react-konva. So far I've tried changing the order the nodes are rendered, adding extra groups and applying the composite operation to those and setting the composite…
jagomez8
  • 175
  • 1
  • 7
1
vote
1 answer

showing a react konva label if visited a konva element

I am using React Konva 1.1.6 and learning how to use it. In the following code, I am trying to show a label near the mouse pointer every time my mouse passes over the konva arrow. Yet, my label just disappears. Am I missing something in my code? I…
Jose Cabrera Zuniga
  • 2,348
  • 3
  • 31
  • 56
1
vote
1 answer

Konva - Unable to completely destroy stage in react when unmounting component

I am using the Konva API directly in my react componen, and it works perfectly. I only have one big problem. The problem is that when the component that contains the ref container is unmounted the react app crashes, saying that staging has no…
Ionathan Rus
  • 13
  • 4
0
votes
0 answers

react konva how move image back to screen boundaries

I'm trying to create a mobile experience for editing images, imagine a photoshop for mobile, one of the features is zoom & pan, which works except for one thing. I'm trying to prevent the user from scrolling the image outside the screen boundaries,…
Doctor Strange
  • 189
  • 1
  • 3
  • 12
0
votes
0 answers

How load image in Konva React from local

I am trying to load an image from img directory, which is in src directory. I have got a component called LocalImage in components directory, which is also in src. import React, { Component } from 'react'; import { Stage, Layer, Image } from…
Alfred G
  • 1
  • 1
0
votes
0 answers

Konva Stage size

In Konva, does Stage size really matter? Because I can zoom in almost infinitely, and if a large stage does become slow, why not just make all the elements really small and fit 2000 objects into a stage which is technically 100x100? I'm asking…
Pieter Pienaar
  • 121
  • 1
  • 9
0
votes
0 answers

node js reinstallion error at time of version checking

C:\Users\dilda>node v node:internal/modules/cjs/loader:1078 throw err; ^ Error: Cannot find module 'C:\Users\dilda\v' at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15) at Module._load…
DILDAYAL
  • 1
0
votes
1 answer

e.relatedTarget is undefined in onMouseOver event on react-konva node

I've written onMouseOver event for a shape/node - '' in React-Konva. Here I'm able to access e.target . But I'm getting 'undefined' for e.relatedTarget . Can anyone please explain how to get that value? Thanks. Below is my code....
g1mahadik
  • 1
  • 1
0
votes
0 answers

Konvajs：Implement constraints similar to figm

Konvajs：Implement constraints similar to figm enter image description here Konvajs：Implement constraints similar to figm
拾光丶
  • 1
0
votes
0 answers

Konva js | Transformer double call onDragMove

I have "Transformer" and several closed "Line". For the Line onDragMove I got a function defined that manually changes the x and y of the Line. The function first get the matrix, then resets the Line x and y to its old state, which is saved in a…
Jurek O.
  • 9
  • 4
0
votes
1 answer

how to get konva transformer anchor positions for any shape

I'm trying to get anchor positions of the transformer bounding box(i.e the 8 points of blue colour rectangle around the polygon shape having 4 circles) right now only if the shape is Rectangle then the below code will work. because the rect initial…
Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
1 2 3
4
5 6 7 8