パス位置をラフで

Question

どのように私はラプラスjsでパスの位置を変更できますか？

明白な方法が機能していないことを非常に奇妙なこと：

var p = paper.path("some path string"); 

p.attr("fill","red"); 
p.attr({x:200,y:100}); //not working 

Answer 1

使用

var p = paper.path("M10 10L90 90L10 90"); 

p.attr("fill","red"); 
p.translate(300, 100); 

Answer 2

translateあなたは相対postioningが必要な場合、あなたは「Mを変更するp.attr`を使用することができ、絶対的です"パラメータ

Answer 3

私はこれを次のようにして完成させました：

p.attr({path:"M10 10L90 90L10 90"}); 

Answer 4

が設定され、ラファエル2.0+でパスを移動するかのように、（「T」）翻訳使用して変換属性をアニメーション化するには、次の

// animate 
someElement.animate({transform: ['t',100,100]}, 1000); 

// set 
someElement.attr({transform: ['t',100,100]}); 

これは、既存の翻訳を上書きします。だから、この...

someElement.animate({transform: ['t',100,100]}, 1000, function(){ 
    someElement.animate({transform: ['t',50,50]}, 1000); 
}); 

...そして、それがダウンして右のそれがスタート地点からは50pxを終了、左は50pxまで戻って行くよ、右100pxにを下に移動します。 （それが回転していた場合、それは、アカウントにその回転を取るよ - 過去の回転を無視する代わりに、「T」の「T」を使用）

---

あなたはそれが相対に基づいて移動したい場合は、ありません絶対座標はで、最初に翻訳された場所ではない場所に基づいて、以前の翻訳座標を取得して適用する必要があります。

これは予想以上に難しいです。

1：私の知っている2つの方法がありますsomeElement.data()にデータを変換し保存する*：

someElement.data('t',[100,100]); 
// stuff happens... 
var translate = someElement.data('t'); 

2：例えば、それの地獄を解析someElement.transform()を使用してデータを変換ゲット*：

var transform = someElement.data(); 
for (var i = transform.length - 1; i >= 0; i--) { 
    if(transform[i][0].toLowerCase() == 't') { 
    var translate = [ transform[i][1], transform[i][2] ]; 
    break; 
    } 
}; 

*あなたが 'にT' を区別する必要がある場合は運動をアニメーション化し、続けるために、そして、 'T' から

を調整...

someElement.animate({transform: ['t',100,100]}, 1000, function(){ 
    someElement.animate({transform: ['t',50+translate[0],50+translate[1] ]}, 1000); 
}); 

これにはgetBBox()（任意のタイプの要素の場合はstandard way to get Raphael element positions）を使用するようにしないでください。 getBBox()には、パス定義のM移動のような非翻訳移動が含まれます。