kineticjs

I have made the following using KineticJS and D3.js. I have used KineticJS to let me popup tooltips when the user hovers over one of the dots. However, the tooltip appears cut off because of the boundaries of the canvas. Is there a way I can make this appear without it getting clipped? The entire code itself is pretty huge and contains a lot of unrelated stuff so I posted the relevant snippets: this.stage = new Kinetic.Stage({ container: 'canvas', width: this.WIDTH, height: this.HEIGHT }); this.circlesLayer = new Kinetic.Layer(); this.tooltipLayer = new Kinetic.Layer(); this.stage.reset();

I'm working towards a default resolution of 1366x756. I would to scale this up and down depending on the viewport. Similar to the example shown here: http://blogs.msdn.com/b/davrous/archive/2012/04/06/modernizing-your-html5-canvas-games-with-offline-apis-file-apis-css3-amp-hardware-scaling.aspx I'm kind of confused how I would get this to work in KineticJS as it abstracts away the canvas elements used. What I would like to achieve is basically: window.addEventListener("resize", OnResizeCalled, false); function OnResizeCalled() { canvas.style.width = window.innerWidth + 'px'; canvas.style

Recently discovered KineticJS as I've been trying to convert my Flash skills to HTML Canvas. It is an extremely impressive tool! Question: If I'm using a front-end like Bootstrap and I have a page with several divs that contain KineticJS-generated canvases, can I get those canvases to scale along with everything else on the page? Thanks much. ----- Due to character limit of comments, I'm replying in the OP. --------- Would you set it up so that there is a maximum size and then have it scale as when the browser is scaled? For example, in Actionscript I did this to track the size of the browser

I have an image loaded on the dom already, and I want to be able to drag that image into a canvas and drop it into the canvas and create a kineticjs object out of it. I don't know how to make the image draggable, and I don't know how to make the canvas react to drag and drop events that already exist on the dom. Can someone show me how to do this? Most of the tutorials show how to drag and drop from within the canvas, or the file system, I'm looking how to drag from the DOM to the canvas. Background info: I want to have a menu system or a bunch of thumbnails that a user can drag and drop into

I am currently working a project involving KineticJS. I have to dynamically create and delete shapes constantly, but cannot seem to figure out how to do the latter. I've been trying to do: $ myLayer.remove(myShape) because this is what most posts seem to recommend. But, the documentation says that this will remove the layer from the stage and not the shape from the layer. When I try this in project it in fact removes the layer from the stage. So am I doing something wrong or is there some other way to remove a shape from a layer? There are two functions that may be helpful. childContainer

I have a specific problem on my designer drawing tool in Canvas HTML5. I am developing an action history system (Undo & Redo). I am building my system on projeqht 's answer on this question with serializing the layers in history array. The core, the idea of the solution is working but I have a strange problem. When I hit Undo it creates the new layers, but the old ones are not disappearing. I will attach my sourcecode and I will attach screenshots as well so you can see what is happening: Sourcecode: var history = Array(null); var historyStep = 0; var arrayNonRemovable = Array('moveLayer',

Please take a look at the following Link I have the following code: // hide all anchors var children = group.getChildren(); for(var k=1; k < children.length; k++) children[k].hide(); // .remove() would also work, or .destroy() group.on("click", function() { var id = this.getId(); if(imageSelected !== false) { // hide all anchors var children = this.getChildren(); for(var k=1; k < children.length; k++) children[k].hide(); // .remove() would also work, or .destroy() layer.draw(); imageSelected = false; } else { var children = this.getChildren(); for(var k=1; k < children.length; k++) children[k]