18

MarkerImageを使用して地図に描画する前に、特定の角度で回転する必要がある Google マップのアイコンがあります。PIL を使用して Python でその場で回転を行うと、結果の画像は元の画像と同じサイズ (32x32) になります。たとえば、次のデフォルトの Google マップ マーカー 回転前のアイコン を使用すると、次の Python コードを使用して 30 度の反時計回りの回転が実現されます。

# full_src is a variable holding the full path to image
# rotated is a variable holding the full path to where the rotated image is saved
image = Image.open(full_src)
png_info = image.info
image = image.copy()
image = image.rotate(30, resample=Image.BICUBIC)
image.save(rotated, **png_info)

結果の画像は反時計回りに 30 度回転したアイコン

注意が必要なのは、新しい回転した画像を使用して MarkerImage を作成するときに使用する新しいアンカー ポイントを取得することです。これは、アイコンの尖った端である必要があります。デフォルトでは、アンカー ポイントは下の中央です [x,y 座標で (16,32) として定義され、(0,0) は左上隅です]。JavaScriptでこれを簡単に行う方法を誰かに説明してもらえますか?

ありがとう。

2011 年 6 月 22 日更新: 間違った回転画像を投稿していました (元の画像は反時計回りに 330 度回転していました)。私はそれを修正しました。また、回転したアイコンをより明確にするリサンプリング (Image.BICUBIC) を追加しました。

4

3 に答える 3

25

回転した点の位置を計算するには、回転行列を使用できます。

JavaScript に変換すると、回転したポイントが計算されます。

function rotate(x, y, xm, ym, a) {
    var cos = Math.cos,
        sin = Math.sin,

        a = a * Math.PI / 180, // Convert to radians because that is what
                               // JavaScript likes

        // Subtract midpoints, so that midpoint is translated to origin
        // and add it in the end again
        xr = (x - xm) * cos(a) - (y - ym) * sin(a)   + xm,
        yr = (x - xm) * sin(a) + (y - ym) * cos(a)   + ym;

    return [xr, yr];
}

rotate(16, 32, 16, 16, 30); // [8, 29.856...]
于 2011-06-21T16:17:09.190 に答える
8

0,0を中心とした回転の式は次のとおりです。

x1 = cos(theta) x0 - sin(theta) y0
y1 = sin(theta) x0 + cos(theta) y0

しかし、それは通常の軸の場合であり、回転は約0,0です。PILの回転は、「グラフィックス」軸を使用して時計回りに行われます。さらに、それは画像の中央付近にあります。最後の紛らわしいことは、画像のサイズが変わる可能性があることです。これは、最終結果で考慮する必要があります。

手順：元のポイントを取得し、画像の中心から減算し、「グラフィックス軸」の修正された回転を適用し、新しいサイズの画像を見つけ、新しい画像の中心位置を追加します。

グラフィック軸を使用した回転は次のとおりです。

x1 = cos(theta) x0 + sin(theta) y0
y1 = -sin(theta) x0 + cos(theta) y0

16,32-16,16は0、16です。時計回りに30度回転すると（画像に基づいて）、点cos（-30）* 0 + sin（-30）* 16、-sin（-30）*0が得られます。 + cos（-30）* 16 = -8、13.86。最後のステップは、回転位置の中心位置を追加し直すことです。

于 2011-06-21T16:04:02.737 に答える
2

画像では、下向きが正の Y で、右向きが正の X です。ただし、回転式を適用するには、正の Y として上向きが必要です。したがって、ステップ 1 は を適用することになりますf(x,y) = f(x,h-y)。ここで、「h」は画像の高さです。画像が x0,y0 に関して回転しているとしましょう。次に、原点をこの時点に変換する必要があります。したがって、ステップ 2 は になりますf(x,y) = f(x-x0,y-y0)。この段階 (つまり、2 つのステップの後) で、新しい座標はx-x0, になりh-y-y0ます。これで、回転式を適用する準備が整いました

x1 = x*cos(theta) - y*sin(theta) 

y1 = xsin(theta) + ycos(theta)

ステップ 2 の後に取得した x と y の値を使用します。あなたは得るだろう

x1 = (x-x0)*cos(theta) - (h-y-y0)*sin(theta) 

y1 = (x-x0)*sin(theta) + (h-y-y0)*cos(theta)

ここで、手順 2 と手順 1 で行った変換を (この順序で) 元に戻します。

step2: を元に戻した後xNew = x1 + x0 、およびyNew = y1 + y0

step1 を元に戻した後:xNew = x1 + x0 およびyNew = h - (y1 + y0)

これにより、以下が得られます。

xNew = (x-x0)*cos(theta) - (h-y-y0)*sin(theta) + x0

yNew = -(x-x0)*sin(theta) - (h-y-y0)*cos(theta) + (h-y0)
于 2016-03-16T11:59:54.700 に答える