0

いくつかのツールを備えたキャンバスがあり、それは 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;
}
4

1 に答える 1

0

返信に時間がかかって申し訳ありません。すでに回答が見つかっていることを願っています。

キャンバスの幅と高さをピクセル単位で把握したら、使用できます

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>
于 2013-06-02T16:29:52.227 に答える