kineticjs

I have a body simulated with Box2Dweb and an image attached to the body. I want to take the body transformation matrix and apply the transformation to the image (draw the image with the transformation), so that its position and orientation (relative) on the screen matches that of the body. I can't find a function for using with a transformation matrix in KineticJS. There are separate functions for moving and rotating, and there's a Kinetic.Transform class which holds some 'matrix' inside, but I have no idea what to do with it then. There's also a _setTransform function somewhere, but again, no

How I can use blur filter in HTML5? I find this: Kinetic.Filters.Blur(imageData, config ) and Parameters: imageData {Object} config {Object} config.radius {Integer} Explain to me with an example that how I can do this. var image = new Kinetic.Image({ x: 10, y: 10, image: imageObj, filter: Kinetic.Filters.Blur, filterRadius: 20 }); Checkout this tutorial: http://www.html5canvastutorials.com/kineticjs/html5-canvas-tween-blur-filter-with-kineticjs/ 来源： https://stackoverflow.com/questions/16076008/how-does-blur-filter-work-in-html5-kinetic-filters-blur

I have a canvas which will hold a moderate to large amount of shapes (50-500). I have succeeded in drawing the outline of the shape I would like using these tools: function DrawPolygon(diagramLayer, polygon) { var diagramImage = new Kinetic.Shape(function () { var context = this.getContext(); context.beginPath(); context.lineWidth = 1; context.strokeStyle = "#ff0000"; var lastVertice = polygon.Vertices[polygon.Vertices.length - 1]; context.moveTo(lastVertice.X, lastVertice.Y); for (var i = 0; i < polygon.Vertices.length; i++) { var vertice = polygon.Vertices[i]; context.lineTo(vertice.X,

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 httpd.conf within virtualhost and restarted the apache service. Header add Access-Control-Allow-Origin

I'm trying to write my first HTML5 game using a combination of Canvas and the excellent KineticJS library and I've hit a bit of a wall early on. What I want to do is ask the user to enter their name in a box in the game. Having done some research, i can't see any way of doing this outside getting a floating HTML element over that part of the canvas I'm using. Is this correct? Having grown up on a lot of Flash and web games, I'm sure each time I have to input a name or save file name, it's done directly into the game itself and it doesn't rely on the HTML to generate it? Any advice on how to do

I have a trouble in Kineticjs, in my code: var G1=new Kinetic.Group() var sq=new Kinetic.Rect({ x:0, y:0, name:"sq" }) var line1=new Kinetic.Line({ Points:[0,0,10,10], name:"line1" }) var line2=new Kinetic.Line({ Points:[0,0,50,50], name:"line1" }) G1.add(sq).add(line1).add(line2) I know that to get the children from G1 just type "G1.getChildren()". But to get the children that has same type for example type Kinetic.Line I don't have any idea. Please help me, tahnks sorry for not having a tutorial on this, but you can select children by type like this: var shapes = layer.get('Line'); in

I'm a newbie to KineticJS and have been going through the tutorials. I want to take an image that has a 'front' and rotate it a random number of degrees and then have it move forward a number of pixels/inches in that new direction. I was able to use this rotation tutorial to rotate my image. I see how to use transitionTo to send an image to an x/y coordinate. I'm having trouble tying the two together. I feel like I need randomly generate e a new x/y coordinate and then determine the degree difference between where my image is pointing and a line drawn from the center of the image to the new x

There is a great tutorial Selecting Multiple Objects with KineticJS that teaches you how to create a selection box in HTML Canvas in order to select multiple objects, but the author Michelle Higgins wrote his code to select object that embraced by the selection box. The following JavaScript code expresses the algorithm: var pos = rectSel.getAbsolutePosition(); //get the extents of the selection box var selRecXStart = parseInt(pos.x); var selRecXEnd = parseInt(pos.x) + parseInt(rectSel.attrs.width); var selRecYStart = parseInt(pos.y); var selRecYEnd = parseInt(pos.y) + parseInt(rectSel.attrs