クリックイベントを収集するページがevent.pageX
とevent.pageY
で、別のページの600ピクセル×750ピクセルのボックスに比例してマップしたいと考えています。つまり、ボックス内の他のページのスクリーンショットがあれば、クリック位置のマークは同じ場所に視覚的に表示されます。ブラウザでのクリック位置のマッピング
私は($('body').width(), $('body').height())
,(document.body.offSetWidth, document.body.offSetHeight)
および(screen.width, screen.height)
を処分していますが、正確な比率を得るためにこれらをどのように組み合わせるのが最も良いかわかりません。
現在、私はちょうど(sudoのコードで)使用しています:
x_ratio = 600/document.body.offSetWidth
y_ratio = 750/document.body.offSetHeight
new_x_position = event.pageX * x_ratio
new_y_position = event.pageY * y_ratio
と、ボックス内のクリックイベントのマーキングが
<div id='click_marker'
style="position: relative; top: new_y_position px; left: new_x_position px;">
</div>
であるが、これは精度を維持していないようですブラウザや画面サイズによって異なります。私は1つのブラウザーと画面サイズでクリック位置を取って、ブラウザーと画面サイズで正確にマップできるようにしたいと考えています。
この計算を一貫して正確に行うにはどうすればよいですか?
このように画面の解像度は問題ではありませんか? –
いいえ、なぜわかりません。あなたが問題の領域の起源に相対的な正しい座標を持っているなら、それはすべてうまくいくでしょう。あなたの体がスクロール可能でない場合、$(window).width()/ height()があなたの答えです。スクロール可能な場合は、650x750で完全なソリューションを提供する方法を理解する必要があります。 –