添加額外的矩形時自動增加畫布高度

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