javascript - using snap.svg to move by increment using keyboard arrows -
i trying move svg called mycurser not position. objective move shapes along grid, in case 40x40. later increment changed dynamicly.
i know can move to , specify new cx svg. cannot write cx = cx + 40.
var s = snap("#svg"); var mycurser = s.circle(0, 0, 10); //var mycurser2 = s.circle(40,40,2) mycurser.attr({ fill: "rgba(255,0,0,0.5)", stroke: "#000", strokewidth: 1 }); var increment = 40; $(document).keydown(function(e) { switch(e.which) { case 37: // left break; case 38: // break; case 39: // right mycurser.transform(t'40','40'); break; case 40: // down break; default: return; // exit handler other keys } e.preventdefault(); // prevent default action (scroll / move caret) });
here's answer gave in email...
you want like...
mycurser.attr('cx', +mycurser.attr('cx') + 10)
note, + in there, make sure doesn't add string, , adds number.
you add plugin that, may bit confusing, useful if have repeat code. plugin like...
snap.plugin( function( snap, element, paper, global ) { element.prototype.increaseattr = function(myattr, value) { return this.attr(myattr, +this.attr(myattr) + value); } }); mycurser.increaseattr('cx', -10) //// move left
here's codepen 1 method moving right, , left.
you may want transforms if moving more complicated objects around.
Comments
Post a Comment