1

ユーザーが円の1つをクリックしたときに、円のグループを移動しようとしています。グループは最初のクリックで1回だけ移動しますが、その後は移動しません。これが私が使用しているサンプルコードです：

function move_circle(e)     
{
var grp = e.target.parentNode;
grp.setAttribute("transform", "translate(" + 50 + ", " + 50 + ")");
}

<g onclick="move_circle(evt)">
  <circle cx="150" cy="100" r="25" fill="red"  />
  <circle cx="170" cy="120" r="5" fill="red"  />
</g>
4

1 に答える 1

7

円をクリックするたびに、イベント ハンドラーは要素のtransform属性を に設定しています。あなたが意図したことは、円をクリックするたびに翻訳を繰り返すことだと思います. つまり、要素に既に適用されている翻訳を使用して翻訳を構成する必要があります。そのようです：g"translate(50, 50)"

function move_circle(e) {
  var g = e.target.parentNode,
      t;

  if (g.transform.baseVal.numberOfItems == 0) {
    g.setAttribute("transform", "translate(" + 50 + ", " + 50 + ")");
  } else {
    t  = g.transform.baseVal.getItem(0),
    t.setMatrix(t.matrix.translate(50, 50));
  }
}

変換が適用されていない場合は、以前と同様に翻訳が適用されます。要素に変換が既に適用されている場合は、既存の変換マトリックスを使用し、それに別の変換を適用してから、その結果を要素の変換マトリックスに設定します。(translate()操作は行列を変更しません。操作が適用された行列のコピーを返します。したがって、その新しい行列で変換を更新する必要があります。)

于 2012-12-26T06:31:52.893 に答える