HTML5キャンバスで点のX Yをパーセントで調整します。

Question

私は最初のキャンバスプロジェクトで作業しています。クリックしたときにズームとセンターを使用して米国の部分地図が必要です。

私は各国家を独自の配列にして国を描​​くために点のX Y配列を見つけることができました。私は各州をこれらの次元よりも大きく引き出す必要があったので、各点を乗算するための尺度を導入しました。

私の次の課題は、クライアントが13個の状態を引き出すだけで、互いに対して縮尺を合わせないことでした。 （例：オハイオとイリノイをキャンバスの隣に置き、インディアナを無視する）。私の解決策は、各状態に対して固定のX、Yの「定数」を導入し、スケーリングが行われた後にその状態のX Y値を追加し、その点を描画させることでした。

for (var j = 0; j < state.myPolygons.length; ++j) { 
    context.beginPath(); 
    context.lineWidth = lineWidth; 
    context.strokeStyle = stateStroke; 
    context.fillStyle = stateFill; 
    for (var k = 0; k < state.myPolygons[j].myXVals.length; ++k) { 
     var x = parseFloat(state.myPolygons[j].myXVals[k]*state.scale)+state.posX; 
     var y = parseFloat(state.myPolygons[j].myYVals[k]*state.scale)+state.posY; 
     y = canvas.height - y; 
     if (k == 0) 
      context.moveTo(x,y); 
     else 
      context.lineTo(x,y); 
    } 
    context.closePath(); 
    context.fill(); 
    context.stroke(); 
} 

状態をクリックして成長させ、キャンバスをセンタリングする効果は、目標縮尺と段数を定義することによって達成されました。目標スケールと現在のスケールの差を求め、各フレームの状態のスケールにどれだけ追加するかを判断するために、ステップ数で除算します。 例：オハイオの初期スケールは、見つかったコードの1.97です。オハイオの私の目標は3.75％です。私はその差（1.78）を得、それを45で割って（定義された一連のステップ）、引き分けます。これは、各フレームで自分のスケールに対して0.039を増分として与えます。私は現在の州の現在の規模が目標規模よりも小さい間にループします。しかし、私はレンダリングのX Yを操作する必要があるので、計算されたX Yに追加される各状態のズームとズームの定数がありますので、キャンバスの中央に「スライド」できます。

これはすべて正常に動作し、左から右に向かってズーム/スライドしています。オハイオは右から左にスライドしています。---ここに問題があります。

私は、状態のクライアントのローテーションを示す一連の点を持っています。これらは私が円を描く単純なX Yです。マップの最初のレンダリングには、各州の場所のセットを実行するためのループが含まれています。私は同じスケール係数を適用していて、状態がしかし、ズームしたときPOSXは、花束変数が状態

for (var loc in state.Locations) { 
    var locx = parseFloat(state.Locations[loc].x*state.scale)+state.posX 
    var locy =parseFloat(state.Locations[loc].y*state.scale)+state.posY; 
    var txt=state.Locations[loc].text; 
    var lnk=state.Locations[loc].link; 
    context.beginPath(); 
    context.arc(locx,locy,locationSize,0,Math.PI*2,true); 
    context.fillStyle = locationFill; 
    context.closePath(); 
    context.fill(); 
    context.stroke();       
} 

の最終レンダリングに関連して、ドットの最終的な配置を調整するために、ドットのスケーリングロジックは失敗します。与えられたフレームの状態スケールは、私はXはかなり密接以下で終わる

locx = parseFloat(activeState.Locations[loc].x*activeState.scale)+activeState.posX; 
locy = parseFloat(activeState.Locations[loc].y*activeState.scale)+activeState.posY; 

た状態で所定の場所にこれを適用すると

x = parseFloat(activeState.myPolygons[j].myXVals[k]*activeState.scale)+activeState.posX; 
y = parseFloat(activeState.myPolygons[j].myYVals[k]*activeState.scale)+activeState.posY; 

を適用されますが、オハイオ州の例では、Yフロリダの近くのどこかにあります。カリフォルニアのような他の州はお互いの上にもっと積み重なっていくドットがさらに悪くなり、お互いの横にもっと広がってしまいます。

私は、状態の現在のスケールに関連して位置のXYの位置を拡大して縮小するのに必要な三角関数を理解しようとしています。アニメーション（ズームインとズームアウトの両方）。

ここに来る前の私の最終的な試みは、その場所の最初のX Yを取得し、その距離を状態配列の最後のX Yと比較することでした。私はそれらの2つの点を結ぶ線の角度を見つけようとしていました。私はまだ私がこのアプローチで何かに乗っているかもしれないと感じています。私はそれを実現できません。

はあなたにこれを読むために時間を割いてみんなに感謝し、私はあなたがちょうど私があなたの机の上に置いた紙、その上に式1で見ることができるあなたが

Answer 1

を提供することができます任意の助けをappriciate。しかし、SVGは、gタグを使って簡単にグループ化でき、グループ全体のスケーリングが可能なので、プロジェクトにとって最適です。

ただし、キャンバスをこの時点で使用する必要があるため、次の点に注意してください。トリガーを使用してトリガーを使用して拡大/縮小する必要があります。元の距離。実際の方程式を使って、その論文を私に返すことができるようになると、私はもっと詳しく説明します。ただし、この時点で実際に修正する必要がある行は次のとおりです。

locy = parseFloat(activeState.Locations[loc].y*activeState.scale)+activeState.posY;