KineticJS move 텍스트 경로

Question

텍스트 경로를 처음 위치에서 쉽게 이동할 수 있습니까? X 및 Y 속성을 단순히 증가 시키면 Shape를 움직이는 데 아무런 문제가 없지만 Textpath에서는 작동하지 않는 것 같습니다. 또한 데이터 속성을 재설정 (어떤 이유로 작동하지 않음)했거나 완전히 다시 만들었습니다 (작동하지만 어떤 이유로 인해 바로 이동하기위한 방아쇠가 모양에 마우스를 올려 놓기 때문에 사라 졌나요?). 기본적으로 이전 위치를 기반으로 이동하는 가장 쉬운 방법이 필요합니다 (그래서 저는 + = - = 좌표를 사용할 수 있습니다).

Answer 1

텍스트 경로가 실제로 다른 노드처럼 움직이지 않습니다. data 속성은 노드의 실제로 x/y 위치에 관계없이 표시되는 점을 결정합니다. 앞에서 언급했듯이 데이터 속성을 변경해도 작동하지 않습니다 (모든 동작에 대해 모든 점을 다시 계산하려는 사용자).

data 속성의 점은 노드의 부모를 기준으로하므로 가장 쉬운 방법이라고 생각합니다. 그룹에 Text Path를 래핑 한 다음 필요에 따라 .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);