kineticjs

I want to add Textbox or editable element to give the user the option to edit the text. This is my current code: var text = new Kinetic.Text({ text: "Sample Text", ---> i want to edit this text x: 50, y: 10, fill: "transparent", fontSize: 10, fontFamily: "Helvetica Neue", textFill: "#000", align: "center", verticalAlign: "middle", name:'TEXT' }); At the moment there does not seem to be any way to create editable text with Kinetic JS (see several threads about this at stackoverflow), some people suggest using an input field next to the canvas to edit the text, but my solution would be the

What is the difference between KineticJS methods layer.draw() , layer.drawScene() and layer.drawHit() ? Have a look at the source (v4.3.1) , l. 3381ff. These are defined on a Kinetic.Container . draw: function() { this.drawScene(); this.drawHit(); }, drawScene: function(canvas) { // do stuff }, drawHit: function() { // do stuff } The drawScene is used to draw the shapes onto the drawing canvas. The drawHit (see example ) is used to allow to modify the region where mouse events trigger events. This is done internally using a special Kinetic.HitCanvas . Update: You can find the code inside their

1) Is there any digest complete event which I can use to update my canvas. I have an angular app which has view for different properties of the canvas object. Whenever I change the property, once the digest is complete, If I can get the digest complete event I can update the canvas(using kineticJs) to redraw the chart with latest properties. Currently i am calling a method from the view 2) I am just using views and routing it to a new view whenever an object settings is opened. In this case the url also change with the webpage/#view.Its just the popup I dont need the #view at the end of the

I'm having some problems with scaling a container to a fixed point. In my case I'm trying to scale (zoom) a stage to the mouse cursor. Here is a way to do with pure canvas: http://phrogz.net/tmp/canvas_zoom_to_cursor.html (as discussed at Zoom Canvas to Mouse Cursor ) I just can't get figure out how to apply the same logic while using the KineticJS API. Sample code: var position = this.stage.getUserPosition(); var scale = Math.max(this.stage.getScale().x + (0.05 * (scaleUp ? 1 : -1)), 0); this.stage.setScale(scale); // Adjust scale to position...? this.stage.draw(); juan.facorro After a lot of

I have some library code that is cycling endlessly on me. I'm not clear on how to best perform cycle detection and avoidance in javascript. i.e. there's no programmatic way of inspecting whether an object came from a "this" reference, is there? Here's the code. Thanks! setAttrs: function(config) { var go = Kinetic.GlobalObject; var that = this; // set properties from config if(config !== undefined) { function setAttrs(obj, c) { for(var key in c) { var val = c[key]; /* * if property is an object, then add an empty object * to the node and then traverse */ if(go._isObject(val) && !go._isArray

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? You can do this quite simply by recording the position of the mouse when clicked, and the current position when being dragged. Try this: var clicked = false, clickY; $(document).on({ 'mousemove': function(e) { clicked &&

I am developing a HTML5 web application using KineticJS. I read that in KineticJS there are grouping and layering. As far as I know there are no differences between them. Can you tell me the differences? The basic difference: Groups are containers while Layers are separators. Group: A group is a container for shaped objects inside a layer. For example, a group might contain both a circle and a rectangle. A group can be manipulated and all elements within that group are similarly manipulated. For example, dragging a group will simultaneously drag a circle and rectangle contained in that group.