kineticjs

Tween multiple blobs in KineticJs

由 自古美人都是妖i 提交于 2019-12-13 05:05:25
问题 How can I tween multiple blobs in Kinetic JS? I can tween a blob using two set of points, but what about more than that? Here's what I have so far: JS setTimeout(function () { for (var i = 0; i < blobPoints.length; i++) { var tween = new Kinetic.Tween({ node: blob, duration: .5, points: blobPoints[i], onFinish: function () { //this is where I want to call next tween using next set of points } }); tween.play(); }; }, 300); Complete demo here: http://jsfiddle.net/4KLf8/1/ If you notice, it

Not able to get data url when using images in kinetic js

由 孤街醉人 提交于 2019-12-13 04:54:58
问题 I'm using kinetic js to build an application using HTML5 canvas where users drag and drop images and then save the final image. It is giving the following error: Unable to get data URL. SecurityError: DOM Exception 18 Please help. 回答1: It happens when the images drawn onto the canvas and the code are on different server. As quoted from the http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/: " The toDataURL() method requires that any images drawn onto the

KineticJS: How can I export a Stage with an SVG Image on IOS?

由 [亡魂溺海] 提交于 2019-12-13 04:34:44
问题 Using KineticJS I created a stage with a jpg image and an svg image on top. Then I tried to export the stage. It works fine on desktop but not on IOS. I created a JSFiddle to demonstrate this problem http://jsfiddle.net/confile/p6Eey/ Here is the code: <div id="container"></div> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script> var stage = new Kinetic.Stage({ container: 'container', width: 1000, height: 1000 }); var layer = new Kinetic.Layer();

KineticJs: How to import iPhone Retina Images taken by Camera?

由 心不动则不痛 提交于 2019-12-13 04:29:09
问题 I tried to import camera images from iPhone5 retinal iOs7. The following image shows the problem. The stage is the yellow filled rectangle and the image at the top is the image which is imported into the stage. I created a Jsfiddle to demonstrate the problem here: http://jsfiddle.net/confile/45zdm/ I think that there are two problems the first one is that the pixel ration of 2 might be a problem. When I set image.height(stage.height()) The image takes only half the height of the stage. This

KineticJS - Draw free with mouse

由 人走茶凉 提交于 2019-12-13 03:59:08
问题 I'm building a canvas paint tool where the use simply drags his mouse to draw on the canvas. As I understand it lines is the best way for the job. So on mouse down I create a KineticJS Line object and when the user drags I add a point between the last mouse position and the current. Note, I only have one line object that has multiple points. When the user releases his mouse the Line is finished and whenever you click again to draw more, I create a new line object. Problem with this is that if

change width stage from input

由 可紊 提交于 2019-12-13 03:58:39
问题 Could someone help me? I have a stage and image and i want to change width and height from input. this is code and it does no work :/ help me.) var stage = new Kinetic.Stage({ container: 'containerCreator', width: imageWidth, height: imageHeight }); var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function(){ var yoda = new Kinetic.Image({ x: 0, y: 0, image: imageObj, width: imageWidth, height: imageHeight }); layer.add(yoda); layer.add(vrchnyText); stage.add

rotate to mouse kinetic js

由 五迷三道 提交于 2019-12-13 03:04:12
问题 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()

Selecting Kineticjs path by id

由 牧云@^-^@ 提交于 2019-12-13 01:27:03
问题 I am trying to create an interactive map and have been exploring with some of the prebuilt templates. In this each country is created and highlights when the mouse is over them. My question is how would I go about making it highlight another country such a Brazil when any country has a mouseover. Thus how do I go about selecting another object when a country is highlighted. <body> <div id="container"></div> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"><

Kinetic.Line mouseover

由 孤街醉人 提交于 2019-12-12 22:11:34
问题 I am attempting to detect a mouseover on a Kinetic.Line object. According to the docs, Kinetic.Line does have the on function since it is a child of node. The on function lists mousemove and mouseover as supported events. However, it does not seem to work for mouseover or mousemove on a line. Is this by design? Will this feature be implemented? Am I doing something wrong? function canvasTest () { stage = new Kinetic.Stage({ container: "tutorial", width: 400, height: 400 }); var layer = new

KineticJS and Tween Timelines, integrating with GSAP JS

由 大城市里の小女人 提交于 2019-12-12 19:41:18
问题 as of version 4.5.1 the old Transition class has been retired and "KineticJS recommends the GreenSock Animation Platform which integrates seamlessly". I am writing a canvas game using KineticJS which relied quite heavily on that old Transition class but having read up on GSAP's abilities I'm quite keen to upgrade. My problem is that when I try using even the simplest TweenLite functions they are completely ignored by my canvas. I'm guessing I must be missing something obvious because I haven
订阅 kineticjs