Questions tagged [konvajs]

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications.

Homepage: http://konvajs.github.io/

An object oriented HTML5 Canvas JavaScript framework with a well-documented API, along with tutorials and labs to cover most of the basic needs.

Konva supports node nesting, layering, caching, serialization, deserialization, animations, transitions, filters, custom shapes, configurable drag & drop, and more.

Multiple Canvases are used to create a high performance animation and event detection system. Konva also utilizes a virtual node system which allows developers to create hierarchies which resemble familiar HTML DOM structures and use familiar selectors (eg. '#foo') to manipulate nodes.

Konva allows you to draw shapes onto the stage, add event listeners to them, group them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.

986 questions
1
vote
1 answer

How I delete a shape at the format Label with Tag and Text

I have a format with the Label, Tag, and text into a shape, so, I want to delete a shape with the double click, it was functioning for the sample shape with, a circle, rect, and so on, but the shape Label, Tag and text, I can´t delete with double…
José Maia
  • 77
  • 6
1
vote
1 answer

Problems when applying react-konva rotation

I want to move the shape and change the direction using the arrow key. Moving was successful. But When 'rotation' is applied, the 'text' position changes. How do I keep the text position and only change the orientation of the…
zhdwl
  • 13
  • 3
1
vote
1 answer

Correct gradient for canvas

I want to display svg file as path in konva. But I have a problem with styling. And radialGradient doesn't apply well. And I also don't want to use Konva.Image. I write both here: VSG file:
1
vote
1 answer

How can I render circles around rectangle in Konva js?

I need to render table and chairs like in this picture: I dont know how to calculate position of circles around rect. I tried some code, but its not working...Anybody knows how to solve it? Check my code: let smallCircleRadius = 20 let tableSize =…
Louis Hudson
  • 25
  • 1
  • 4
1
vote
1 answer

Shapes not rendering within Stage in react-konva

I have a few lines of code to create a Rectangle or any other shapes I have tried are not rendering within the Stage. I have tried adding html elements, however they do render within the Stage. Is this caused due to the use of refs? There are no…
Aaeron
  • 23
  • 4
1
vote
1 answer

KonvaJS/Canvas Dynamic fog of war reveal with obstacles

I have a 2D board made with KonvaJS and tokens that can move on a square grid. I can already add fog of war and remove it manually. However, I would like to make it so, when each token moves, it reveals a certain around it, taking into account…
Adam Silva
  • 1,013
  • 18
  • 48
1
vote
2 answers

After the element is rotated or scaled by transformer, the element cannot be rotated around the center manually

There is an element in the canvas. Each time I click the button, I want it to rotate 90 degrees around its center point. So when I judge that the origin of this element is not at the center point, I will manually specify its origin to the center…
wen
  • 11
  • 2
1
vote
0 answers

getting name attribute of a group fails (on the second time) in konvajs

I have 3 groups each contain a rect and a text. When creating each group I set "name" attribute to "false". Then I add these groups to an array called "groups". The problem is, that I want to get the "name" attribute when I do dragstart on one of…
lukas
  • 11
  • 3
1
vote
0 answers

How to stack rotations with different offsets? Is there a way to "freeze" transformations (rotation and offset) before applying new values?

I'd like to change rotation and offset of a shape multiple times. I need to "freeze" transformations before applying new rotation and offset, so that when I change offsetX, the shape will move horizontally, not along the X axis of a shape at an…
ellis
  • 181
  • 10
1
vote
1 answer

How to export a gif canvas to gif image with jquery and konva.js

i make a gif canvas with multiple picture, now i want to export it but canvas is not export into gif its only export into png format my code is ` var c_img = new Konva.Image({ image: imageObj, …
jawad
  • 13
  • 6
1
vote
0 answers

How to resize a Konvajs scene with CSS?

I am using konvajs to edit the image. I want to make the scene size 500x500 pixels to edit uploaded image but at the same time I need it to be 50%x50% of the parent element to have the same aspect ratio on different screens. With a simple html…
gnd20032
  • 11
  • 2
1
vote
2 answers

how to hide resize bounding lines when exporting an image in konvajs?

I'm building some drag and drop Javascript app using konva.js and I have this one problem: when i'm exporting the image using the "stage.toDataURL()" command, the exported image contains the resizing boundings: How can i export the image without…
1
vote
1 answer

Get X and Y of a shape inside a group after dragging in Konva JS

I want to be able to drag and drop a group of objects (rect, text, circle, etc.) and get their new x,y position in order to keep them in that new position. I've checked the documentation for Konva.jS for dragging a group, but with no luck. What I…
Jumanazar Said
  • 101
  • 1
  • 4
  • 9
1
vote
0 answers

getting react-konva context in a parent handler - is there a better way than my code below?

Is there a better way, that is: (a) having to pass the child event back to the parent to be able to extract the stage/layer to then be able to do a konva node "find", and (b) having to "find" nodes using this approach (as using Konva-React JSX I…
Greg
  • 34,042
  • 79
  • 253
  • 454
1
vote
0 answers

konva react sdk, fade out all drawn line

I have a requirement to fade out all lines drawn after a fixed delay. I followed the simple drawing example. The code sandbox is available in the following url. https://konvajs.org/docs/react/Free_Drawing.html Please advise.
dpatra
  • 52
  • 8