1

Web アプリケーションで少し深刻な問題に遭遇しました。

Web フォームに送信イメージ (input type=image) があります。私は意図的にこれを選択しました。なぜなら、それは永遠に存在し、すべてのブラウザがそれを理解しているからです

もちろん、私たちのお気に入りのブラウザはそうではありません! デスクトップをスケーリングする場合は、視覚に問題があるとします。IE でクリックが適切にスケーリングされない

ユーザーが画像をクリックすると、フォームが送信され、クリックの x 座標と y 座標も送信されます。IE では、これらの座標は正しくスケーリングされません。IE が不適切な座標を送信します。Firefox (私は他をテストしていません) は、正しいスケーリングされた座標を送信します。

例として、画像のサイズが 100*100 ピクセルで、誰かが画像の右下隅をクリックしたときにデスクトップが 150% 拡大された場合、Firefox は [100,100] を返しますが、IE は [150,150] を返します。これは画像から外れています!

これは私にとってちょっとしたショーストッパーであり、回避する方法が必要です。誰かに何かアイデアがあれば、それをいただければ幸いです。おそらく、スケール係数を何らかの方法で返すことができ、自分でスケーリングを計算してアプリケーションで調整することができますか?

DC

4

1 に答える 1

1

問題を解決しました

説明したように、入力画像をズームすると、Internet Exploder は正しいクリック座標を送信できません。代わりに、実際のズームされていない画像領域の外側にある実際のクリック座標をピクセル単位で送信します。

（私が知る限り）JavaScriptからクリック座標にアクセスすることはできません。これは、送信プロセス中に自動的に割り当てられて送信されます。

解決策は、最後の瞬間まで待って「ズーム係数」を計算し、それをサーバーに送信してから、サーバー上の座標を調整することです。

フォームに次の JavaScript を追加します (jquery を想定)

注: deviceXDPI は、IE 6 から使用されています。

<script>
// return the screens scale factor used for IE
function getScaleFactorX(elem_id) {
    var nscalefactor = 1;
    try {
        if (screen.deviceXDPI){
            nscalefactor = screen.deviceXDPI / screen.logicalXDPI;
            $("#" + elem_id).val( nscalefactor );
        } else {
            $("#" + elem_id).val( 1 );
        }
    } catch (e) {
     // fail silently
    }
    return nscalefactor;
}
</script>

適切な非表示フィールドを追加して、スケーリングをサーバーに戻します

<input type="hidden" id="scalefactor" name="scalefactor" value="1">

画像がクリックされたときに倍率が計算されるように操作を追加します

<input name="img"  type="image" src="image.png" width="400" height="200" alt="Please click" onclick="getScaleFactorX('scalefactor'); return true;" />

画像の onclick ハンドラーでこれを行うと、ユーザーはフォームが読み込まれた後、送信される前に画面をズームできます。このフィールドへの入力が早すぎると、後でユーザーが画像をズームする可能性があり、倍率が正しくない可能性があります。

サーバー上

// scale the click points
                if ($scalefactor) {
                    $x = (int)($x / $scalefactor);
                    $y = (int)($y / $scalefactor);
                }

これは、スケーリングが x 方向と y 方向の両方で同じであることを前提としています。これは、ズームされた Web ページの適切な前提です。丸め誤差もあるため、ピクセルパーフェクトが必要な場合は、それを考慮する必要があります

DC

于 2013-03-05T01:01:56.343 に答える