Questions tagged [kineticjs]

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications.

An object oriented HTML5 Canvas JavaScript framework with a well-documented API, along with tutorials and labs to cover most of the basic needs.

KineticJS is no longer maintained. A fork is available http://konvajs.github.io/.

KineticJS 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. KineticJS 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.

KineticJS 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.

2111 questions
6
votes
2 answers

KineticjS: Why was Kinetic.Text verticalAlign property removed? Alternatives?

I'm using the KineticJS text objects with gradient fills etc to act as buttons. But now that the verticalAlign property was recently removed, how do I vertically align my text in its bounding box? Why was the property removed if there are no…
6
votes
2 answers

KineticJS click detection inside animated shapes

OK, I admit I tried to be clever: I thought if I overrode Shape's drawFunc property I could simply draw whatever inside a rectangle and still use KineticJS's click detection. Here's my attempt: var shape = new Kinetic.Shape({ drawFunc:…
Lajos Nagy
  • 9,075
  • 11
  • 44
  • 55
6
votes
3 answers

Android 4+ html5 canvas not redrawing

I am currently developing an android application using phonegap. I have an html5 canvas that I am drawing and animating objects on. It works great on android 2.3, but on android 4+ it is not redrawing the canvas. I tried using both kinetic.js and…
Dan Fischer
  • 235
  • 2
  • 8
6
votes
3 answers

Transform (Move/Scale/Rotate) shapes with KineticJS

I'm trying to build a transform manager for KineticJS that would build a bounding box and allow users to scale, move, and rotate an image on their canvas. I'm getting tripped up with the logic for the anchor…
ChickensDontClap
  • 1,871
  • 4
  • 22
  • 39
6
votes
3 answers

Canvas (Kinetic.JS): multiple layers vs single layer approach

Can anyone explain why (indeed, if) it's best to abstract the major parts of a canvas game to different layers when using something like Kinetic? It of course feels like you should, and so far I have been: one layer for the background, one for the…
Mitya
  • 33,629
  • 9
  • 60
  • 107
6
votes
2 answers

Pinch to zoom on canvas

I'm trying to set a simple zoom in/out functionality on a canvas. I'm using KineticJS to handle touch events and drawing in canvas, but couldn't implement the zoom. KinteicJS have a similar example, but they always zoom on the center while I'm…
KaBoom
  • 61
  • 1
  • 5
5
votes
3 answers

I seem to be using a variable before it is fully created in Javascript, but this works -- why?

Could someone explain this to me? var diagramImage = new Kinetic.Shape(function () { var context = this.getContext(); context.beginPath(); context.lineWidth = 1; //This is crazy tricks. It's part of the KineticJS demo website, but…
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
5
votes
1 answer

Recoloring a shape on mouseover using KineticJS

I have a canvas which will hold a moderate to large amount of shapes (50-500). I have succeeded in drawing the outline of the shape I would like using these tools: function DrawPolygon(diagramLayer, polygon) { var diagramImage = new…
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
5
votes
1 answer

KineticJS: animation performance in Firefox vs Chrome

I'm running an animation using Kineticjs using the Animation module. Now I noticed there quite a big performance difference between Chrome and Firefox. Looking at the framerate I found the following results. Chrome Firefox avg: 50 …
Sjiep
  • 688
  • 5
  • 14
5
votes
1 answer

How to calculate reverse scaling

I'am scaling a stage for example the scale value is decreasing like: 1 0.9 0.8 0.7 0.6 0.5 I want to make an inversion of this values, to increase the scale of the objects in the stage like: 1 1.1 1.2 1.3 1.4 1.5 what is the best way to do this?…
user3414354
  • 291
  • 7
  • 20
5
votes
1 answer

extending KineticJS - custom filter

I'm trying do add contrast as a filter to KineticJS (I know, it's not a filter technically). It works, but I want to add contrast() modifier too (like noise() for Noise filter etc.). Here is my function (after including KineticJS 5.0.1…
long
  • 3,692
  • 1
  • 22
  • 38
5
votes
1 answer

HTML5 drag and drop images from a toolbar to a canvas

I have searched a lot, but I could not find a scenario which is relevant to my need. I want to drag and drop images from a toolbar to a canvas, not from a canvas to another canvas. Please help me on this. Thanks in advance
dnWick
  • 393
  • 3
  • 14
5
votes
1 answer

Poor Pan, Scale performance on Android Webview using HTML5 Canvas and KineticJS

Our Mobile web application includes an interactive designer which we have realized using HTML5 canvas and Kinetic.js. We are trying to render around 353 objects onto the canvas dynamically, of which 178 are text and the rest are lines and…
5
votes
0 answers

How to prevent clicking the background?

I'm a beginner trying to develop a mobile phone game with with Kinetic Js and "phonegap build". I am experiencing a problem which I don't know how to address. I made this test: I just pasted this code here into my index.html and sent the code to the…
Marco Disce
  • 234
  • 2
  • 13
5
votes
1 answer

Smooth KineticJS animation, controlled speed

I am creating a simple plane animation in KineticJS for the fun of it. Currently the animation runs a little jerky I would love to have some easing or tweening although I don't know how to begin. Can anyone lend me a hand with the math?
AndrewMcLagan
  • 13,459
  • 23
  • 91
  • 158