Javascript KineticJS移动文本路径
有没有一种简单的方法可以将文本路径从其初始位置移动?通过简单增加X和Y属性来移动形状并没有问题,但它似乎不适用于Textpath。我还尝试过重置它的数据属性(由于某些原因不起作用),或者完全重新创建它(起作用,但由于某些原因,它会立即消失,可能是因为移动它的触发器是形状上的鼠标覆盖?)。基本上,我需要一种最简单的方法根据它以前的位置移动它(这样我就可以+=-=坐标)。文本路径实际上不像其他节点那样移动。Javascript KineticJS移动文本路径,javascript,kineticjs,Javascript,Kineticjs,有没有一种简单的方法可以将文本路径从其初始位置移动?通过简单增加X和Y属性来移动形状并没有问题,但它似乎不适用于Textpath。我还尝试过重置它的数据属性(由于某些原因不起作用),或者完全重新创建它(起作用,但由于某些原因,它会立即消失,可能是因为移动它的触发器是形状上的鼠标覆盖?)。基本上,我需要一种最简单的方法根据它以前的位置移动它(这样我就可以+=-=坐标)。文本路径实际上不像其他节点那样移动。data属性决定显示的点,而与节点的实际x/y位置无关。正如您所注意到的,更改数据属性不起作用
data
属性决定显示的点,而与节点的实际x/y位置无关。正如您所注意到的,更改数据属性不起作用(还有谁想为每次移动重新计算所有这些点?)
由于data
属性中的点相对于节点的父节点,我认为最简单的方法是将文本路径包装在一个组中,然后根据需要使用.move()
或.setPosition()
移动组
示例(代码改编自):
是的,在发布我的问题后,我想我会把所有东西都打包成一个组,然后像那样移动,特别是因为我同时移动的东西更多。不过,还是谢谢你。
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);