kineticjs

kineticjs add re-size anchors to uploaded image

由 寵の児 提交于 2019-12-25 13:17:10
问题 I am working on a kinetic canvas and need to add resize anchors (on mouseover or click). I know there are many examples on how to add resize anchors but they are all for pre-loaded images and as I am new to kinetic js I am looking for an example of how to add them to a user uploaded image... Here is the js for the uploader //image loader var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); function handleImage(e) { var reader =

Kinetic JS image Magnifier

由 。_饼干妹妹 提交于 2019-12-25 06:05:18
问题 I am trying to follow this example http://www.script-tutorials.com/html5-canvas-image-zoomer/ I get the following error: Object doesn't support property or method 'getContext' here is my script: stage = new Kinetic.Stage({ container: 'container', width: 512, height: 512 }); var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function() { var yoda = new Kinetic.Image({ x: 0, y: 0, image: imageObj, width: 512, height: 512 }); layer.add(yoda); stage.add(layer); };

HTML5 Canvas & KineticJS layer order switches on refresh

由 ╄→гoц情女王★ 提交于 2019-12-25 04:13:09
问题 I am building an animation with HTML5 Canvas and KineticJS. The animation works just fine. However, I've noticed that sometimes on refresh, the layer order of the images I am animating gets rearranged. This switch in layer order seems to happen at random. For instance, I can click refresh 5 times and the layer order is fine... click refresh another 3 times and the layer order rearranges. Can anyone help as to why this random switch in layer order occurs? 回答1: This is your problem right here:

Control Points in Canvas shape

由 倖福魔咒の 提交于 2019-12-25 03:19:26
问题 I have made canvas Shapes(squares) in kinetic js having 4 control points on each of their vertices.A user can click and drag these control points and distort the shape any way he/she pleases. I also tried adding control points in the mid-point of each line by adding additional anchors and plugging them into the Bezier Curve..The js fiddle is http://jsfiddle.net/Lucy1/opsy1pn9/4/ The corresponding JS code is var room = new Kinetic.Shape({ x: 0, y: 0, width: w, height: h, stroke: "blue", fill:

Detecting mouse events on Kinetic.Line

由 女生的网名这么多〃 提交于 2019-12-25 03:05:04
问题 I'm trying to detect mouse events (currently mousedown) on a Kinetic.Group containing a grid made of Kinetic.Line's I'm listening to the mousedown event on the Layer. When it happens that i hit a line, no event is fired. var grid = new Kinetic.Group({ x: 0, y: 0, width: this.group.width(), height: this.group.height() }); grid.on("mousedown", function(){ alert("At least this one should fire!"); }); var gridX = this.gridWidth, gridY = this.gridHeight; this.group.add(grid); while(gridY < this

KineticJS: How can I use an SVG Sprite with KineticJS Sprites?

由 六眼飞鱼酱① 提交于 2019-12-25 02:58:40
问题 I have a SVG sprite with looks like the following schema: Image Image Image Image Image Image Image Image Image Where Image is an image and all nine images are the sprite. They are all on one layer. There is a tutorial for sprites with PNG files here but I could not find how to make SVG files work. How do I set the coordinates for the frames when I use an SVG sprite? How do I use an SVG sprite? Edit: Here is the code for the tutorial. <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px;

How to create ad-hoc tweens sequence without recursion in KineticJS?

由 放肆的年华 提交于 2019-12-25 02:46:09
问题 is it possible to create tweens sequence in KineticJS according to data saved in array without recursion? This is my current solution including recursion: function tweenFunc( image ) { setGlobalCoordinates(); tween = new Kinetic.Tween({ node: image, duration: 1, x: x, y: y, rotation: rot, onFinish: function(){ if ( counter++ < arr.length ) { tweenFunc( image ); } } }); tween.play(); } I would like to have solution which creates tweens before first animation and following tweens start from

KineticJS object with added property to JSON

由 六月ゝ 毕业季﹏ 提交于 2019-12-25 02:06:53
问题 I am trying to serialize KineticJS object (with one added property) to JSON, but if I call the JSON.stringify(test); , it returns only JSON representation of KineticJS object without my added property. Does anybody know, where could be a problem, please? test = new Kinetic.Line( { points : [ 29, 30, 31, 32 ], stroke : 'black', strokeWidth : 2, lineJoin : 'round', id : '#line' }); test.obj = "my own property"; JSON.stringify(test); returns {"attrs":{"points":[{"x":29,"y":30},{"x":31,"y":32}],

rotate to mouse kinetic js

由 自作多情 提交于 2019-12-25 01:38:14
问题 I looked at many examples but so far nothing worked. I want the circle to rotate on mousemove and it is rotating centered, so no problems so far. But, it does a 180 jump when I pass half of the stage. So everything is fine till I pass the half of the stage, clearly I'm missing something. Math.atan2 gives me an error: the circle jumps to the (0,0) of the stage. Please help I really need this badly. Thanks in advance! new Kinetic.Tween({ node: cGrad1, x: stage.getWidth()/2, y: stage.getHeight()

Drag and zoom text with Kineticjs

由 风流意气都作罢 提交于 2019-12-24 19:14:41
问题 I am trying to zoom and pan a text which is draggable already. All the examples are on images or shapes and it seems I cannot adapt it to a text object. My questions are: Do I have to use the anchors or is any simpler way zoom a text with Kineticjs? I found an example regarding zooming a shape and the code crashes here: var layer = new Kinetic.Layer({ drawFunc : drawTriangle //drawTriangle is a function defined already }); Can we call a function while we are creating a layer? I usually create
订阅 kineticjs