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

Canvas Content as High Resolution Image.

I am using KonvaJS in my project. I need to save the stage/canvas as an image(it would be great if exported image is high resolution image). KonvaJS has a function called stage.toDataURL() which returns canvas content as a Base64 string. The…
Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71
0
votes
1 answer

Can't access children of Konva Stage after cloning

I have a problem with konvajs. I have a konva Stage that I clone into a temporary Stage, so I can revert changes made by a user, when the user cancels. The way I do this is, that I clone the existing Stage into a temporary one, destroy the children…
GiftZwergrapper
  • 2,602
  • 2
  • 20
  • 40
0
votes
1 answer

konva.js drag and rotate

I want to draw image that can rotate, drag and resize.I created a JSFiddle: https://jsfiddle.net/iu1340/esrfydsL/ I can drag and resize but when I rotate the image,the locations of the nodes are wrong Here is the code I use: var width =…
tao hou
  • 1
  • 2
0
votes
1 answer

KonvaJS: Group's Coordinates With Respect to Childrens' Coordinates

I am using KonvaJs in my project. I am using Konva.Group to club some items like Konva.Image, Konva.Rect together. But I am facing some challenges while placing them at particular position with mousemove event. I have Konva.Group like this: var…
Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71
0
votes
2 answers

How to use konva on windows without Visual studio and GTK

It seems like VS and GTK are only needed to build node-canvas, which is required by konva. Forgive me since I'm a complete newbie, but is there any other way of doing this without having to download and install a bunch of huge things that I'll…
hoangbv15
  • 360
  • 2
  • 4
  • 14
0
votes
1 answer

How to create Bootstrap popover by clicking on KonvaJS Image object?

In my application I use KonvaJS extensively, but I reached a step where I need to create a Bootstrap Popover on KonvaJS Image click, is that possible? Please note that I have more than 50 images in this app and I need to create a popover for each.
0
votes
1 answer

konva: Is there a way to tune parameters for `tap` event?

In my konva app, users are having trouble tapping on icons ... frequently konva issues a dragStart event instead of a tap event (presumably due to the length of time the user's finger is down or the fact that their finger moved slightly during their…
Eric
  • 1,414
  • 3
  • 16
  • 35
0
votes
1 answer

angular-pintura not loading width and height

I'm having difficulties making angular-pintura work. Image Source is loaded but the width, height of the canvas is still 0. I need to adjust the display (rotate to portrait/landscape, adjust the width of the browser) in order for it to load the…
Gabriel Llorico
  • 1,783
  • 1
  • 13
  • 23
0
votes
0 answers

Canvas is offset when scaling parent in mobile

I have a web app that scales a div to match the screen size. Let's say that the div has 500px width and the screen is 600px, so by javascript I set to the div a transform: scale(1.2) css property and it matches to the screen size. Inside the div I…
aapdl
  • 1
  • 2
0
votes
1 answer

How to make images snap to any "outline" image (using "animals on the beach" demo)

I'm new to Konvasjs and new to canvas and I've been try to make a game similar to the demo "animals on the beach" I wanna keep the part where if it in the right outline the score increases but instead of the animals in the demo snapping to their…
0
votes
2 answers

konvajs: item location not change after drag and drop

So with konva.js I have a group with two Text items. I made the group draggable. After dragging it though I printed out x and y for the Text but it never changed: group.on('dragend', function() { var group = this; var t =…
lang2
  • 11,433
  • 18
  • 83
  • 133
0
votes
1 answer

How to zoom path to fit container

I have a canvas which displays some SVG paths. I've drawn these using KonvaJs. Users should be able to click on any of these paths and zoom in on it. After clicking a path, the canvas should zoom to the point where the path fits the full size of the…
RobinvdA
  • 1,313
  • 2
  • 13
  • 28
0
votes
1 answer

Drag Bound with Konva.Layer

I am using KonvaJs in my project. I need to implement drag bound to Konva.Layer. My layer has so many other shapes and images. I need to restrict the movement of layer up to 50% of it's width and height. The way I have done in this plunkr. The…
Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71
0
votes
0 answers

Dynamically updating images in konva.js

I'm using konva.js for building a simple editor. One of the elements on the canvas is a image that's dynamically generated by a back end server: The item is a Image item and I'm using: this.img.src = /api/generate_img?arg1=foo&arg2=bar to update…
lang2
  • 11,433
  • 18
  • 83
  • 133
0
votes
1 answer

How to get the center point of canvas

How to get The center point of the canvas object/rectangle. I use the Konvajs library for my small project. in the konva documentation said that you need to center the point to get good rotation.…
mmativ
  • 1,414
  • 14
  • 25