Jak zrobić wrażliwe na płótno

Question

Używam bootstrap. Chcę, aby użytkownik mógł wybrać rozmiar płótna, zachowując jednocześnie responsywność ekranu projektu w elemencie div.

<div class="row"> 
    <div class="col-xs-2 col-sm-2" id="border">content left</div> 
    <div class="col-xs-6 col-sm-6" id="border"> 
    Width <input type="number" class="form-control"><br> 
    Height <input type="number" class="form-control"><br> 
    canvas 
    <canvas id="canvas" width="500" height="300"> 
    </canvas> 

    </div> 
    <div class="col-xs-2 col-sm-2" id="border">content right</div> 

Jak mogę ograniczyć rozmiar płótna do rozmiaru div?

Nie wiem, czy konieczne będzie korzystanie z JavaScript.

---

Edit

Należy wziąć pod uwagę, że wartości szerokość i wysokość są wprowadzane przez użytkownika i płótno musi być w div proporcjonalny w rozmiarze

https://jsfiddle.net/1a11p3ng/2/

Answer 1

Zmiana szerokości nie jest trudna. Wystarczy usunąć atrybut width ze znacznika i dodać width: 100%; w css dla #canvas

#canvas{ 
    border: solid 1px blue; 
    width: 100%; 
} 

Zmiana wysokości jest nieco trudniej: trzeba JavaScript. Użyłem jQuery, ponieważ jest mi wygodniej.

trzeba usunąć atrybut z tagu płótnie height i dodać ten skrypt:

<script> 
    function resize(){  
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight())); 
    } 
    $(document).ready(function(){ 
    resize(); 
    $(window).on("resize", function(){      
     resize(); 
    }); 
    }); 
    </script> 

widać to skrzypce:

EDIT:

Aby odpowiedzieć na drugie pytanie. Trzeba javascript

0) Przede wszystkim zmienił swój identyfikator #border do klasy ponieważ identyfikatory muszą być unikalne dla elementu wewnętrznej stronie html (nie można mieć 2 tagi z tym samym ID)

.border{ 
    border: solid 1px black; 
} 

#canvas{ 
    border: solid 1px blue; 
    width: 100%; 
} 

1) Zmieniono kod HTML, aby dodać identyfikatory w razie potrzeby, dwa wejścia oraz przycisk do ustawiania wartości

<div class="row"> 
    <div class="col-xs-2 col-sm-2 border">content left</div> 
    <div class="col-xs-6 col-sm-6 border" id="main-content"> 
    <div class="row"> 
     <div class="col-xs-6"> 
     Width <input id="w-input" type="number" class="form-control"> 
     </div> 
     <div class="col-xs-6"> 
     Height <input id="h-input" type="number" class="form-control"> 
     </div> 
     <div class="col-xs-12 text-right" style="padding: 3px;"> 
     <button id="set-size" class="btn btn-primary">Set</button> 
     </div> 
    </div> 
    canvas 
    <canvas id="canvas"></canvas> 

    </div> 
    <div class="col-xs-2 col-sm-2 border">content right</div> 
</div> 

2) Ustawić wysokość i szerokość obszaru roboczego tak, że pasuje do wnętrza pojemnika

$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight())); 

3) Ustaw wartości szerokości i wysokości tworzy

$("#h-input").val($("#canvas").outerHeight()); 
$("#w-input").val($("#canvas").outerWidth()); 

4) Wreszcie, po kliknięciu na przycisk ustawić szerokość i wysokość obszaru roboczego do wartości ustalonych.Jeśli wartość szerokość jest większa niż szerokość kontenera to będzie zmienić rozmiar płótna do szerokości kontenera zamiast (w przeciwnym razie będzie przerwa układ)

$("#set-size").click(function(){ 
     $("#canvas").outerHeight($("#h-input").val()); 
     $("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width())); 
    }); 

Zobacz pełną przykładem https://jsfiddle.net/1a11p3ng/7/

UPDATE 2:

Aby mieć pełną kontrolę nad szerokością można użyć tego:

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-xs-2 border">content left</div> 
    <div class="col-xs-8 border" id="main-content"> 
    <div class="row"> 
     <div class="col-xs-6"> 
     Width <input id="w-input" type="number" class="form-control"> 
     </div> 
     <div class="col-xs-6"> 
     Height <input id="h-input" type="number" class="form-control"> 
     </div> 
     <div class="col-xs-12 text-right" style="padding: 3px;"> 
     <button id="set-size" class="btn btn-primary">Set</button> 
     </div> 
    </div> 
     canvas 
    <canvas id="canvas"> 

    </canvas> 

    </div> 
    <div class="col-xs-2 border">content right</div> 
</div> 
</div> 
    <script> 
    $(document).ready(function(){ 
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight())); 
    $("#h-input").val($("#canvas").outerHeight()); 
    $("#w-input").val($("#canvas").outerWidth()); 
    $("#set-size").click(function(){ 
     $("#canvas").outerHeight($("#h-input").val()); 
     $("#main-content").width($("#w-input").val()); 
     $("#canvas").outerWidth($("#main-content").width()); 
    }); 
    }); 
    </script> 

https://jsfiddle.net/1a11p3ng/8/

Treść po lewej stronie i kolumny z prawą zawartością przesuną się powyżej i uwielbią centralny działka div, jeśli szerokość jest zbyt wysoka, ale nie będzie to pomocne, jeśli używasz ładowania początkowego. Nie oznacza to jednak reakcji. prawdziwie responsywna strona dostosuje swój rozmiar do ekranu użytkownika, aby zachować układ w zamierzony sposób bez żadnych zewnętrznych danych wejściowych, pozwalając użytkownikowi ustawić dowolny rozmiar, który może złamać twój układ, nie oznacza tworzenia responsywnej strony.

Answer 2

to wydaje się działać:

#canvas{ 
    border: solid 1px blue; 
    width:100%; 
} 

Answer 3

<div class="outer"> 
<canvas></canvas> 
</div>  

.outer { 
position: relative; 
width: 100%; 
padding-bottom: 100%; 
} 

#canvas { 
position: absolute; 
width: 100%; 
height: 100%; 
} 

Answer 4

przedłużające zaakceptowane odpowiedź z jQuery

co jeśli chcesz dodać więcej płótno? Ta jQuery.each odpowiedzieć na to

responsiveCanvas(); //first init 
$(window).resize(function(){ 
    responsiveCanvas(); //every resizing 
    stage.update(); //update the canvas, stage is object of easeljs 

}); 
function responsiveCanvas(target){ 
    $(canvas).each(function(e){ 

    var parentWidth = $(this).parent().outerWidth(); 
    var parentHeight = $(this).parent().outerHeight(); 
    $(this).attr('width', parentWidth); 
    $(this).attr('height', parentHeight); 
    console.log(parentWidth); 
    }) 

} 

to zrobi wszystko zadanie dla ciebie

dlaczego nie ustawiamy width lub height poprzez css lub styl? ponieważ będzie rozciągać płótno zamiast zmieniać go w oczekiwany rozmiar: