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 optimise and increase loading speed of images downloaded via URL in konva js

I'm using konva 7.0.6 in an angular 12 app. When trying to render a jpg image via a URL, when the image is large around 7MB or greater, the image loading and rendering is taking long. Whereas when opening the image URL in a browser tab it is loading…
Derek Joseph
  • 3
  • 3
0
votes
1 answer

Konvajs : how to get bowser co-ordinates corresponding to canvas co-ordinates from canvas object?

I am trying to automate konvajs canvas UI. when using tools like selenium or playwright, the click event clicks on browser co-ordinates which are different from canvas co-ordinates. I wish to click on canvas co-ordinates. Therefore, I need some api…
Himanshu Choudhary
  • 1
0
votes
0 answers

How to hide shape in the stage，but displayed on rect

As in the picture, this is an effect on the line online Please give me an ideaenter image description here
雪山飞胡
  • 1
0
votes
1 answer

how to do it correctly so that when transform one shape, transform another shape in react-konva?

I need to transform one shape to also transform the other so that it fills the free space. How can I do it right in react? Now what I did is not working as it should at all and I have no ideas how to do it differently Demo:…
Roman
  • 3
  • 1
0
votes
0 answers

How to convert canvas stage to save in png/jpeg react konva

function downloadURI(uri, name) { var link = document.createElement('a'); link.download = name; link.href = uri; document.body.appendChild(link); link.click(); document.body.removeChild(link); …
Nami12
  • 5
  • 1
  • 3
0
votes
1 answer

react-konva Free hand area selection using mouse click (straight lines)

I want to implement a free hand area selection on canvas using react-konva. Anyone have solution or suggestion ? Please refer screenshot for better understanding. Thank You !!! And I tried this, https://codesandbox.io/s/dry-flower-b5eof-b5eof
Sachin Dongare
  • 58
  • 1
  • 7
0
votes
1 answer

How to add controls to React Konva Video Stage

hey so I wanted to play a video as my konva stage. I used an example from sandbox but I cant figure out how to add the video player control to it.Can somebody help Thanks constructor(...args) { super(...args); const video =…
tanmya
  • 73
  • 7
0
votes
1 answer

react konva animation to follow a path

Hey I am new to react konva and wanted to create an animation in which a rectangle follows a user defined path of dots. First user defines the path by clicking on screen and initializing the destination dots and then the rectangle should follow the…
tanmya
  • 73
  • 7
0
votes
1 answer

How To create this custom shape in react konva

Hi I am new to react konva and trying to make a custom shape for my project I wanted to create the yellow element which is basically a trapezium with curved sides and should fit inside the red ring as shown in the image. Any help is much…
tanmya
  • 73
  • 7
0
votes
1 answer

How to Add styling to Image Component in React Konva

I am complete beginner in react konva. I am using Image component with the use-image hook to display a picture but I want the picture to be round. I tried different css approach but nothing seems to work. Any Help is much appreciated import picture…
tanmya
  • 73
  • 7
0
votes
1 answer

How to set filters in React Konvajs?

I have SVG images and I need to change their color. If I work with usual HTML elements, I use function which converts hex to CSS filters. For example '#b5b5b5' is the same as 'invert(51%) sepia(81%) saturate(1433%) hue-rotate(195deg)…
Ruslan Neck
  • 59
  • 7
0
votes
1 answer

Delete function bug on a node using React-Konva

So I have updated my previous react-konva example code with my latest problem: https://codesandbox.io/s/react-konva-drag-and-drop-image-with-delete-button-on-tranform-6977j?file=/src/Draganddrop.js I am trying to add a delete button to every image…
Soultide
  • 15
  • 3
0
votes
1 answer

ref is null in ComponentDidMount

I have a ref to a KonvaJS stage. In ComponentDidMount, the value of this.stageRef.current is null. Any ideas why? My code looks as follows: import React, { useState } from "react" import { Stage, Layer, Rect, Text } from 'react-konva'; import Konva…
user1447435
  • 145
  • 1
  • 10
0
votes
1 answer

Adding Padding with React Konva

I want to create the equivalent of this (sudo code):

My Text

With React Konva elements. I know how to start, using Group, Rect, and Text, but I can't figure out how to do the padding. Hope someone can help!…
user12989805
0
votes
1 answer

Konva onDragMove and onDragEnd not updating position?

I'm trying to onDragMove to manually update an elements position. The shape itself is dragging around, and the is updating the objects, but it is not being rendered? Same with onDragEnd. Both are updating the array of shapes correctly, but it is not…
codebytesfl
  • 198
  • 1
  • 8
1 2 3 4 5
6
7 8