Stack Overflow
Stack Overflow

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
115
votes
5 answers

Fast and responsive interactive charts/graphs: SVG, Canvas, other?

I am trying to choose the right technology to use for updating a project that basically renders thousands of points in a zoomable, pannable graph. The current implementation, using Protovis, is underperformant. Check it out…
Andrew Mao
  • 35,740
  • 23
  • 143
  • 224
41
votes
1 answer

Kinetic js drag, drop, resize and rotate image

I am trying to combine drag and drop resize image and rotating image on touch, and mine is behaving strange http://jsfiddle.net/littlechad/Kuaxn/ My code is as follows: function update (activeAnchor) { var group =…
littlechad
  • 1,202
  • 17
  • 48
35
votes
9 answers

Scroll the page on drag with jQuery

I have tried using kinetic.js and the code below, however when I try this in IE11 it keeps jumping to the top every time I scroll: $("html").kinetic(); I want to make the page scrollable on tablets and IE10 and 11 so that users can just push the…
ben
  • 653
  • 2
  • 7
  • 16
33
votes
1 answer

Kineticjs vs Raphaeljs

I'm starting a new project using HTML5. Two of the most popular graphical toolkits are KineticJS and RaphaelJS. If you have experience of using these, do you have any advice? Which features do they offer, and is there an advantage in using one over…
Artur Keyan
  • 7,643
  • 12
  • 52
  • 65
27
votes
2 answers

Scaling KineticJS canvas with CocoonJS idtkscale

I got my KineticJS game working inside CocoonJS quite nicely, except scaling the canvas. I have 1024x768 canvas, which is great for iPad 2. But for iPad 4, due to retina screen, the game takes only 1/4th of the screen. CocoonJS says this about the…
pillar15
  • 576
  • 3
  • 11
17
votes
1 answer

Convert HTML5 canvas to IMG element

I would like to resize, stretch an HTML5 canvas in a way that the canvas act like an IMG element: set width-height by pixel, percent... I wonder if is there any way to convert/export an HTML5 canvas to an IMG element, or any way that can make this…
Tony Dinh
  • 6,668
  • 5
  • 39
  • 58
15
votes
5 answers

In Javascript, when performing a deep copy, how do I avoid a cycle, due to a property being "this"?

I have some library code that is cycling endlessly on me. I'm not clear on how to best perform cycle detection and avoidance in javascript. i.e. there's no programmatic way of inspecting whether an object came from a "this" reference, is there?…
Aaron Fi
  • 10,116
  • 13
  • 66
  • 91
14
votes
1 answer

What is the difference between KineticJS draw methods?

What is the difference between KineticJS methods layer.draw(), layer.drawScene() and layer.drawHit()?
anandaravindan
  • 2,401
  • 6
  • 25
  • 35
14
votes
3 answers

Removing objects from a layer using KineticJS

I am currently working a project involving KineticJS. I have to dynamically create and delete shapes constantly, but cannot seem to figure out how to do the latter. I've been trying to do: $ myLayer.remove(myShape) because this is what most posts…
user1724623
  • 141
  • 1
  • 1
  • 3
13
votes
2 answers

Nodejs : Kineticjs in nodejs

I install the package Kineticjs in nodejs and have the following error message: Kinetic.window = Kinetic.document.createWindow(); ^ TypeError: undefined is not a function at…
Huy it
  • 261
  • 1
  • 2
  • 6
11
votes
3 answers

Understanding Canvas & KineticJS layer clearing

I wondered if anyone could shed some light on the way in which layers are managed in Canvas and KineticJS. I'm struggling understand why when i clear(); a layer, then use the draw(); function on that layer again, it comes back with the shapes etc…
Caius Eugene
  • 855
  • 4
  • 13
  • 26
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
11
votes
6 answers

How to listen to Keydown-Events in a KineticJS-managed HTML5-Canvas?

I am trying to add an Event Listener to a Htm5-Canvas which is managed by Kineticjs (the Canvas was created via a Stage of KineticJS). I tried out (using jQuery): $(selector).keydown( function(e) {... } ) with the following Selectors: window (it is…
itinance
  • 11,711
  • 7
  • 58
  • 98
10
votes
2 answers

How can i stop all audio playing using Jquery

I'm updating a div in a page using jquery mobile in order to play some animations. The animations also play sound through use of document.createElement('audio'); My problem is, when I update the page to another animation, the old sound keeps…
David Folksman
  • 225
  • 3
  • 8
  • 24
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
1
2 3
…
99 100