kineticjs

问题 I have a problem that after clicking on thumbnail(mini picture that causes change background on canvas),page will start lag and if you more and more click to other thumbnails, lags are very big and other effect is that text does not appear after change image(this is connected with these lags I think again) Could someone tell me where is problem or just look at my code and try to repair it? thanks so my because I really do not know where is problem:( http://codepen.io/anon/pen/ydxIH 回答1: http:

问题 I'm writing an app and using Kinetic JS library to load image from client's computer. The image is contained in a photo object and is initialised as below var photoObj = new Image(); photoObj.onload = function() { var photoImage = new Kinetic.Image({ x: 0, y: 0, image: photoObj, width: photoObj.width, height: photoObj.height, name: "photo", id: "photo" }); photoGroup.removeChildren(); photoGroup.add(photoImage); The object is included in a Kinetic Group object, named photoGroup, which is

问题 I want to downsize a PNG/JPG image in KineticJS without losing quality. I did the following but it leads to very poor quality: var stage = new Kinetic.Stage({ container: 'container', width: 1000, height: 1000 }); var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function () { var someImage = new Kinetic.Image({ image: imageObj, }); // add the shape to the layer layer.add(someImage); // add the layer to the stage stage.add(layer); someImage.scale({ x: 500, y: 500 }

问题 In KineticJS, I would like to add a shape to a layer, and only redraw the most recently added shape, rather than all shapes in that layer. Is this possible? Or maybe some workaroud? (.draw() function redraws all the child nodes on the layer) More details on my situation: I have a layer on which I want to draw a line which traces the movement of an shape across the screen during animation. //create my shapes first var myShape = new Kinetic.Circle({config}); //myShape gets its own layer,

问题 Im having problems with kinetics. I have a stage with kinetics with a one image and text, but that I want is export the stage to a image like myImage.jpg no like [data:image/wIlksoks.e] that it is the callback that return dataUrl() from kinetics. Im trying with this code: stage.toDataURL({ width: 350, height: 350, mimeType: "image/jpeg", callback: function(dataUrl) { /* * here you can do anything you like with the data url. * In this tutorial we'll just open the url with the browser * so that

问题 I have just started using Kinetic JS. If you look at this link: Example Some of the code is here: function update(group, activeHandle) { var topLeft = group.get(".topLeft")[0], topRight = group.get(".topRight")[0], bottomRight = group.get(".bottomRight")[0], bottomLeft = group.get(".bottomLeft")[0], image = group.get(".image")[0], activeHandleName = activeHandle.getName(), newWidth, newHeight, imageX, imageY; // Update the positions of handles during drag. // This needs to happen so the

问题 I have two shapes rather groups which are draggable. When the blue group is dragged it should not overlap the yellow group. heres the fiddle http://jsfiddle.net/bittu4u4ever/3Kprr/ i tried doing some getIntersections but im really a noob in kinetic.js. 回答1: You may think getIntersections() will get you the colliding objects, I thought so too, but it's not true. It only gives intersecting CHILDREN(not all) objects of the container. You can run collision detection logic on your rectangles and

问题 I am having an issue trying to update a drawing that uses a number of different drawing objects. The drawing is similar to an AutoCad drawing and is measured in mm so the scale is already being calculated in order to get the drawing to fit on the stage. When this is calculated the scale is set to one. I have the drawing objects (lines, circles, arcs, etc.) stored in an array. I am trying to update the drawing andd rescale it without clearing the stage and doing a full redraw to improve

问题 We have made an Image annotation tool in one of our cross platform apps (phonegap app), we have been able to get the tool working using KineticJS. Its a great API. But we have a small problem. Here is the scenario: If say i have 10 images on which i did some annotation, and saved the layer as JSON string in say sqllite for each image. Synced my sqllite with server. on page load, checked the server, pulled the layer json, deserialized the json, and added it over the image canvas. The approach

问题 I am looking for the fastest way to find all shapes inside an area. Please try this example in Chrome or FireFox: http://jsfiddle.net/markusleth/FBjKY/ I know how to iterate and compare coordinates, but I am worried about performance. Any suggestions are appreciated. var x1, x2, y1, y2; var shapes = stage.get("Rect"); shapes.each(function (shape) { // calculate if shape is inside x1, x2, y1, y2 }); 回答1: Well, KineticJS has a few intersection functions: intersects(point) Kinetic.Shape