変換は要素を更新しません

var m = ele.matrix;

m.translate(10,10) //この行は、行列の 'e'と 'f'を更新します。あまりにも私は、火花の値をリフレッシュする場合のみ更新された値を見ることができます変換は要素を更新しません

要素が翻訳されていません。要素の行列を変更すると、要素が変換に従うようにする方法を教えてください。

フルコード：

<html> 
<head> 
    <script src="raphael-min.js"></script> 
    <style> 
     #canvas_container { 
       width: 500px; 
       border: 1px solid #aaa; 
      } 
    </style> 
</head> 
<body><div id="canvas_container"></div></body> 
<script> 
window.onload = function() {  
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  
    text = paper.text(150,150,"Some Text");  
    text.transform("m1,0,0,1,5,0") 
} 
</script> 
</html>

おかげ

出典

2011-12-14 rajkamal

一部の* MORE *サンプルコード？ –

私は変換が働いていると思うが、それはすぐに実行されているので、あなたはそれを動かす見ることはありません。それを見るために、タイムアウト後に変換してみてください。

setTimeout(function() {text.transform("m1,0,0,1,5,0")}, 2000);

編集：[OK]を、私はこのもう少し見て、役立つかもしれないいくつかのことを発見しました。このfiddleであなたに従うことができます。

要素のmatrixプロパティを使用することは実際には文書化されていません（Matrixが内部的に使用されているようですが、Raphaelのユーザーが使用するように思われる理由は不思議です）。それを要素に適用することがわかった唯一の方法は、行列の変換文字列を取得し、element.transform()を使って適用することでした。問題の1つは、Matrix.toTransformString()がxまたはyのいずれかの翻訳が0の場合、翻訳が完全に失われてしまうというバグがあるようだ（私はちょうどこれをドミトリーに報告した）。私は{isSimple: false}を渡して行列の文字列を返すことができました。

しかし、この方法を使用すると、すべての回転とスケーリングが原点からの相対的なように見えますが、これはやや面倒です（私の場合よりも行列変換に精通していない限り、ハード）。とにかく、フィドルは、いくつかの要素の変形の組み合わせの束を実行します。それはちょっと混乱しますが、行列変換をどのように進めるかについてのアイデアを伝えるかもしれません（または、要素変換関数（translate、scale、rotateのようなもの）を直接使用する方が良い場合）。

出典

2011-12-14 16:29:19

変換方法が機能しています。しかし、私がele.matrix.translate（dx、dy）のような行列を操作するとき、変換は要素に適用されません。 ele.update（）のような他のメソッドを呼び出す必要がありますか？ – rajkamal

変換は要素を更新しません

答えて

関連する問題