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

KonvaJS: Avoid blurriness when zooming in/out

I'm using KonvaJS to draw some figures and make simple animations. Sometimes a user zooms-in in the page and the drawn canvas gets blurry. I've noticed that if the page starts zoomed in, the blurriness is greatly reduced. So I thought a solution…
ArianJM
  • 676
  • 12
  • 25
2
votes
1 answer

how to avoid rect width or height grow unexpectedly during snap in konva

I was trying to snap the rect to show up a perfect square upon transform. i.e when resizing if width and height becomes same I'll show lines indicating it's a square. but, while doing the height or width of the rect is growing unexpectedly as shown…
Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
2
votes
1 answer

Konva/react-konva - restore canvas elements from JSON

I am creating a React application that uses react-konva and Konva for a drawing board. Currently, when the user clicks on the Save button it takes a "screenshot" (using the toDataUrl) of the board. The problem with this is that I would like to…
2
votes
1 answer

How to center items inside konvajs?

I am currently building some sort of meme-editor in react and for that I am using konvajs to function similar to a Canvas. My problem is that I am unable to center the items inside the canva stage, as there seems to be some property that just…
2
votes
0 answers

Custom React Component

I'm writing a react js app project will include a component that should look like the following pictures: The requirements are: User should be able to move the circles within the grid with the mouse Grid snap - circles can only be positioned on…
2
votes
2 answers

Text truncation issue in a Konva.Text shape with low lineHeight?

I'm creating an app very similar to Canva, or the Polotno studio using Konva React. I'm facing a very annoying situation concerning Text shapes: When the lineHeight is inferior to 1.2, the height of the shape is computed at a lower value than the…
Bruno Jurado
  • 31
  • 1
  • 4
2
votes
1 answer

Konva.js: simultaneously run tweens look out of sync

Here's the situation. I have a collection of nodes and need them to move up and then back down. For this I am using Konva.Tween as in the demo. As you can see, I create and run tweens in a for loop. What I want is all squares to move in sync, but it…
Mikhail Dudin
  • 459
  • 5
  • 15
2
votes
1 answer

How to drag a shape even if there is a shape above it?

I'm trying to be able to drag a shape even if there is another shape above it. Is that possible if yes do you have any idea how to do it ? Is there a Konva parameter do resolve that situation ? Thanks const stage = new Konva.Stage({ …
Foopy7774
  • 51
  • 4
2
votes
1 answer

Konva.js How to drag images and resize with Transformer?

I'm trying to drag and drop these images to the stage. but when I dropped images, I received this error. Konva.js Konva error: Can not cache the node. Width or height of the node equals 0. Caching is skipped. The process that I thought of was drop…
JiHyun Kim
  • 33
  • 3
2
votes
1 answer

Resize Konva Label on Zoom

I have a simple setup where use clicks location and creates a label with text. What i would like to be able to do is resize on zoom, so that label is relative size always. Currently label is huge when i zoom in covering key areas. code: createTag()…
Aeseir
  • 7,754
  • 10
  • 58
  • 107
2
votes
1 answer

Adding zoom to a packed circle visualisation using Konva (Scale and reposition from center)

I'm created a packed circle visualisation using d3 and drawing it using Konva. If you click on a circle within the packed circle visualisation, the viewport should zoom to that circle. Each circle has an event handler attached, which gets called on…
Ivan Bacher
  • 5,855
  • 9
  • 36
  • 56
2
votes
2 answers

Zoom to specific shape in konva.js

my problem is following: I have couple of shapes on stage and on button click I need to zoom to specific shape and its position. Do you have any ideas how to do it? I have already checked tutorials for zooming to pointer position and to center of…
Adekriz
  • 31
  • 2
2
votes
2 answers

Is it possible to measure the current FPS in Konva.js?

I want to implement the following logic (this may sound strange, but to me it feels like a decent idea). Several months ago I asked this question, and the solution with pixelRatio still seems quite ok. But iPhones and some Android devices have much…
Mikhail Dudin
  • 459
  • 5
  • 15
2
votes
1 answer

Laravel + React: Pass Function in JSON response

I'm trying to generate JSON for display clickable Konva object. All attributes working as expected except onClick. How to pass a JS function in JSON with Laravel Respons::json()? Here's what I've tried. return Response::json([ 'status'…
2
votes
1 answer

Is it possible to draw a shape based on an onClick Event in React JS using react-konva?

I am looking for a way to draw a shape based on a mouse event in react-konva, but have only been able to find methods to draw shapes on the screen statically
Namya LG
  • 31
  • 5