The biggest difference between RaphaelJS and KineticJS is that RaphaelJS uses SVG and KineticJS uses HTML5 Canvas for visualization. So it really depends on what kind of project you are doing. Here are some useful links which you should check out regarding SVG vs Canvas: Thoughts on when to use Canvas and SVG (also describes … Read more
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 && updateScrollPos(e); }, ‘mousedown’: function(e) { clicked = true; clickY = e.pageY; }, ‘mouseup’: function() { clicked = false; $(‘html’).css(‘cursor’, ‘auto’); … Read more
You were very close, just using some incorrect method names, and as was said before, the cdn needs to change. function update(activeAnchor) { var group = activeAnchor.getParent(); var topLeft = group.get(‘.topLeft’)[0]; var topRight = group.get(‘.topRight’)[0]; var bottomRight = group.get(‘.bottomRight’)[0]; var bottomLeft = group.get(‘.bottomLeft’)[0]; var image = group.get(‘.image’)[0]; var stage = group.getStage(); var anchorX = activeAnchor.getX(); … Read more
Fortunately, drawing 2000 circles is a pretty easy example to test. So here are four possible implementations, two each of Canvas and SVG: Canvas geometric zooming Canvas semantic zooming SVG geometric zooming SVG semantic zooming These examples use D3’s zoom behavior to implement zooming and panning. Aside from whether the circles are rendered in Canvas … Read more