Search the Community
Showing results for tags 'kineticjs'.
Found 9 results
-
Hi, After image is drop into container , I want to move copy of the original image to be move when original image dragend within container. I tried but it display copy image each time when original image dragend. can anyone help me? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <style> body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } #toolbar{ width:350px; height:35px; border:solid 1px blue; } </style> <script> $(function(){ var $house=$("#house"); $house.hide(); var $stageContainer=$("#container"); var stageOffset=$stageContainer.offset(); var offsetX=stageOffset.left; var offsetY=stageOffset.top; var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); var image1=new Image(); image1.onload=function(){ $house.show(); } image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"; $house.draggable({ helper:'clone', }); $house.data("url","house.png"); // key-value pair $house.data("width","32"); // key-value pair $house.data("height","33"); // key-value pair $house.data("image",image1); // key-value pair $stageContainer.droppable({ drop:dragDrop, }); function dragDrop(e,ui){ var x=parseInt(ui.offset.left-offsetX); var y=parseInt(ui.offset.top-offsetY); var element=ui.draggable; var data=element.data("url"); var theImage=element.data("image"); var image = new Kinetic.Image({ name:data, x:x, y:y, image:theImage, draggable: true, dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); image.on("dragend", function(e) { var points = image.getPosition(); var image1 = new Kinetic.Image({ name: data, id: "imageantry", x: points.x+65, y: points.y, image: theImage, draggable: false }); layer.add(image1); layer.draw(); }); image.on('dblclick', function() { image.remove(); layer.draw(); }); layer.add(image); layer.draw(); } }); // end $(function(){}); </script> </head> <body> <div id="toolbar"> <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br> </div> <div id="container"></div> </body> </html>
-
Hi there, I am using GSAP with Kineticjs and I am very happy with the combo. One of the things I like most about GSAP - alongside its features and super performance - is the way it helps me organizing my code and overall workflow. I think Kinetic and GSAP are a very good match for all sort of canvas-based applications. I have a couple of questions/doubts about the Kineticjs GSAP plugin - which I use a lot (the autoRotate support provided by the kinetic+bezier plugins saved me literally hours of pain). The questions are quite Kinetic-specific but this forum feels like the right place to discuss this topic. The GSAP Kinetic plugin handles drawings automatically by default (unless "autoDraw" is set to false - that took me quite a while to find!). On the other hand Kinetic has recently introduced batchDraw as a way to minimize layer redrawing by "batching up" updates in a special animation. I am not 100% sure what the best drawing strategy is when the two libs are combined: - Should the GSAP plugin be changed to use layer.batchDraw instead of layer.draw by default with autoDraw=true? Or should that be configurable (and when would one pick one vs the other)? - One should set autoDraw=false and handle updates manually by calling layer.batchDraw onUpdate? I currently use the latter almost always as it feels like I am having more control on what gets drawn (for example when animating many groups/shapes belonging to the same layer simultaneously in different tweens/timelines). In my understanding this means each GSAP "tick" queues up drawing requests into a Kinetic Animation which then performs the actual drawing when its own RAF fires - and that does not seem very efficient (as there are 2 RAF at the same time). Please correct me if I got it all wrong. Ideally I would like the GSAP plugin to do "the right thing" with batching (it seems it sort of does already?) - but would that work reliably when shapes belonging to the same layer are animated by different tweens/timelines simultaneously (that's my most frequent use-case)? Many thanks to the group for any advice on this. Keep up with the great work.
-
Hello, I was wondering if it's possible to 3D-Rotate KineticJS objects (shapes). With Tweenmax. If you happen to have some examples please let me know. Thanks.
-
Hi there, i'm developping a kind of tactical rpg game using html5 canvas and kineticjs to display most of the elements. i've just started to set up the first animations and tried out gsap to manage most of it. it's working pretty great for now. But i've encountered a problem recently and can't seem to understand why it's not working. i'll try to explain clearly here : i have lifebars drawn on my canvas and they need updates when one of the character on screen takes damage. my lifebars are Kinetic.Rect with a linear gradient fill with a stroke. i can't manage to make my tweenline update the fillLinearGradient on my Kinetic.Rect. i made some tests and there is no problem updating a simple fill color in my simpleFillRect like this exemple : tweenLine.to( simpleFillRect, 4, { kinetic: { fill: 'green' } } ); but i can't update the properties needed for linear gradient : tweenLine.to( linearGradientFillRect, 4, { kinetic: { fillLinearGradientStartPoint: [ 0, 0 ], fillLinearGradientEndPoint: [ 200, 0 ], fillLinearGradientColorStops: [ 0, 'blue', 0.5, 'yellow', 1, 'blue' ], } } ); i wondered if it was because these properties are array of values, and particularly the color stop array. actually it's even throwing an error on every frame : Uncaught TypeError: Object [object Array] has no method 'charAt' i then tried this kind of code : tweenLine.to( linearGradientFillRect, 4, { kinetic: { fillLinearGradientStartPoint: ''+[ 0, 0 ], fillLinearGradientEndPoint: ''+[ 200, 0 ], fillLinearGradientColorStops: ''+[ 0, 'blue', 0.5, 'yellow', 1, 'blue' ], } } ); but then it just does nothing. what am i missing here ? by the way, thx for all the job you done on this api. it's amazing of simplicity and readability ! really pleasant to discover and dig into this ! and please, excuse my poor french english !
-
Hello, I was wondering if TweenMax could (with a plugin) tint kineticjs objects or images. And by tint I mostly mean colorize them. I located another thread that showcases this but for easelJS objects. Thanks in advance.
-
OLD VIDEO DELETED - SEE BELOW Here is a rough-in of video as basis for JV request. I want to improve the current display animation (Kineticjs) but I am torn with the need to work on the wider issues as well as expanding the plain text instructions to show shunting and block controls. If anyone would like to help, I think we could bring the wonders of Kineticjs and GSAP to many more people for mutual benefit including their increased productivity. I also have a web site at glasier.hk. Thanks
-
I'm using the KineticPlugin and DirectionalRotationPlugin with a Timeline, and I noticed that the first timeline rotation works, but the subsequent one did not. Debugging the KineticPlugin.js source, I noticed that _directionalRotationExp.test(val) would evaluate to true on the first timeline 'to' action, and then false on the second one, even for the exact same value. This is what was causing the second action to fail to rotate. I'm not Regex expert, but it appears to be due to the the global flag on the regex. See: http://stackoverflow.com/questions/1520800/why-regexp-with-global-flag-in-javascript-give-wrong-results When I remove the 'g' from the regex definition, or recreate the regex inside the plugin definition, the test passes as expected, and everything works as expected. Have I indeed found a 'bug', or is there something I'm doing wrong to cause this to happen? My code looks something like this: var tl = new TimelineMax(); tl.to(obj, 2, { kinetic: { rotationDeg: 270 + '_cw' }, }); tl.to(obj, 2, { kinetic: { rotationDeg: 290 + '_cw' }, }); tl.play(); thanks!
-
Hello, I was working with the new KineticJS version and the 2D Physics from GSAP. Although there is no visible error, I can't seem to animate an element the way I used to, with TimelineMax/Lite and "onUpdate:stage.draw", "onUpdateScope:stage" Anyone has any ideas or has faced similar problem? I have set up a codepen here: http://cdpn.io/lzkbu Thanks in advance!
-
Hello, I'm trying to animate a rectangle created with KineticJS, however I keep getting "Uncaught TypeError: Cannot read property 'setX' of undefined" the code is the following: var scrub = new Kinetic.Rect({ x: 0, y: 0, width: 4, height: 120, fill: '#ff3019', draggable: true, id:'scrub', name:'scrub', dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); TimelineMax({paused:true}); tl.insert(TweenMax.to(scrub,5,{css:{setX:500},onComplete:function(){ console.log('to 500'); }})); tl.insert(TweenMax.to(scrub,5,{css:{setX:800},onComplete:function(){ console.log('to 800'); }})); tl.play(); Do you guys have any idea why is this throwing an error? Thanks in advance!
