kineticjs

HTML5 drag and drop images from a toolbar to a canvas

由 ぐ巨炮叔叔 提交于 2019-11-27 15:20:50
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 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 canvas. $("#myToolbarImageElement").data("image",myImageObject); Set your canvas as a drop zone: $("#myCanvas")

Fast and responsive interactive charts/graphs: SVG, Canvas, other?

由 ∥☆過路亽．° 提交于 2019-11-27 09:57:17
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 unless you have a really fast computer. Each change to the focus area calls a redraw to protovis which is

What is the difference between KineticJS draw methods?

由 最后都变了- 提交于 2019-11-27 03:17:14
问题 What is the difference between KineticJS methods layer.draw() , layer.drawScene() and layer.drawHit() ? 回答1: 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

Scaling to a fixed point in KineticJS

由 こ雲淡風輕ζ 提交于 2019-11-27 01:42:11
问题 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

In Javascript, when performing a deep copy, how do I avoid a cycle, due to a property being “this”?

由 纵饮孤独 提交于 2019-11-26 23:20:25
问题 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

What are the differences between group and layer in KineticJs

由 只谈情不闲聊 提交于 2019-11-26 17:21:00
问题 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? 回答1: 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
订阅 kineticjs