1

JSとレールに少し問題があります。私は現在、このコードを使用して画像を正方形でマークしています。

<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）があり、この画像のどこかをクリックすると、スクリプトはテキストフィールドに下のクリック座標を表示します。さらに、クリックした画像に正方形が表示されます。

ここで、2つの問題があります。1）クリックした場所に関係なく、画像の左上隅に正方形が表示されます。そのための簡単な修正はありますか？

2）座標をデータベースに保存する必要があります。このページを思い出すと、画像の最後をクリックした場所に正方形が表示されます。画像はフォームの一部です（私もformtasticを使用しています）。

これで、Railsがサーバー側であり、JSがクライアント側であり、直接通信させることができないことがわかりましたが、簡単な修正もありますか？または、これを可能にするためにコントローラーを粉砕する必要がありますか？

前もって感謝します！

4

1 に答える 1

0

既に利用可能なライブラリを使用して四角形を描画します。

JCropまたはhttp://odyniec.net/projects/imgareaselect/を試してください。

このアプリケーションのソース コードを確認すると、CSS スプライトの幅と高さだけでなく、x と y も生成されます。

于 2012-07-10T06:02:57.603 に答える