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

Which attribute to get XY from a contentMouseover event?

I am using the contentMouseover event on my stage to show the user the XY-value of the pointer position. What I observed is that different browsers have different attributes of the event object. On Opera the event object has x,y attributes, on…
Moonseeker
  • 78
  • 3
0
votes
1 answer

KineticJS polygon multiple stroke colors

Is it possible to have multiple stroke colors for a KineticJS regular polygon? Here is a fiddle of just a regular pentagon http://jsfiddle.net/BrianSpry/wNT4D/. Essentially I want to be able to have a stroke: 'insert different color' for each…
Brian
  • 22
  • 6
0
votes
2 answers

Giving a canvas a class

I need to give the canvas I have initiated a class but am not sure how to do this. Apologises if this is a silly question I have wrecked my head over this. Any help would be greatly appreciated, Melissa function initCanvas(id) { stage = new…
0
votes
1 answer

Drag bound not working for a resized image in kineticjs

I am using Kineticjs. I am trying to have bound (dragBoundFunc) on the drag like the one below (http://jsfiddle.net/m1erickson/n5xMs): dragBoundFunc: function (pos) { var X = pos.x; var Y = pos.y; if (X <…
Aameer
  • 1,366
  • 1
  • 11
  • 30
0
votes
1 answer

kinetic.js absolute line position instead of relative position

I am trying to get the absolute position of a line based on the canvas's top left corner. However, I can only seem to get back the relative position(coordinates) based on the position of the line when it was originally drawn. var line = new…
0
votes
1 answer

kineticjs - set position of multiple images on canvas within a loop

How can I set positions of multiple images on canvas within a loop? The following seems to work with: for (var i=1; i<10; i++) { images[i]=new Image(); images[i].onload = function() { drawImage(this, 1, 1, i*50, 700, "bulb"+i); // THE…
0
votes
1 answer

KineticJS image zoom

I'm working on a project where I have kineticJS regular polygons fillpatterned with images that I would like to zoom out on hover. Currently I'm using this.setFillPatternScale(zoom) in order to zoom out, but this simply changes the background…
Brian
  • 22
  • 6
0
votes
1 answer

Can KineticJS combine images?

Currently working on building a graphical map out of 64x64 tiles - some of these maps can exceed 50x50, so there's sometimes some hefty frame rate decrease when trying to tween it. Once these tiles are in place, they NEVER get changed/removed - so…
CodeMoose
  • 2,964
  • 4
  • 31
  • 56
0
votes
0 answers

Kineticjs createImageHitRegion not working

So I am making this game where you will be able to drag images around in the medallion area. There is a foreground image of the outer ring of the medallion that has a image hit region on it so you can drag the images underneath it. I had it working…
mdurchholz
  • 523
  • 1
  • 4
  • 16
0
votes
1 answer

KineticJS changing coordinates for objects

I can not understand why there is a differential displacement Result . Polygons and text shifted uniformly, line relative error polygons shifted. function setNewPosition(x, y) { var lines = stage.find('Line'); …
Sergey M
  • 93
  • 2
  • 4
0
votes
2 answers

Kineticjs: Rotate a group around a point

How can I rotate a group of objects around a point? I have a set of shapes in the same group and I would like to rotate it around an arbitrary point. I made an example, but it didn't work very well: http://jsfiddle.net/cequiel/Fn5Ba/2/ In the above…
Cequiel
  • 3,505
  • 6
  • 27
  • 44
0
votes
0 answers

Using KineticJS with ScriptSharp

i am currently porting an Silverlight Project to HTML/Javascript. After some research i decideed to use ScriptSharp instead of Javascript and using KineticJS as UI Layer. But it seems ScriptSharp doesnt support the KineticJS Api atm. I guess it…
Thomas Haller
  • 199
  • 1
  • 11
0
votes
1 answer

How can I save dataURL to a mysqli database not through the URL?

I want to save a dataURL generated from a HTML5 canvas to a MYSQLI database. Everything I am finding is telling me to post it in the URL and then handle it on the next page. The dataURL is to long for that as I have other things as well, and in…
gikygik
  • 421
  • 9
  • 26
0
votes
1 answer

Kinetic JS: Is there a callback after adding layers to a stage?

I've got a loop that I run from a JSON feed. Everything loads fine. Items are on the screen, but I want to run some code as soon as my loop is finished. I placed the code immediate after my loop (in this case a jQuery .map). It doesn't recognize…
Tom V
  • 453
  • 4
  • 12
0
votes
2 answers

How to show tooltip on the dynamic images using KineticJS

I want to show the tooltip on the dynamic images inside the canvas. Here is path of the image on which I want to show the tooltip.(I want to show the tooltip on the Green and Gray images). enter link description here Here is my code I am using to do…
Vijay
  • 111
  • 12
1 2 3
99
100