เริ่มจาก รูปภูมิประเทศโล้นๆก่อน ทีนี้ฝั่งServerจะทำการวาดเส้นกริด
โดยคำนวณระยะห่างของเส้นกริดแต่ละเส้นจาก
ความกว้าง และความสูง ของรูป แล้วหารด้วยจำนวนเส้น(MeshCount)

รูปทางฝั่งServer มีขนาดเท่ากับ 646x923

ซึ่งหลังจากที่ฝั่งserver วาดกริดเสร็จแล้วจะส่งมาให้ฝั่งclient ในรูปแบบImage
โดยที่เขาต้องการให้กดบนเส้นต่างๆแล้วโชว์พิกัดของแต่ละเส้นกริดที่เมาท์ไปชี้

ปัญหาคือ ตำแหน่งx,yที่กด บนรูปที่โชว์ในweb browserนั้นไม่ตรงกับตำแหน่งภาพของทางserver
พอลองเอาเมาท์ไปชี้ที่ขวาสุดล่างสุดของรูปที่แสดงผลบนweb browserดันไม่ใช่พิกัดx,yที่เท่ากับwidth และheight
(ฝั่งServerที่เอาไปคำนวณกริด รูปมีความกว้าง646x923)

ก็เลยลองใช้คำสั่ง getComputedStyle เพื่อดูขนาดรูปบนเว็บบราวเซอร์ดู

var width = document.defaultView.getComputedStyle(document.getElementById('map-overlay'), null).getPropertyValue("width")
var height = document.defaultView.getComputedStyle(document.getElementById('map-overlay'), null).getPropertyValue("height")

ผลปรากฏว่ารูปเล็กกว่ารูปที่ฝั่งServerนำไปใช้คำนวณกริด

แบบนี้พอจะมีทางไหนมั้ยครับ? ที่จะทำให้รูปทั้งฝั่งcliendและserverเท่ากัน และเมื่อนำเม้าท์ไปชี้ จะต้องได้ตำแหน่งx,y ที่สอดคล้องกันกับฝั่งsever

(ทางออกผมที่คิดได้ตอนนี้ คือ ใช้สูตรวาดกริดของserver มาวาดฝั่งclient การรับส่ง-ข้อมูล แทนที่จะรับส่งด้วยพิกัดpixel xyก็เปลี่ยนเป็นรับส่งด้วยพิกัดเของเส้นกริดแทน แต่ผมกลัวเรื่องmathที่มันปัดขึ้นปัดลงไม่เหมือนกัน แล้วเดี๋ยวกริดสองฝั่งมันจะไม่เท่ากัน
แต่ก่อนจะใช้วิธีนี้ อยากลองสอบถามดูก่อนว่า ปัญหาpixel x,y ตามหัวกระทู้สามารถแก้ได้มั้ย?)