0

入力テキストフィールドで指定された座標を使用して、div を別の場所に配置したいと考えています。追加されたスパンは、親の座標に対する相対位置である必要があります。問題は、何も追加しないが、キャンバスの位置を変更することです。

<html>
 <head> 
<style> 
    #rectangle { position: relative; }
</style>
<body>  
    300 x 300 px MAX<br/>
    <canvas id="rectangle" width="300" height="300"></canvas>
    <br/> 
    <table>
    <tr>
        <td>Horizontal starting cordinate:</td>
        <td><input type="text" id = "x" value = ""/></td>
    </tr>       
    <tr>
        <td>Vertical starting cordinate:</td>
        <td><input type="text" id = "y"/></td>
    </tr>
    <tr>
        <td>Width of the rectangle:</td>
        <td><input type="text" id = "width"/></td>
    </tr>
    <tr>
        <td>Height of the rectangle:</td>
        <td><input type="text" id = "height"/></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" id = "draw" value = "Click"/></td>
    </tr> 
</table> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
jQuery(document).ready(function(){
     $("#draw").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

        var x1 = parseInt($("#x").val());
        var y1 = parseInt($("#y").val());
        var width = parseInt($("#width").val());
        var height = parseInt($("#height").val()); 

        $("#rectangle")
            .add("div")
            .css("id", "right-zone") 
            .css("z-index", "5")
            .css("position", "absolute")
            .css("left", x1)  
            .css("top", y2)  
            .css("width", width)
            .css("height", height)
            .css("background-color", "#FF0000")
            .css("border", "solid red 1px");
   }); 
})  
</script>

何が問題なのですか？

4

2 に答える 2

1

HTML と JS の両方のコードにいくつかの「バグ」があります。

これが実際の例です：http://jsfiddle.net/kGd2G/1/

divつまり、代わりに使用しますcanvas

<div id="rectangle" style="width: 300px; height: 300px;"></div>

JS を単純化するために、「テンプレート div」を使用して、追加される四角形のデフォルトをいくつか設定しました。

于 2013-04-03T14:16:00.173 に答える