javascript - KineticJS 移动文本路径

Question

有没有一种简单的方法可以将文本路径从其初始位置移动？我通过简单增加 X 和 Y 属性来移动 Shape 没有任何问题，但它似乎不适用于 Textpath。我还尝试过重置其数据属性(由于某种原因不起作用)，或者完全重新创建它(有效，但由于某种原因之后立即消失，也许是因为移动它的触发器是鼠标悬停在形状上？)。基本上，我需要最简单的方法来根据其先前的位置移动它(这样我就可以 += -= 坐标)。

Answer 1

文本路径并不像其他节点那样真正移动。 data 属性决定显示的点，无论节点的实际 x/y 位置如何。正如您所指出的，更改数据属性不起作用(加上谁想为每个 Action 重新计算所有这些点？)

由于 data 属性中的点是相对于节点的父节点的，我认为最简单的方法是将文本路径包装在一个组中，然后使用 移动该组。根据需要 move() 或 .setPosition()。

示例(代码改编自 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);