kineticjs

i have 2 images on my stage underneath an overlay image of 2 frames. The user can drag each image as if they were positioninng each image inside a photo frame. The problem i have is the yoda image in this example can overlap and appear inside the darth vader frame on the left (and vice-versa), as shown here: jsfiddle here: http://jsfiddle.net/vTLkn/ Is there a way of placing the images inside some form of container or rectangle to stop this so they cannot appear inside another 'frame'? The final page could end up having up to 5 or 6 frames and images with each image able to be scaled up or

I have a vertical and a horizontal lines and a circle on my stage, trying to keep the circle centered on the corssoing of the two lines when I move either line, here is my script that does not work: var cy = 512; var cx = 512; var gy = 0; var gx = 0; var stage1 = new Kinetic.Stage({ container: 'container', width: 1024, height: 1024 }); var layer = new Kinetic.Layer(); var circle = new Kinetic.Layer(); var circle1 = new Kinetic.Circle({ x: cx + gx, y: cy + gy, radius: 140, stroke: '#00ffff', strokeWidth: 4, opacity: 0.5 }); circle.add(circle1); var GreenLine1 = new Kinetic.Line({ points: [0,

Is it possible to export Kinetic JS object to SVG? Or workaround is to convert Kintetic JS's canvas to SVG. EDIT: The best is to use fabricJS since it supports canvas to SVG rendering while working with fabric objects. I accepted Phrogz's answer since it also does conversion canvas to svg without using some other library for drawing on canvas. EDIT 2: OK, i messed up, Phrogz's library is wrapper around canvas element so you use it's methods to draw on canvas (I thought that it just 'listens' on canvas and creates SVG paths). So the best solution is fabricJS definitely. vale4674 The best

I'm using Kineticjs and I'm defining a rect event like this this.rect.on('click tap', function(){ foo(); }); The event is fired when I left-click, but also when right-click. How can I avoid to fire this event with right-click? (I can't disabled the right-click in the page because I want to open a context menu if I rightclick over the rect) Thank you You need to filter out right mouse click this.rect.on('click tap', function(e){ // 1:left, 2: middle, 3: right, for IE 8, e.button != 2 if (e.which != 3) { foo(); } } 来源： https://stackoverflow.com/questions/15039915/kineticjs-right-click-fires

I am trying to add a 3D cube to Kinetic JS canvas to show the x,y,z rotation. I found this article http://www.tonicodes.net/blog/combining-three-js-and-kineticjs . I worked with version 3.8, When I tried to follow the example using the version 4 of Kinetic JS I got this error, Unable to get property 'appendChild' Any suggestions, to solve it or a better method to include 3D cube in the canvas. complete project http://jsfiddle.net/user373721/hXw6D/1/ I found this perfect example http://html5example.net/entry/html5-canvas/html5-canvas-pre3d-rotating-cube , unfortunately it is based on pre3d.js