kineticjs

问题 i want to add the click event only on the stroke of the rectangle and avoid the click inside the rectangle. Here is the code below: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ x: 239, y: 75, width: 100, height: 50, fill: 'green', stroke: 'black', strokeWidth: 4 }); rect.on('click', function () { var fill = this.getFill() == 'red' ? '#00d00f' : 'red'; this.setFill(fill); layer.draw(); });

问题 For now, I have a stage, two layers and images drawn on the leftLayer. I made the images draggable by adding the property draggable: true . All the drag and drop samples that I found (kinetic docs, tutorials, jsfiddles...) are within the same area. How can I do to make items who are drawn on the left layer be dropped only in the right layer , else, make them revert like in jquery (if it's implementable)? This is the jsfiddle that I'm editing. Help! 回答1: What you need to do is clone the object

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

问题 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 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 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;

问题 Here is my pseudo code: var percentage = 0.781743; // no specific length var degrees = percentage * 360.0; var radians = degrees * Math.PI / 180.0; var x = 50; var y = 50; var r = 30; var s = 1.5 * Math.PI; var context = canvas.getContext('2d'); context.beginPath(); context.lineWidth = 5; context.arc(x, y, r, s, radians, false); context.closePath(); context.stroke(); I'm using the KineticJS library to control the shapes I make and redraw them as necessary. My problem is that the above code

问题 I am currently working a project involving KineticJS. I have to dynamically create and delete shapes constantly, but cannot seem to figure out how to do the latter. I've been trying to do: $ myLayer.remove(myShape) because this is what most posts seem to recommend. But, the documentation says that this will remove the layer from the stage and not the shape from the layer. When I try this in project it in fact removes the layer from the stage. So am I doing something wrong or is there some

问题 I' using KineticJS to drawing a logo, both top an bottom lines are bezierCurveTo. I need to draw lines between them and so I need to locate the points inside both curves. What I thought to use was get the X coordinate and get the Y coordinate. Using method bezierCurveTo I can find the position. The problem is bezierCurveTo use the first parameter as percent and my two berzier are not equivalent, so is not a solution for me. Is there any function that given tree points and X returns the Y ?

问题 I've seen an example of this done on the web before, but I cannot find the link anymore. Basically it is a KineticJS example of a draggable box, with lines connected to it. When you move the box around the line will stay connected and redraw to the box's position. I would really just like to know if anyone else has seen the example, or how this could be accomplished. I have googled the example, but I cannot find the answer anywhere. Thanks. 回答1: It's not too difficult to do... Create your box