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

4

您可能应该使用.append()而不是.add(). .add()不会将 div 添加到 DOM，而是将元素添加到一组匹配的元素中。

编辑：再想一想，我看到您正在尝试将 div 附加到画布元素。您可能有兴趣检查this，其中说明：

canvas 元素的内容（如果有）是该元素的后备内容。

所以你应该用 div 替换你的 canvas 元素。那，或编辑您的问题以更好地反映此细节。

于 2013-04-03T13:57:34.057 回答
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 回答