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

vue-konva pass custom style to div.konvajs-content & canvas

will render
Littlee
  • 3,791
  • 6
  • 29
  • 61
2
votes
1 answer

KonvaJS: how to keep the position and rotation of the shape in the group after detached?

How can keep the position and rotation and scale properties of shapes in the group after detached? It looks shapes are lost there changed properties if detach every shapes in the group after the user move or resize, rotate the group that wrapped…
pius lee
  • 1,164
  • 1
  • 12
  • 28
2
votes
1 answer

How do I add an id to a konvajs node?

I'm creating a set of circles and would like to iterate through them and highlight based on an identifier of some kind. It would great if I could just set circle.id = 1, circle.id = 2, ...
gmcerveny
  • 191
  • 1
  • 17
2
votes
1 answer

Typescript type a is not assignable to type b

Story I'm using konva library with Typescript which is HTML5 Canvas JavaScript framework. Here is a simple tutorial code that I changed from javascript to typescript. import Konva from "konva"; const stage = new Konva.Stage({ container:…
Byeongin Yoon
  • 3,233
  • 6
  • 26
  • 44
2
votes
1 answer

Resizing and rotating a line with the same anchor in Konva.js

I am using Konva.js for the annotation of data visualizations in the browser. A common use case is to draw lines between a shape (rectangle, ellipse) and its description (a text node). Lines need to be dragged, rotated and resized by users. Resizing…
ACDSL
  • 87
  • 2
  • 7
2
votes
1 answer

Scale down a Konvajs stage without losing quality

Consider having a large (2000x1000) stage with some text in it. The stage gets downscaled to 1000x500 making the text unreadable. Then we try to enlarge the text by zooming it in. Expected: the text should become readable again at some…
eugenesqr
  • 589
  • 6
  • 19
2
votes
1 answer

Konva.js, what measurement unit are they using?

I'm currently using Konva.js within my Vue.js application. I'm wondering, what measurement unit are they using in Konva.js? I got an array of objects, when I increase the y-value by 20 it's just moving a tiny bit.
2
votes
1 answer

Turn off Konvajs warnings

When having more than five layers, Konva outputs a warning to the console along the lines of: "The stage has n layers. Recommended maximin number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree…
some one
  • 77
  • 5
2
votes
1 answer

It there any way to set/get data in konva shape?

It there any way to set/get data in konva object? Just like jquery use the method 'data' to set and get info,eg: $('#abc').data('id','123') !
Jack
  • 35
  • 4
2
votes
1 answer

react-konva: disable canvas element devicePixelRatio scale

I'm using react-konva when I render a with width:750, it will render a element with width 750 * devicePixelRatio will render (in iPhone 7) How do I disable this behavior ?
Littlee
  • 3,791
  • 6
  • 29
  • 61
2
votes
2 answers

React Konva change zIndex on drag

Hey so I have little drag and drop game written in React konva. My draggable piece looks like this (simplified for convenience return this.props.areas.map((area) =>
Robert Lemiesz
  • 1,026
  • 2
  • 17
  • 29
2
votes
1 answer

Scale stage and drag element relative positions not working

Im having small issue with calculating realtime position while scaled stage in KonvaJS React. In my example I have two Rect's small (red) one position is relative to Big Rect (yellow), While dragging big rectangle small one moves relative to big one…
Wimal Weerawansa
  • 309
  • 2
  • 15
  • 33
2
votes
1 answer

KonvaJS: How to prevent some shapes from scaling when scaling whole stage?

I have a simple KonvaJS image zoom/pan example and now I am adding anchor on mouse click, but the problem is that when the stage is scaled for zoom also the anchors get bigger. I would like to prevent anchors from scaling when the stage is…
2
votes
3 answers

Convert HTML Canvas coordinate system to Cartesian system

The origin (0,0) of an HTML canvas is the upper left (see image below), where positive x coordinates go to the right, and positive y coordinates go down. However, the origin in mathematics is the "center," and positive y goes up via the Cartesian…
lucidgold
  • 4,432
  • 5
  • 31
  • 51
2
votes
1 answer

How to draw an inverted element on a layer in KonvaJS

is there any way to add a shape in KonvaJS which draws outside of it's boundries? Basically a "hole" in the layer, so that I can highlight a spot in the canvas by making everything around a circle darker (black with low opacity). Any help is much…
Daniel.S
  • 23
  • 7