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

TypeScript throws errors for Konva ReactJS project

I'm trying out TypeScript (TS) with Konva.js in a ReacJS project. Without TS it would work fine. But with TS it throws an error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /.../testProject/src/App.ts:…
kodingreview
  • 1
  • 1
0
votes
0 answers

How to check the type of file while getting data from API whether the file is pdf or image so that it can be viewed?

How to check the type of file while getting data from API whether the file is pdf or image so that it can be viewed? How to check the type of file while getting data from API whether the file is pdf or image so that it can be viewed?
sandeep sharma
  • 1
0
votes
1 answer

How do I render a native svg from string in Konva?

The Konva.Image.fromURL() method is the only way to render a native SVG mentioned in the documentation. I haven't found any other way to display an SVG from a variable without using 3rd party libraries. Konva.Path cannot be used as an SVG consists…
Nikolay Maksimovski
  • 1
  • 1
0
votes
1 answer

Konva js | Line Polygons x, y changes if Transformer changes size

I made an Rectangle with Line so that later progress I can edit its form. Also I wanted to be able to resize this Polygon. If I select it it gets added to a Transformers nodes. The Issue now is that if I scale the Polygon up the x and y of the…
Jurek O.
  • 9
  • 4
0
votes
1 answer

How to style the transform anchors on a Konva element?

How do I style the transform anchors (e.g., blue boxes) on a transformable Konva element? Note I'm using Konva with konva-react. Example 1: In other words, what if I wanted to make the boxes grey, and semi-transparent? Or change the size? Example…
Chris Miller
  • 694
  • 1
  • 12
  • 26
0
votes
0 answers

How can a shape be removed from a < Group /> and moved and nested into another Group after a Drag and Drop?

Considering this (buggy until other questions are answered) demo from here: https://codesandbox.io/s/kanbanboard-lackofcarddnd-doce75?file=/src/index.js where the red < Text /> emulates a button that inserts a < CustomCardContainer /> based on the…
Hunter1001
  • 1
  • 1
0
votes
1 answer

In react-konva (the HTML canvas lib), How can I emulate a classical editable and get or read the string value entered there?

Considering this (buggy until other questions are answered) demo from here: https://codesandbox.io/s/kanbanboard-lackofcarddnd-doce75?file=/src/index.js where the red < Text /> emulates a button that inserts a < CustomCardContainer /> based on the…
Hunter1001
  • 1
  • 1
0
votes
1 answer

How to apply transparency for several shapes at once on the React-konva?

https://konvajs.org/docs/sandbox/Transparent_Group.html I saw the link above and tried to use group.cache() in react-konva, but I don't know how to apply it. Please tell me how. import React from 'react'; import { Circle, Group, Layer, Rect, Stage }…
zhdwl
  • 13
  • 3
0
votes
0 answers

Distributed text alignment in Konva

I am using React Konva to draw shapes. I want the text can align distributed as Excel (not justify). How can I get that behavior ? I have included images about the detail of aligment. Thank you guys. img1 img2
Tam Duc
  • 1
  • 1
0
votes
1 answer

React-konva: place elements of a Group with absolute (stage) coordinates

I started using React-Konva just 1 week ago, but I have a problem in what I am doing and I can't figure it out, due my lack of knowledge of Konva. I have aStage, with Layer and Group inside. Inside the Group I have a Rect and some data from an api…
Mark
  • 1,069
  • 2
  • 21
  • 44
0
votes
0 answers

How to use a image in parent component when the image is from child component in ReactJS?

I created an image in child component (I think that is called child component, sorry if I am wrong). I want to use that image in parent component but I don't know how to do it properly and got error message of 'finaleImg' is not defined. function…
apotamkinn
  • 61
  • 6
0
votes
1 answer

Unable to create a "zoom-in and center object" effect

we (team & I) discovered Konva and it helped us tremendously so far, thanks a lot. However we can't figure how out to create a zoom¢er effect. We added several object to a Layer itself added to a Stage, both defined as such: let newStageArea =…
StLa
  • 3
  • 2
0
votes
1 answer

Konva JS why scenefunc context.circle is not working?

I am trying to create custom share a circle and BIN inside that circle to use as button. but context.circle is not working in documention they mentioned, rect, circle, text.. we can use with custom shape. Please letme know what is the issue, is it…
Saba Naeem
  • 35
  • 5
0
votes
1 answer

using Konva (as opposed to react-konva) in React application - any disadvantages?

When using react-konva in a react web application I'm noting using the JSX tags I do not have direct handles to the various nodes I create on a Layer/Canvas. Then I have to get access to the Layer and use "find" to find the nodes to then modify…
Greg
  • 34,042
  • 79
  • 253
  • 454
0
votes
1 answer

react-konva How to set Shape width and height to fill it's Group container?

I want to have the same animation movement on both a Text and a Rect. I put them into a group and apply a tween on the group. However, the x and y props are inherited, width and height are not, which means the Rect's width and height don't have…
Bowen
  • 3
  • 2
1 2 3 4
5
6 7 8