Demo of the bug.movesTo method in our little svg.bug.js extension for svg.js.
The movesTo method allows one to specify a series of points for the bug to
move to. For example, starting from point A we can move to point B, then to C, then back to A:
A = new Point 40, 20
B = new Point 200, 300
C = new Point 300, 150
bug = draw.bug(A.x, A.y)
bug.movesTo B, C, A
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="http://cdn.rawgit.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script> | |
| <script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script> | |
| <script src="svg.bug.js"></script> | |
| <style> | |
| rect { | |
| fill: none; | |
| stroke: #999; | |
| stroke-width: 2; | |
| } | |
| .vector { | |
| stroke: #555; | |
| stroke-width: 6; | |
| stroke-opacity: 0.6; | |
| } | |
| #bug { | |
| fill: aliceblue; | |
| stroke: steelblue; | |
| stroke-width: 3; | |
| } | |
| </style> | |
| <body> | |
| <div id="canvas"></div> | |
| <script type="text/coffeescript"> | |
| w = 960 | |
| h = 500 | |
| draw = SVG('canvas').size(w, h) | |
| A = new Point 40, 20 | |
| B = new Point 200, 300 | |
| C = new Point 300, 150 | |
| X = new Vector A, B | |
| Y = new Vector B, C | |
| Z = new Vector C, A | |
| draw.vector(X) | |
| draw.vector(Y).color("orange") | |
| draw.vector(Z).color("steelblue") | |
| bug = draw.bug(A.x, A.y) | |
| bug.movesTo B, C, A | |
| draw.rect(w, h) | |
| </script> |
| class Point | |
| constructor: (@x, @y) -> | |
| class Vector | |
| constructor: (@origin, @end) -> | |
| Extras = | |
| vector: (v, style) -> | |
| style or= | |
| width: 3 | |
| opacity: .5 | |
| color: '#555' | |
| V = @line(v.origin.x, v.origin.y, v.end.x, v.end.y) | |
| V.color = (color) -> V.stroke({'color': color}) | |
| V.stroke(style) | |
| bug: (x=0, y=0, size=20) -> | |
| bug = @circle(size) | |
| .attr("id", "bug") | |
| .cx(x) | |
| .cy(y) | |
| bug.movesTo = (V...) -> | |
| chain = -> | |
| if V.length | |
| bug.moveTo V.shift(), chain | |
| chain() | |
| bug.moveTo = (V, next) -> | |
| @animate(2000, '-').center(V.x, V.y).after(next) | |
| bug | |
| SVG.extend(SVG.Doc, Extras) | |
| window.Point = Point | |
| window.Vector = Vector |
| // Generated by CoffeeScript 1.6.3 | |
| (function() { | |
| var Extras, Point, Vector, | |
| __slice = [].slice; | |
| Point = (function() { | |
| function Point(x, y) { | |
| this.x = x; | |
| this.y = y; | |
| } | |
| return Point; | |
| })(); | |
| Vector = (function() { | |
| function Vector(origin, end) { | |
| this.origin = origin; | |
| this.end = end; | |
| } | |
| return Vector; | |
| })(); | |
| Extras = { | |
| vector: function(v, style) { | |
| var V; | |
| style || (style = { | |
| width: 3, | |
| opacity: .5, | |
| color: '#555' | |
| }); | |
| V = this.line(v.origin.x, v.origin.y, v.end.x, v.end.y); | |
| V.color = function(color) { | |
| return V.stroke({ | |
| 'color': color | |
| }); | |
| }; | |
| return V.stroke(style); | |
| }, | |
| bug: function(x, y, size) { | |
| var bug; | |
| if (x == null) { | |
| x = 0; | |
| } | |
| if (y == null) { | |
| y = 0; | |
| } | |
| if (size == null) { | |
| size = 20; | |
| } | |
| bug = this.circle(size).attr("id", "bug").cx(x).cy(y); | |
| bug.movesTo = function() { | |
| var V, chain; | |
| V = 1 <= arguments.length ? __slice.call(arguments, 0) : []; | |
| chain = function() { | |
| if (V.length) { | |
| return bug.moveTo(V.shift(), chain); | |
| } | |
| }; | |
| return chain(); | |
| }; | |
| bug.moveTo = function(V, next) { | |
| return this.animate(2000, '-').center(V.x, V.y).after(next); | |
| }; | |
| return bug; | |
| } | |
| }; | |
| SVG.extend(SVG.Doc, Extras); | |
| window.Point = Point; | |
| window.Vector = Vector; | |
| }).call(this); |