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
143
votes
11 answers

Specifying onClick event type with Typescript and React.Konva

I'm trying to get rid of my tslint error Type declaration of 'any' loses type-safety. but I'm struggling to figure out what the correct type would be for the Event. I'm working through the Lynda "Building and Deploying a Full-Stack React…
Justin Levi Winter
  • 2,327
  • 2
  • 17
  • 30
11
votes
1 answer

KonvaJS: How to connect two shapes with an arrow?

I would like to use Konvajs to do below tasks: draw two rectangle groups on canvas. Each group contains a rectangle, text, and a circle When I use the mouse to drag from the circle, it draws an arrow while dragging. When I drop the arrow into…
Bo Hu
  • 327
  • 1
  • 3
  • 13
9
votes
1 answer

Pixi.js vs Konva.js vs D3.js

I'm a graphics noobie and need help understanding the capabilities of the various javascript 2D libraries. . . What do I get out of Pixi.js that I don't get out of a canvas-based library such as Konva? What do I get out of Konva.js that I don't get…
user2132190
  • 373
  • 1
  • 2
  • 17
9
votes
5 answers

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

I'm using Konva JS in my project. I'm adding a shape on a button click which is draggable. On click of the shape i need to get X and Y positions of the shape. getX and getY functions are returning the original X and Y. How can I update the X and Y…
Sooraj
  • 9,717
  • 9
  • 64
  • 99
9
votes
2 answers

KonvaJS: HTML in a Text object

I'm currently looking into KonvaJS to create like a scrap booking app, and i'm trying to display like a bullet list. I trying to use a Text shape and add html to the text to see if it will render it, but no luck. Is this even possible? If so, how?…
Wayne Barnard
  • 164
  • 1
  • 8
9
votes
2 answers

Now that KineticJS is no longer maintained, where can I find its documentation?

Active maintenance of KineticJS was discontinued by its founder in December 2014. The documentation once hosted on the kineticjs.com website now returns 404. Where can I find the last version of the documentation?
klenwell
  • 6,978
  • 4
  • 45
  • 84
8
votes
2 answers

how to react-konva zooming on scroll

Hello im trying to implement a zoom feature on a rect in my react project but can't find a way to do it the react way? any help please ? this is the html konva example i've found :…
HachimJ
  • 121
  • 1
  • 9
7
votes
1 answer

How to Upload and load image in Konvajs canvas?

I have used konva js plugin for canvas representation. I have gone through the document, but can't get any help to upload the image using konvajs. Is it so that I need to do custom code? Does konva js support image upload from folder and save to…
Binny
  • 83
  • 1
  • 7
7
votes
1 answer

KonvaJS / HTML5 canvas infinite looping tilemap. Setting camera position

I'm trying to create an infinite looping canvas based on a main 'grid'. Scaled down fiddle here with the grid in the centre of the viewport. JS Fiddle here In the fiddle I have my main grid of coloured squares in the centre, I want them tiled…
Kiksy
  • 1,272
  • 5
  • 20
  • 43
6
votes
2 answers

Optimizing Konva.js for Many Images

I'm currently tiling many PNG images on several stacked FastLayers with Konva.js. The PNGs contain opacity, and they do not require dragging or hitboxes. The tiles are replaced often, and this seems to work well for medium-sized grids with…
ross.squires
  • 405
  • 3
  • 13
5
votes
1 answer

Konva.js: [Free drawing & Drag & Zoom] Can't draw correctly with pointer after Drag or Zoom

Any discussion is welcomed. Thanks for reading! What I am trying to do I'm trying to implement simple paper(whiteboard) using Konva.js. So far I've implemented Drag, Zoom and Free drawing on paper. I referred…
dynamicnoodle
  • 51
  • 1
  • 4
5
votes
2 answers

How to put a text inside a rect using konva.js?

I have a project with some rects and I need to put text inside them. Is there a Konva class that does this? I have tried using Konva.group (), label ... This was my last attempt, at the beginning the text stands as it should but when moving the Rect…
5
votes
1 answer

Konva: how to vertical centering text

I'm try to build a Konva Text container with vertical centering of it's content; var infoText = new Konva.Text({ x: 0, y: 0, text: `my long long ... text`, fontSize: 18, fontFamily: 'Arial', width: 50, height: 50, align:…
Littlee
  • 3,791
  • 6
  • 29
  • 61
5
votes
1 answer

react-konva Text - onClick does not work on mobile

I'm using react-konva in my webapp and on the desktop browser it works perfectly, but on the mobile browser the onClick does not work.
Alon
  • 883
  • 1
  • 6
  • 18
5
votes
1 answer

Validating value in HTML number input with Konva

I'm developing a website that can draw graphs using konva, but I'm currently running into this weird problem: If I change the unit per tick to anything other than *.5 or an integer, it will become something like this: Here's the…
ItsTheWolf
  • 53
  • 3
1
2 3
65 66