Question

我有一个带有一些工具的画布，它在div中。如何根据用户输入的画布宽度和高度自动调整div？

<div id="container">
    <canvas id="theCanvas" width="<?php echo $_POST['inputwidth'] ?>" height="<?php echo $_POST['inputheight'] ?>"></canvas>
<div class="tools">
<span class="icon"> 
    <button id="brushTool"></button>
</span>
</div>
</div>

我尝试过设置min-height和min-width但是没有用。容器的边框遵循浏览器的大小。是否可以将max-height / width设为php +一定的余量？多谢你们！ =）

#container{
    border-right: dotted black 5px;
    border-left: dotted black 5px;
    border-top: dotted black 5px;
    border-bottom: dotted black 5px;
    margin: auto;
}

#theCanvas {
    border: solid black 5px;
    border-radius: 10px;
    background: #ffffff;
    margin-left: 20%;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: crosshair;
}

Answer 1

很抱歉花了这么长时间回复，希望你已经找到了答案。

一旦您知道画布的宽度和高度（以像素为单位），您可以使用

CVW=document.getElementById("theCanvas").width;
CVH=document.getElementById("theCanvas").height;

CNW=CVW/0.6 //(for a 20% left and right margin given to the canvas)
CNH=CVH+40  //(for a 20px top and bottom margin given to the canvas)
document.getElementById("container").style.width=CNW+"px";
document.getElementById("container").style.height=CNH+"px";

您需要将它放在一个函数中，并且只有在知道画布的宽度和高度时才调用它。

请注意，容器的宽度和高度是使用css样式设置的，但不适用于画布。

以下完整的简化版

<html>
    <head>
        <style>
            #container{
                border-right: dotted black 5px;
                border-left: dotted black 5px;
                border-top: dotted black 5px;
                border-bottom: dotted black 5px;
                margin: auto;
            }

            #theCanvas {
                border: solid black 5px;
                border-radius: 10px;
                background: #ffffff;
                margin-left: 20%;
                margin-top: 20px;
                margin-bottom: 20px;
                cursor: crosshair;
            }
        </style>
        <script>

            function set() {
                CVW=document.getElementById("theCanvas").width;
                CVH=document.getElementById("theCanvas").height;

                CNW=CVW/0.6; //(for a 20% left and right margin given to the canvas)
                CNH=CVH+40;  //(for a 20px top and bottom margin given to the canvas)
                document.getElementById("container").style.width=CNW+"px";
                document.getElementById("container").style.height=CNH+"px";
            }
        </script>
    </head>
    <body onload="set()">
        <div id="container">
            <canvas id="theCanvas" width=200 height="300"></canvas>
        </div>
    </body>
</html>

如何根据用户输入调整画布容器？

1 个答案: