1

我有一点 JS 和 rails 问题。我目前正在使用此代码用正方形标记图像：

<html>
<head>
<script language="JavaScript">
function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
    document.getElementById("cross").style.left = (pos_x-1) ;
    document.getElementById("cross").style.top = (pos_y-15) ;
    document.getElementById("cross").style.visibility = "visible" ;
    document.pointform.form_x.value = pos_x;
    document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url(<%= asset_path 'mamma.jpg' %>);width:900px;height:720px;">
<img src=<%= asset_path 'point.gif' %> id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form> 
</body>
</html>

它是这样工作的：有一张大图片（mamma.jpg），当我点击这张图片的任意位置时，脚本将在文本字段中显示下面的点击坐标。此外，我单击的图片上应该会出现一个正方形。

现在我有两个问题：1）正方形只是出现在图片的左上角，无论我点击哪里。有一个简单的解决方法吗？

2）我需要将坐标保存在数据库中，当我回想这个页面时，正方形应该出现在我最后一次单击图像的位置。图像是表单的一部分（我也使用 formtastic）。

现在我知道 Rails 是服务器端的，而 JS 是客户端的，我不能让它们直接通信，但也有简单的解决方法吗？还是我必须通过我的控制器来使这成为可能？

提前致谢！

4

1 回答 1

0

使用已经可用的库来绘制矩形。

试试JCrop或http://odyniec.net/projects/imgareaselect/

查看此应用程序的源代码，它生成 x 和 y 以及 CSS sprite 的宽度和高度。

于 2012-07-10T06:02:57.603 回答