添加额外的矩形时自动增加画布高度

Question

添加矩形时，画布高度不会随其缩放。 不能更改画布高度。 我正在寻找如何使之成为可能的星期。 我的问题是，当添加多个矩形时，画布高度会自动增加，例如bij 100像素，以便它显示完整的矩形，而不仅仅是像现在这样显示一个矩形。

这就是现在的样子https://jsfiddle.net/5qybcp84/

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>IIS7</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/NodeList.js"></script>
        <script src="click.js"></script>
        <script src="date.js"></script>
        <script src='jcanvas.min.js'></script>
        <script src="canvasscript.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
        <b>Nodes</b>
        <br>
        <div class="scrollbar">
            <div class="content">
                <canvas  id="NodeList" width="200"  style="border:2px solid black"></canvas>
            </div>
        </div>

        <div class="Display" id="Display">
            <canvas id="NodeDisplay" style="border:2px solid black;" ></canvas>

            <script>
                var ctx = $('#NodeList').get(0).getContext('2d');

                var rects = [[20, 20, 150, 100], [20, 140, 150, 100]];
                for(var i=0;i<rects.length;i++) {
                    ctx.fillRect(rects[i][0],
                    rects[i][1],
                    rects[i][2],
                    rects[i][3]);
                }

                $('#NodeList').click(function(e) {
                    var x = e.offsetX,
                    y = e.offsetY;

                    for(var i=0;i<rects.length;i++) {
                        if(x > rects[i][0]
                            && x < rects[i][0] + rects[i][2]
                            && y > rects[i][1]
                            && y < rects[i][1] + rects[i][3]) {
                            alert('Rectangle ' + i + ' clicked');
                        }
                    }
                });
            </script>
        </div>

        <div id="canvas-wrap">
        <canvas width="600" height="600" style="border:2px solid black;"></canvas>
        <div id="overlay"></div>
        <div class="een" style="border:2px solid black;" >11111 </div>
        <div class="twee" style="border:2px solid black;" >22222 </div>
        <div class="drie" style="border:2px solid black;" >33333</div>
        <div class="vier" style="border:2px solid black;" >44444 </div>
        </div>
        </div>
    </body>
</html>

html, body {
    height: 100%;
    overflow: hidden;
}

b {
    margin-left: 75px;
}

#container {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

a img {
    border:none;
}

.scrollbar{
    width:220px;
    height:1050px;
    border:1px solid #000;
    overflow:scroll;
    overflow-x: hidden;
    position: fixed;
}

.content{
    width:auto;
    height:100%;
}       

#Display {
    margin-left: 580px;
    float: left;
}    

#NodeDisplay{
    float: left;
    height: 300px;
    width: 600px;
    margin-left: -200px;
}   

#canvas-wrap { 

    position:fixed;                   
    margin-left: 380px;
    float: left;
    position: fixed;
    margin-top: 435px;
}
#canvas-wrap canvas { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0
} 

.een{
    height: auto;  
    width: 600px;
}

.twee{
    height: auto;  
    width: 600px;
}

.drie {
    height: auto;  
    width: 600px;

}

.vier{
    height: auto;  
    width: 600px;

}

Answer 1

如果要在不拉伸图形的情况下调整画布大小，则需要使用draw（）方法。 此绘制方法会将所有对象添加到画布。 因此，您必须将对象保存在某处。 您需要执行此操作，因为调整画布大小会清除它。 draw方法需要知道当前对象，并在每次调整画布大小时绘制它们。

您可以添加一些JQuery代码：

每次添加矩形：

$('#NodeList').height("+=100");
draw();

删除矩形时：

$('#NodeList').height("-=100");
draw();

在您的示例中，现在将是for循环的。 但是整个循环。

添加额外的矩形时自动增加画布高度

问题描述

1 个解决方案

解决方案1
-1 2015-05-01 10:51:55

添加额外的矩形时自动增加画布高度

问题描述

1 个解决方案

解决方案1 -1 2015-05-01 10:51:55

解决方案1
-1 2015-05-01 10:51:55