kineticjs

问题 I'm trying to change the size of an HTML5 canvas element created by the KineticJS framework--that is, not the objects inside the canvas, but the element's size. Since the jQuery .animate function can't be used in this matter (it changes CSS, I want it to change the actual attributes of the element), I had to develop my own function that uses the internal stage.setSize(width, height) function provided by the KineticJS API. I have no experience at writing animation functions at all, so I might

问题 I have done this without kinetic.This piece of code is working fab as I wanted. --fiddle without kineticjs. Take a look Now I want to do the same code with kineticjs. Here is is what I have done till now--fiddle with kineticjs. The lines don`t move at all?where am I going wrong?I have spent the entire day but couldnt figure out the problem. This is my javascript with kinetic.results cannot be seen in fiddle because there is no option for including kineticjs.though I have put my code up there

问题 I have a variable that looks like this: var simpleText = new Kinetic.Text({ text: 'where text goes', fontSize: 24 }); How do I insert a line break where the text goes. I've tried: text: 'where text goes \n where text goes', text: 'where text goes \n\n where text goes', text: 'where text goes \r\n where text goes', text: 'where text goes <br /> where text goes', text: 'where text goes \n' + 'where text goes \n', text: 'where text goes ' + 'where text goes ', text: 'where text goes ' + 'where

问题 I have two layers generally representing a large background and some content on top of it. I have made the background draggable but when dragged, it covers the content of the other layer. Is it possible to keep it in the background while dragging it? I have tried binding the drag events with .moveToBottom() for the background group (later added to backgroundLayer) like that: groupBackground.on('dragstart',function(){ groupBackground.moveToBottom(); }); groupBackground.on('dragmove',function()

问题 Need some help.. I don't know if it's the kinetic.js library problem or I'm doing something wrong here.. I am loading 2 images on windows.onload and then there are set of images outside the canvas and onclick of the images I'm placing those inside the canvas which is working fine..(I have used just a single function to load any image from outside the canvas by doing this.. Set of images : <li> <a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i3'))"> <img src="<?php

问题 how to use draggable and click on same node in kineticjs? when using draggable then a click event fires also after drag. in jsfiddle, http://jsfiddle.net/matobaa/LZ5tt/ Here is the code... var stage = new Kinetic.Stage({ container: 'container', width: 640, height: 480 }); var layer = new Kinetic.Layer(); var oval = new Kinetic.Ellipse({ x: 100, y: 100, radius: 50, stroke: 'red', draggable: true, }); oval.on('click', function(evt) { alert("clicked!"); // Will not be triggered after drag })

问题 First of all drag and drop works correctly in my stages in version 4.3.0, so I just want to understand why I get the following problem with 4.3.3. I have three stages. One sits in a container in a document in an iframe. The others sit in containers in the iframe's parent document, one displaying a complex layout of shapes and the other a single simple shape for testing. The document in the iframe which controls all the action has a viewfinder overlay that drags and drops correctly. However

问题 I'm creating a script where image is draggable and can change the image source when double clicked. Moving the image works ok and when double clicking the image (event is dblclick) the image changes but same time appears as double where another identical image appears in the original position. Code is: var picture = new Image(); picture.onload = function() { var picture = new Kinetic.Image({ x: 10, y: 10, image: picture, draggable: true, width: 100, height: 200 }); picture.on('dblclick',

问题 I want to draw a line on a canvas with context.globalCompositeOperation = 'destination-out'; context.globalAlpha = 0.118; The result looks like this: The background if the image is a yellow rectangle. I use a circle to drag and drop it over the image and it will paint the line. As you can see my drawn line is not so smooth. You can see the circles and you do not have a compound line. I created a JSFiddle here: console.clear(); var history = new Array(); var imageObj = new Image(); var img =

问题 I am creating a circle as a group of kinetic arcs. When I cache the group and subsequently call the draw function on the layer, three quarters of the circle are hidden. I think layer.draw may require an offset but really I'm only guessing. When I remove the fill, stroke or opacity from the arc or the object literal from the cache call then the full circle is displayed. http://jsfiddle.net/leydar/gm2FT/5/ Any insights gratefully received. function createArc(n){ var arc = new Kinetic.Arc({