Как настроить контейнер для холста на основе ввода пользователем?

У меня есть холст с некоторыми инструментами, и он находится в 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>

Я попытался установить минимальную высоту и минимальную ширину, но это не сработало. Граница контейнера соответствовала размеру браузера. Возможно ли установить 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; 
}

источник

2013-04-14 lifeisgood

может помочь с ответом, который использует Javascript, но вы ищете ответ, который просто использует HTML и CSS? – jing3142

На данный момент я готов попробовать что угодно. Итак, да, Javascript будет замечательным. =) Спасибо. – lifeisgood

Hi, jing3142. Не могли бы вы посоветовать мне использовать Javascript? Это означало бы мир для меня. Благодаря! знак равно – lifeisgood

Извините, что так долго в ответе, надеюсь, что вы уже нашли ответ.

После того, как вы знаете, ширину и высоту холста в пикселях вы можете использовать

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-02 16:29:52 jing3142

Как настроить контейнер для холста на основе ввода пользователем?

ответ

Смежные вопросы