Stack Overflow
Stack Overflow

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

Z-index bottom background -Konvajs

How to use node.setZIndex(2); or node.moveToTop(); node.moveToBottom(); for background layer fix in bottom any images and texts? If a clicked background -> image -> background, the image go to…
Gislef
  • 1,555
  • 3
  • 14
  • 37
0
votes
1 answer

Konvas.js - Chosse background by click class css

I'm trying, using Konvas.js, to click on imgback class and change the background according to the clicked image: https://jsfiddle.net/hk7xe0we/3/ I do not want to put an id on each image Following code: Jquery: $('.back').click(function(){ …
Gislef
  • 1,555
  • 3
  • 14
  • 37
0
votes
1 answer

KineticJS: Curved line between two draggable shapes

I am using KineticJS in my project. I need to connect two shapes using a curved line. One of the shapes can be dragged. I am able to put the curved line between shapes. The problem arises when user starts dragging the shapes. The requirement is that…
Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71
0
votes
1 answer

Add video to konvajs stage

I have a working web functionality that uses html5 video and canvas to access the mediaStream of the device camera then take a photo and render the image in the canvas. Works well but I would like to use konvajs stage instead of canvas. The code …
t6s
  • 81
  • 2
  • 14
0
votes
2 answers

Destroying multiple shapes on end of KonvaJS tween

So I have a for loop generating, placing and tweening 20 rectangles. However the code only destroys the last generated rectangle. Is there an (ideally simple) way to ensure that the .destroy() applies to every rectangle instead of the last…
AlwaysNeedingHelp
  • 1,851
  • 3
  • 21
  • 29
0
votes
1 answer

How to rotate image using HTML5 canvas library like: KineticJS or KonvaJS?

I am able to rotate a rectangle (shape) using KineticJS library I would like now to rotate an image, How I can do that? var stage = new Kinetic.Stage({ container: 'container', width: 530, height: 530 }); var layer = new…
nunabi
  • 11
  • 3
0
votes
1 answer

Konva events mis-positioned after screen resize

In my code I am resizing the Konva canvas and the konvajs-content elements to maintain a full screen appearance. resizeCanvas() window.onresize = function() { resizeCanvas(); } function resizeCanvas() { var w = window, d = document, e =…
stats
  • 455
  • 4
  • 18
0
votes
1 answer

Draw smooth Lines on a Canvas

I want to draw a line on a canvas with context.globalCompositeOperation = 'destination-out'; context.globalAlpha = 0.118; The result looks like this: The background if the image is a yellow rectangle. I use a circle to drag and drop it over the…
Michael
  • 32,527
  • 49
  • 210
  • 370
0
votes
1 answer

Draw on rotated image has wrong draw position?

I want to draw on a rotated image with a circle. The circle is moved with drag and drop. I created a JSFiddle here. When I use degrees = 0 it works fine: The position which is drawn is correct. When I change degrees to something different than…
Michael
  • 32,527
  • 49
  • 210
  • 370
0
votes
2 answers

KineticJS - dynamically create array of shapes and using events

I have managed to dynamically create an array of shapes, and they are nicely placed at different coordinates. However, when I try to assign an event within that loop, the result of click is always the same. As if the click event is still referencing…
tonysepia
  • 3,340
  • 3
  • 27
  • 45
-1
votes
1 answer

How to pixel perfect align text-element

I want my vue Konva Text element to completely fill the given height, like i expect of a rectangle. This is issue becomes obvious when pairing with text images, (converting svg text to canvas) that properly match the given dimension
David Vaneß
  • 31
  • 4
-1
votes
1 answer

Konva Text : While using emoji in text, it renders as a line text instead of a filled emoji

let complexText = new Konva.Text({ x: 0, y: 0, text: " hello World ", fontSize: 12, fill: "#003049", width: stage.width() - 10, padding: 5, align: "center",Received output }); Expected Output: hello World
Senthil R
  • 1
-1
votes
1 answer

Scaling IMAGE around pointer in Konva

Can't wrap my head around this and get it to work. Trying to transpose this sample on Konva, but can not get it to work with an image inside a layer, inside the stage. The sample I am trying to reproduce is the "Zooming stage relative to pointer…
Olle
  • 47
  • 1
  • 4
-1
votes
1 answer

Is there a way to prevent a Shape for being transformed?

That is the thing, i'm creating a shape that covers all canvas to act like a white background, i have a transformer and im listening to canvas clicks, inside it im adding objects into transformer nodes, but i don't like to transform the white shape…
dcruz1990
  • 1
  • 2
-1
votes
1 answer

All previous shapes show up while adding another shape in konvajs

I'm facing an issue with konvajs. I am able to draw things and they save all fine to be played with the end video. However, Let's say I pause the video at 0:30 to add a circle and save it, and then I want to add another shape at 01:30, as soon as I…
Jagatveer Singh
  • 185
  • 2
  • 12
1 2 3
…
65
66