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

0x800a138f - JavaScript runtime error: Unable to get property 'getLayer' of undefined or null reference

Code breaks when anchors overlap. I have anchors for resizing draggable groups of shapes as given in below tutorial. I also have the functionality to delete the selected group. The delete functionality breaks the code when anchors (of two different…
user2330678
  • 2,221
  • 14
  • 43
  • 67
0
votes
1 answer

Kinetic.js / Javascript: calling a variable as a property without using eval()?

I am trying to teach myself HTML5 and JavaScript, and would appreciate any help. I solved a problem by using eval(), and was wondering if there was another way to solve it without using eval(). Everything I've tried doesn't seem to work. I have two…
Sk6
  • 27
  • 5
0
votes
1 answer

Javascript and KinectJS: mouse position on image?

Hoping someone has the time and knowledge to enlighten me. See: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/: Does anyone know the programming to get the position of the mouse curser relative to the postion…
0
votes
1 answer

Kinetic.js "Object has no method batchDraw"

I'm trying to set up a basic Kinetic.js application. I keep getting strange errors all over the place, and there are hardly any references for Kinetic. $(document).ready(function () { var stage = new Kinetic.Stage({ container:…
Jack Guy
  • 8,346
  • 8
  • 55
  • 86
0
votes
2 answers

Put a limit on lower value for resize while maintaining the aspect ratio with the help of kinetic js

I have been stuck on this for quite some time I am trying to allow drag and resize on an image and I found some example on this link: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/ but I also want to…
Aameer
  • 1,366
  • 1
  • 11
  • 30
0
votes
2 answers

Adding a Meteor Chart to an existing Kinetic.JS app

I'm building a game with kinetic.js and I want to display some line charts using Meteor Charts within it. The chart needs to scale with the game canvas and be positioned correctly. Can I embed the chart directly in an existing layer within the app?
0
votes
2 answers

KineticJS - Drawing a complex shape

I would like to create a complex shape in KineticJS. I tried many way and searched a lot and I came to the conclusion that I should create a new Kinetic.Shape with the content. But when I do, the shape is created but with no fill. It is all…
mykadam
  • 3
  • 3
0
votes
1 answer

KineticJS - How to split up objects and files

Me and a group at my university is developing a game on the web using KineticJS. We are using alot of shapes that are displayed, removed and have several actionevents. Right now we havent gotten very far but i still feel files are getting very big.…
Englund
  • 1,067
  • 7
  • 13
0
votes
1 answer

kineticjs tween on android left the original image

I'm using KineticJs to develop a webapp, but i found that when i'm using tween() on android, it always left a original image when the tween starts. And it's also happens on the Kineticjs tutorials page with my galaxy note2. is it a bug? here is my…
0
votes
1 answer

jsPlumb.js and kinetic.js used together

I am creating objects using Kinetic.js.Now i want connect two objects as source and destination using jsPlumb.js.But i am unable to connect them. My code looks like this var end0=stage.find("#"+source.attrs.id); var…
raja
  • 194
  • 2
  • 9
0
votes
1 answer

kinetic js : dragBoundFunc property does not work properly

I have a disturbing issue with kinetic js using dragBoundFunc. I have dragBoundFunc defined on selector group, and it works perfectly not allowing the group overflow on the green rectangle. The erroneous case is follows: 1 - drag an anchor to resize…
px5x2
  • 1,495
  • 2
  • 14
  • 29
0
votes
1 answer

Using Hammerjs events within the Kineticjs Canvas

I am trying to use Hammer.js events within the Kinetic.js canvas and can't seem to get it working. I have tried both of the following: var background = new Kinetic.Rect({ x: 0, y: 0, width: image.getWidth(), height:…
zsoflin
  • 373
  • 5
  • 17
0
votes
1 answer

Kineticjs - can not control scaled image

when you drag images you can control their moving with dragBoundFunc. Is there something similar when you scaling? I want to set an image area in "part of a stage" and when i setScale for this image and make it bigger, i don't want to see parts…
0
votes
1 answer

crop image by other layer

i have two layers in kineticjs stage one of them is a border to the other image i want to crop the image by the border and not have the border on the end image a jsfiddle example is attached i want to keep only the the inner image(the backpack) var…
Eli Y
  • 877
  • 16
  • 41
0
votes
1 answer

Animated particles in shape (canvas + kineticjs)

I use KineticJS to perform a wave motion within a shape. I would now insert in my wave particles that are moving too. Currently I'm doing this: (JSFiddle) window.requestAnimFrame = (function() { return window.requestAnimationFrame || …
Antoine
  • 485
  • 3
  • 5
  • 12
1 2 3
99
100