CODEWITHSUNDEEP
javascriptsvgraphael
cyberwombat
cyberwombat

Reputation: 40163

Draggable font on RaphaelJS

Im trying to make some text added using print() draggable. I've found some SO post but the code doesn't work - I've reposted it as a fiddle - on chrome and FF the text flies off the screen. If I set the getBBox() parameter to false it works the first drag but then, on subsequent drags, the mouse is offset.

var w = document.body.clientWidth,
    h = document.body.clientHeight,
    paper = Raphael(0, 0, w, h);

var font = paper.getFont("Vegur");
var text = paper.print(20,20,"my dragable text",font,50);

var start = function () {
    text.oBB = text.getBBox();
},
move = function (dx, dy) {
  var bb = text.getBBox(true); // Setting to false works once
  text.transform('...T'+[text.oBB.x - bb.x + dx, text.oBB.y - bb.y + dy]);
},
up = function () {

};

text.drag(move, start, up);

Upvotes: 0

Views: 74

Answers (1)

cyberwombat
cyberwombat

Reputation: 40163

Figured it out...

var start = function() {
  //get original position before any transform
  var obb = this.getBBox(true);
  //get position after last transform
  var nbb = this.getBBox(false);
  //store difference
  this.ox = nbb.x - obb.x
  this.oy = nbb.y - obb.y;
},
move = function(dx, dy) {
  //apply difference to mouse moves
  this.transform('T' + [this.ox + dx, this.oy + dy]);
},
up = function() {
};

Upvotes: 1

Related Questions