0

ロールオーバー時にいくつかの描画をトリガーする HTML5 イメージ マップに変換しているいくつかの単純なフラッシュ アニメーションがあります<area>

問題は、すべての円 (ロールオーバー ポイントを表す) がフラッシュ サークル オブジェクト座標として与えられることです。問題の点は、円の一番上と一番左の点 (下の画像の赤い破線でマーク) から延びる仮想線の結合点で形成されます。

フラッシュサークル座標

しかし、HTML5 で (現在 raphael.js を使用して) 円を描画するには、中心座標を指定する必要がありますvar c = paper.circle(x, y, radius)

たとえば、高さと幅が 19.80 のフラッシュ サークル オブジェクト (532.20,30.35) がある場合 (これも仮想線が交差する点から)、中心点に円を描くために必要な値を計算するにはどうすればよいですか?キャンバスに?

4

1 に答える 1

2

x と y から半径を引くだけです。

x = x - radius;
y = y - radius;

あなたの場合:

radius = 19.8 * 0.5
x = 532.2 - radius;
y = 30.35 - radius;

これにより、元の x と y に円の中心が描画されます (円が左と上に移動します)。

円を元の円と実質的に同じ位置に配置したいが、座標系を移動する必要がある場合は、代わりに半径を追加します。

于 2013-09-06T17:57:47.470 に答える