kineticjs

问题 I have tried using kinetic.js and the code below, however when I try this in IE11 it keeps jumping to the top every time I scroll: $("html").kinetic(); I want to make the page scrollable on tablets and IE10 and 11 so that users can just push the page up to scroll down as you would on mobile devices. How can I do this in pure-JS or jQuery without it jumping to the top? 回答1: You can do this quite simply by recording the position of the mouse when clicked, and the current position when being

问题 I have searched a lot, but I could not find a scenario which is relevant to my need. I want to drag and drop images from a toolbar to a canvas, not from a canvas to another canvas. Please help me on this. Thanks in advance 回答1: Demo: http://jsfiddle.net/m1erickson/2Us2S/ Use jquery-ui to create draggable elements. $("#myToolbarImageElement").draggable(); Load these elements with data payloads which are key-value pairs. In your case this might be an image object that you want drawn on the

问题 I am trying to choose the right technology to use for updating a project that basically renders thousands of points in a zoomable, pannable graph. The current implementation, using Protovis, is underperformant. Check it out here: http://www.planethunters.org/classify There are about 2000 points when fully zoomed out. Try using the handles on the bottom to zoom in a bit, and drag it to pan around. You will see that it is quite choppy and your CPU usage probably goes up to 100% on one core

问题 Let's suppose I apply a tween to each element on my canvas elements.each(function (element) { new Kinetic.Tween({ node: element, rotationDeg: 180 }).play(); }); All items have been tweened and have passed from their original state to a final state. My question is: How would I apply a reverse() to revert each item to their original state? 回答1: Store the tweens inside an array, and then loop through that array and use .reverse() elements = stage.get('Rect'); var tweenArray = []; // reverse

问题 In Kinetik, if I have this: A layer with objects with events Above, I have another layer with overlapping objects How I can keep layer 1 events? (Something like pointer-events property in CSS?) Thanks : ) ! For example: In layer 1:` var bolinche = new Kinetic.Circle({ x: this.coordBolincheX, y: this.coordBolincheY, ...... bolinche.on('mouseup', function() { var getId = this.getId(); obDibujaFiguras.creaTrazados(getId); }); ` In layer 2, another shape in the same place. Then, the event

问题 Kineticjs automatically adopts canvas size and whole graphics on Retina displays, so all looks sharp and clean without blurry pixelation. But thing goes wrong when I try to use custom clipping function. Here is some code this.layerOne = new Kinetic.Layer(); this.layerTwo = new Kinetic.Layer({ clipFunc : function(c){ var ctx = c.getContext(); ctx.rect(0,0,width,height); } }); If I add shape on layerOne it will be rendered perfectly considering 2x pixel aspect, but the same shape added on

问题 I've spent hours googling about Kinetic.Layer.draw() method. All that I've found is use-cases - no documentation about how, when and why to use it. Maybe it's deprecated already? These are primary links which I use while learning and playing with this wonderful framework: http://kineticjs.com/docs/index.html http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/ It will be really helpful if somebody explains to me such misunderstanding. 回答1:

问题 I'm trying to make an image editor with canvas, but I ran into some problems with re-sizing an rotated image. My re-size anchors and the image do not seem to line up as they should. http://jsbin.com/isexig/9/edit#source (The image will rotate when you click on it, its just for testing the re-sizing) any clues how to fix this? I found out that the angle needed to be divided by pi but i fail to get the bl to work and the anchors still do not match up perfectly =/ 回答1: I found that the group is

问题 I have a quadratic curve in canvas (defined by start, end and control point). What I need is to get more of the curve's coordinates (eg. the middle, quarters etc.). With that, I'd be able (after a few iterations of finding coordinates) to animate an object based on this curve (I know it can be done easily with SVG, but that's not an option). image taken from http://www.html5canvastutorials.com/tutorials/html5-canvas-quadratic-curves/ Is there an easy way to do this? When I checked for

问题 I have a line as shown below Line attributes are When I convert it to image using following code, var nClone=$scope.currLine.clone(); // $scope.currLine has kinetic line info $scope.currLine.remove(); // remove form layer as we have its clone var pArr=nClone['attrs']['points']; var i,wIs,hIs; var xIs=0; var yIs=0; // to set width and height of image from line points var arrLen=pArr.length; for(i=0; i<arrLen;i){ if(i>=arrLen){ break; } wIs=Math.abs(pArr[i]-pArr[i+2]); // calculating difference