kineticjs

问题 I'm trying to get KineticJS to work with Google Closure Compiler. KineticJS, however, generated it's getters & setters based on the name of the variables. Something like this: // add getter and setter methods Kinetic.Node.addSetters = function(constructor, arr) { for(var n = 0; n < arr.length; n++) { var attr = arr[n]; this._addSetter(constructor, attr); } }; Kinetic.Node.addGetters = function(constructor, arr) { for(var n = 0; n < arr.length; n++) { var attr = arr[n]; this._addGetter

问题 I have a draggable line with a stroke width of 2 and want the user to be able to drag the line even if he clicks and drags near the surrounding area. As per my understanding, the way to do that is to define a custom drawHitFunc for the line. I adapted the code from tutorial here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/ to define my custom drawHitFunc for the line. My custom draw hit function is simple--same line but much thicker (25

问题 Using this JS Fiddle I am able to dynamically create canvases and drag and drop images between all the different canvases. var next = 4 function addCanvas() { // create a new canvas element var newCanvas = document.createElement("canvas"); newCanvas.id = "addedcanvases" + next; //added this to give each new canvas a unique id next++; newCanvas.width = canvasWidth; newCanvas.height = canvasHeight; // add a context for the new canvas to the contexts[] array contexts.push(newCanvas.getContext(

问题 I am trying to use jquery image lens on Kinetic JS canvas http://jsfiddle.net/user373721/7f8qM/15/. The challenge I have is how to find the id of the image in the canvas, I tried: myImage.onload = function () { var yoda = new Kinetic.Image({ x: 0, y: 0, image: myImage, width: 400, height: 400, id: 'thumb' }); layer.add(yoda); layer.draw(); }; myImage.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; $('#thumb').imageLens({ lensSize: 200 }); Had no luck, I would appreciate

问题 I need to draw animated gif with KineticJS, however, I failed when I followed the image tutorial. Is there any way to draw animated gif? 回答1: Use a KineticJS Sprite. Animated GIF is the (very) old way of doing this. It doesn't work very well, it's very flaky performance-wise and inconsistent in different browsers. It also eats memory when lots of animated GIFs are displayed at once and slows everything down. Believe it or not it's better to handle the animation with code instead of within the

问题 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:/

问题 I'm using HTML5 canvas and the .toDataURL() function through KineticJS's .toDataURL() method. The canvas uses images that my users uploaded to the site, which are stored on a different machine and subdomain farm1.domain.com . Problem: When .toDataURL() is called, I get the error SECURITY_ERR: DOM Exception 18 Is there a way around this? I also get the same problem if the user access the page via domain.com and the image is hosted at www.domain.com . Attempt: I added the following lines to

问题 I have a specific problem on my designer drawing tool in Canvas HTML5. I am developing an action history system (Undo & Redo). I am building my system on projeqht 's answer on this question with serializing the layers in history array. The core, the idea of the solution is working but I have a strange problem. When I hit Undo it creates the new layers, but the old ones are not disappearing. I will attach my sourcecode and I will attach screenshots as well so you can see what is happening:

问题 Apologies if this has been asked elsewhere but it's pretty hard to phrase as it is so I couldn't find anything. Is there any way to implement masks in canvas? For example, using shapes only (no images) I draw a house with a window. I also have a shape representing a person. I want that person to appear at the window - but obviously only so much as the window allows should be visible of the person. The rest would be masked. I thought about emptying the part of the house occupied by the window,

问题 I am learning kineticjs through tutorials provided at http://www.html5canvastutorials.com, things are good and easy to understand but, I am having issue in understanding the getIntersection function that i want to use among different objects while dragging to detect collision / overlapping objects. As far as I have understood the example the getIntersection function expects a position and checks if its intersecting with any other object or not.. Though I got them but with some issues. I am