0

私は小さなプロジェクト (SVG を学ぶため) を実行しています (javascript を使用)。

独自のユーザー座標系を使用して形状内の点を追跡できるようにしたいと考えています。私の考えは、シェイプ内のポイントの座標を見つけてから、SVGPoint を作成して、その要素を渡すことができるようにすることです。例でメソッド create SVGPoint を見てきましたが、「SVG_root」のコンテキストで使用されているようです (つまり、document.documentElement.createSVGPoint() が機能します)。

使用する場合（Firefoxの場合）

inSvgObj.createSVGPoint()

ここで、inSVGObj は要素であり、Web コンソールには「TypeError: inSvgObj.createSVGPoint は関数ではありません」と表示されます。内に SVG ポイントを作成して、そのユーザー座標系の座標を表す値を後で設定することは可能ですか?

EDIT（Robert Longsonの回答を検討した後）：SVGPointが「SVGルート」内でのみ作成され、それを別の要素内に移動する方法を見つけることができなかったことを考えると、別のsvg要素を使用する方が便利であることがわかりましたタイプ: SVGMatrix. それが誰かを助ける場合（私はこれに対処するのに時間を費やしたので）、シミュレートされたポイントとして機能するSVGMatrixを作成することにより、SVGポイント内のアナログ値を操作することができます（座標の目的で。 endthe メソッド.createSVGMatrix()、getCTM()および.multiply()(これは SVGMatrix の最後) が使用されます。それを説明するために、4 つの引数を取る (js) 関数を含めます。変換するユーザー座標系 (ucs) の x 座標、y 座標はその ucs、変換したい ucs を持つオブジェクト、およびオブジェクトです。変換したいucsで。そして、変換された ucs の x 座標、その y 座標、および 1 (SVG 勧告との一貫性のため) の 3 つのプロパティを持つオブジェクトを返します。

function coorUcsAToUcsB(ucsAx,ucsAy,svgObjUcsA,svgObjUcsB){
  var ctmUcsA=svgObjUcsA.getCTM();
  var ctmUcsB=svgObjUcsB.getCTM().inverse();
  var mtx=document.getElementsByTagName('svg')[0].createSVGMatrix();
  mtx.e=ucsAx;
  mtx.f=ucsAy;
  var simulSvgP=ctmUcsB.multiply(ctmUcsA.multiply(mtx)); //1
  return {"x":simulSvgP.e,"y":simulSvgP.f,"z":1};
}

//1 この行は、1 列目と 2 列目が 0、3 列目が ucsA の座標を持つアナログ svg マトリックスから ucsB の座標を持つ svg マトリックスを作成します - ucsA の座標をビューポートの cs に取り、そこから ucsB の座標に取ります。行列演算の説明はこちらをご覧ください。

特に、同じまたは欠点を行う既存の方法を見落としているコメントは、大歓迎です。

4

1 に答える 1

1

ルート要素の作成を使用して SVG ポイントを作成しますが、それが完了したら、必要な値を設定できます。これらの値をオブジェクトに割り当てると、オブジェクトは座標系でそれらを解釈します。

于 2013-06-26T15:01:49.157 に答える