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

How can resume animation Kineticjs canvas?

I have problem with resume animation after stop it. Any suggestion ? I using kineticjs to make element run along the path, after i reach the end, the animation stop for 2 second then start again. here my code : var stage = new Kinetic.Stage({ …
NevenHuynh
  • 6,589
  • 5
  • 22
  • 25
0
votes
1 answer

Make Kinetic JS Rectangle multi-clickable

Can I make a Kinetic.Rect multi-clickable. Can I fill the rectangle multiple images and open different things on click of each image?
0
votes
1 answer

kineticjs canvas overlapping another canvas

I'm attempting to build an application that uses KineticJS to overlap another element. Ideally the background application could be simply another div with a photo in it or something as complex as Google Maps. What I'm trying to accomplish is a proof…
0
votes
1 answer

Kineticjs - free rotate on image

I need help only having the anchors for rotating. Right now there is five anchors and I don't know how to get rid of all of them except the rotate one. I would also only like the anchors to show when the user hovers over the image Here is my…
gikygik
  • 421
  • 9
  • 26
0
votes
1 answer

kineticjs unable get the data url and Out of Memory due to file size too big.

Recently i help my company create a online editor photo tools. We would like to compile the final output to a huge size (H:5292 W:6000). And customer have submit 2mb images to the canvas. I have get the message of kineticjs unable get the data url.…
0
votes
1 answer

Kinetic canvas with user text field input

I've pulled out most of my hair trying to find a solution to no avail. I know this must be easy but being a javascript neophyte I can't seem to wrap my head around it and am hoping someone can help me out!!! I'm trying to create a simple canvas…
0
votes
1 answer

Scaling and touch interaction on Retina screens

I have a problem similar to one described in the following questions. KineticJS : scaling issue while using custom clipFunc on 2x pixel aspect display In my application: (please try on retina ipad vs normal ipad or desktop browser, even iOS…
Ani
  • 1,655
  • 3
  • 23
  • 37
0
votes
3 answers

KineticJS clearRect equivalent

I am now entering Kinetic and it has made it far easier for me to draw on canvas. However, building a game app, I need to clear the rectangle on every animation request. They're controlled by an fps cap script, but still, there are about 50 updates…
gchiconi
  • 624
  • 1
  • 7
  • 17
0
votes
2 answers

Generic: Naming structure and drawing KineticJS

This one takes a bit more to describe, sorry for the shorter title. I currently do not have my code in front of me but might update this with the full details of how it works and where the problem is located. Basically I notice that without doing a…
Jordan Ramstad
  • 169
  • 3
  • 8
  • 37
0
votes
2 answers

Affecting KineticJs.Image by css

Hello i'm working on a project that requires canvas manipulation. I need to draw an image and have to move it within the canvas. Which was not so hard to accomplish.. However i need to change my cursor into "move" when hovering the image like img{ …
DonkeyKong
  • 808
  • 1
  • 10
  • 24
0
votes
2 answers

Setting an object's property afterwards?

I am trying to work with KineticJs, and want to have objects, so I can handle the elements easily. Here is my code. It won't work and I don't know why. (I don't really know oop, just learning) $(function(){ var stage = new Kinetic.Stage({ …
godzsa
  • 2,105
  • 4
  • 34
  • 56
0
votes
2 answers

Kinetic JS not working from external script file?

So I want manipulate canvas, but Kinetic JS doesn't seem to work, don't know why. This code is from a tutorial: $(function(){ var stage = new Kinetic.Stage({ container: 'gridalea', width: 172, height: 720 }); …
godzsa
  • 2,105
  • 4
  • 34
  • 56
0
votes
1 answer

Is it possible to use Canvas or KineticJS to create Mesh Density Animation?

I have been asked to create animation like this http://vimeo.com/42731134 by using HTML5 Canvas or , KineticJS(Filters with image). I did the search with keywords like, "canvas mesh animation", "KineticJS mesh animation" but did not come out…
Kongfupanda
  • 19
  • 1
  • 6
0
votes
1 answer

kinetic layer is not working on touch event in javascript

I am trying to draw a line when user touch the Screen of Android/Iphone Device. I am using kinetic-v4.7.2.min.js. It works perfect on DeskTop. But not working on Devic. So i just change the mouse click events to Touch events. But, still its not…
Bhoomika Brahmbhatt
  • 7,404
  • 3
  • 29
  • 44
0
votes
1 answer

Kineticjs: Avoid a shape receives any mouse event

In the following example I have two shapes, a rectangle and a semitransparent circle: http://jsfiddle.net/cequiel/zZ22s/ var stage = new Kinetic.Stage({ container: 'canvas', width: 800, height: 600 }); var layer = new…
Cequiel
  • 3,505
  • 6
  • 27
  • 44