带坐标的数学

  • 时间:
  • 分类: Python

大家好, 我有点挑战. 如果您单击图像,我有一个脚本显示鼠标的辅导. 现在,我想将这些坐标转换为PixelNumber. 让我看看是否可以使它变得更容易. 假设我们的图像高100px和100px宽. 左上角的坐标为x = 0,y = 0 右上角的坐标为x = 99,y = 0 左下角的坐标为x = 0,y = 99 左上角的坐标为x = 99,y = 99 现在,我想通过它们代表的像素以另一种方式显示这些坐标. 这意味着: 左上角的像素名字为1 右上角的像素名称为100 左下角的Pixelnumber为9901 左上角的像素名称为10000 因此,通过使用坐标,我敢肯定可以计算这些PixelNumbers. 但是,我无法自己写这篇文章. 谁能帮我这个? 这是我到目前为止的代码: [html] 功能point_it(event){ var pointer_div = document.getElementById(" pointer_div"); //IE if(window.activexobject){ pos_x = window.event.offsetx; pos_y = window.event.offsety; } // Firefox >>>仍将检查!! 别的 { var top = 0,左= 0; var elm = pointer_div; 而(榆树){ left = elm.offsetleft; top = elm.offsettop; 榆树= elm.offsetparent; } pos_x = event.pagex-左; pos_y = event.pagey-顶部; } document.pointform.form_x.value = pos_x; document.pointform.form_y.value = pos_y; document.pointform.form_pixel.value = pixel; } 坐标 x = y = 像素= [/html]

# 回答1

嗨,大家好, 又是我. 我以为我永远不会弄清楚该怎么做. 直到我意识到我从错误的角度看待它. 我只需要找到计算像素的公式即可. 因此,我从Excel开始尝试找到正确的公式. 一旦找到一个,我只需要将其转换为JavaScript即可. 您知道它实际上有效! 因此,我怀疑是否有人真的需要这样的脚本,但是无论如何,这里是:

选择 | 换行 | 行号
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4.  
  5. function point_it(event){
  6. var pointer_div = document.getElementById("pointer_div");
  7. var pixel;
  8. var imagewidth="516";
  9. var calc;
  10. var top = 0, left = 0;
  11. var elm = pointer_div;
  12.  
  13. //IE
  14. if (window.ActiveXObject) {
  15. pos_x = window.event.offsetX;
  16. pos_y = window.event.offsetY;
  17. }
  18.  
  19. //Firefox >>> still to be checked!!
  20. else {
  21. while (elm) {
  22. left = elm.offsetLeft;
  23. top = elm.offsetTop;
  24. elm = elm.offsetParent;
  25. }
  26. pos_x = event.pageX - left;
  27. pos_y = event.pageY - top;
  28. }
  29.  
  30. if (pos_y <= "0"){
  31. calc = (pos_y)
  32. }
  33. else{
  34. calc = (parseInt(pos_y)*parseInt(imagewidth) - parseInt(pos_y))
  35. }
  36.  
  37. pixel = (parseInt(pos_y) + parseInt(pos_x+1)) + calc;
  38.  
  39.  
  40.  
  41. // Debugging
  42. document.pointform.form_x.value = pos_x + 1;
  43. document.pointform.form_y.value = pos_y + 1;
  44. document.pointform.form_pixel.value = pixel;
  45. }
  46.  
  47. </script>
  48. </head>
  49. <body>
  50. <form name="pointform" method="post">
  51. <div id="pointer_div" onclick="point_it(event)" style = "background-image:url('http://www.nasa.gov/externalflash/NASA45/27/27image.jpg');width:516px;height:387px; CURSOR: crosshair"></div>
  52.  
  53. <!-- Debugging -->
  54. Coordinates<br>
  55. x = <input type="text" name="form_x" size="4">
  56. y = <input type="text" name="form_y" size="4">
  57. <br>
  58. pixel = <input type="text" name="form_pixel" size="8">
  59. </form> 
  60. </body>
  61. </html> 
  62.  

祝你们好运!

标签: Javascript

添加新评论