0

HTML5 キャンバスにズームとトリミングを実装しました。Zoom は実際には Canvas の高さと幅を拡大しているため、ズームされているように見えます。トリミングについては、マウスを使用して長方形の領域を選択してからトリミングするアルゴリズムを作成しました。ここで、画像がズームインまたはズームアウトされているときにトリミングする場合、トリミング領域を選択するときに、ズームによって発生する上と左の位置のずれを考慮する必要があります。これは正常に機能します。

だから私は今、回転を実装しています (css3 変換: 回転を使用)。問題は、画像を特定の角度で回転させると、選択範囲が実際のマウスの位置から少し離れて表示されることです。これは以前はズーム効果でも発生していましたが、x と y の位置から追加された左と上の距離を差し引いていたので、画像がズームされていても選択範囲を描画できました。回転した画像に対してどのようにすればよいかわかりません!

次の画像は、私の問題をもう少し明確に理解するのに役立つかもしれません:

回転時の選択の問題

キャンバスを反映して、キャンバスの周りに div があります。キャンバスと同じ幅、高さ、上、左のプロパティを持ちます。キャンバスの子として絶対的な選択を追加できないため、これは意図的に行われます。このカバーを FireBug で選択すると、幅と高さが増し、上と左の位置が変更された長方形として表示されます。

すでにズームで行っているように変位を計算する必要があることは理解していますが、その方法がわかりません! 私は、ピタゴラス アルゴリズムや回転行列などを試すのに多くの時間を費やしました。

私を助けてください！

4

1 に答える 1

0

この関数を使用して各頂点を回転できます。「pnt」は頂点、「pivot」は回転するポイント、「angle」はラジアン単位の角度です。

function rotatePoint(pnt, pivot, angle){
   var data = figureAngle(pivot, pnt),
      theta = data.angle + angle,
      rise = Math.sin(theta) * data.length,
      run = Math.cos(theta) * data.length;

   return {
      x: pivot.x + run,
      y: pivot.y + rise
   }
}

function figureAngle(start, end){
   var rise = (end.y - start.y),
        run = (end.x - start.x),
        length = Math.sqrt(Math.pow(rise, 2) + Math.pow(run, 2));

   return {length: length, angle: Math.atan2(-rise, -run) + Math.PI};
}

次に、水平方向のシフトは 4 つの新しい頂点の最小の x になり、垂直方向のシフトは最小の y になります。

編集:これは、回転する前に左上の座標が [0, 0] であることを前提としています。そうでない場合は、結果から開始座標を差し引く必要があります。つまり、左上隅が [50, 100] から始まる場合、水平シフトは xMin - 50 になり、垂直シフトは yMin - 100 になります。

于 2013-01-11T17:26:30.207 に答える