KineticJS move Textpath

Question

Is there an easy way to move a Textpath from its initial position? I've had no problems moving Shape with a simple increase to its X and Y attributes, but it seems it doesn't work for Textpath. I've also tried resetting its data attribute (doesn't work for some reason), or recreating it entirely (works, but for some reason disappears right after, maybe because the trigger to move it is a mouseover on a Shape?). Basically, I'd need to easiest way to move it based on its previous position (so I can just += -= the coordinates).

Answer 1

Text Paths don't really move like other nodes. The data attribute is what determines the points that are displayed, regardless of the node's actually x/y position. As you noted, changing the data attribute doesn't work (plus who wants to recalculate all of those points for every movement?)

Since the points in the data attribute are relative to the node's parents, I think the easiest method would be to wrap the Text Path in a group and then move the group around using .move() or .setPosition() as needed.

Example (code adapted from the Text Path Tutorial):

var stage = new Kinetic.Stage({
  container: 'container',
  width: 578,
  height: 220
});
var layer = new Kinetic.Layer();

var textpath = new Kinetic.TextPath({
    x: 100,
    y: 50,
  fill: '#333',
  fontSize: '24',
  fontFamily: 'Arial',
  text: 'All the world\'s a stage, and all the men and women merely players.',
  data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
});

var group = new Kinetic.Group();
group.add(textpath);
group.move({x:50, y:50});

layer.add(group);
stage.add(layer);