web-dev-qa-db-fra.com

Comment rendre la toile sensible

J'utilise bootstrap. Je veux que l’utilisateur puisse choisir la taille de la toile tout en maintenant l’écran de conception réactif au sein de la 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>

Comment puis-je limiter la taille de la toile à la taille de la div?

Je ne sais pas s'il sera nécessaire d'utiliser JavaScript.

Modifier

Il faut tenir compte du fait que les valeurs de largeur et de hauteur sont entrées par l'utilisateur et que la toile doit être de taille proportionnelle à la taille.

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

csshtml5canvasresponsive-design
23
Gislef

Changer de largeur n'est pas si difficile. Supprimez simplement l'attribut width de la balise et ajoutez width: 100%; dans le css pour #canvas

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

Changer de hauteur est un peu plus difficile: vous avez besoin de javascript. J'ai utilisé jQuery parce que je suis plus à l'aise avec.

vous devez supprimer l'attribut height de la balise canvas et ajouter ce script:

  <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>

Vous pouvez voir ce violon: https://jsfiddle.net/1a11p3ng/3/

EDIT:

Pour répondre à votre deuxième question. Vous avez besoin de javascript

0) Tout d'abord, j'ai changé votre identifiant #border en une classe car les identifiants doivent être uniques pour un élément dans une page html (vous ne pouvez pas avoir 2 tags avec le même identifiant)

.border{
  border: solid 1px black;
}

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

1) Changé votre HTML pour ajouter des identifiants si nécessaire, deux entrées et un bouton pour définir les valeurs

<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) Réglez la hauteur et la largeur de la toile de sorte qu’elle s’intègre à l’intérieur du conteneur

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

3) Définir les valeurs des formes largeur et hauteur

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

4) Enfin, chaque fois que vous cliquez sur le bouton, vous définissez la largeur et la hauteur de la toile selon les valeurs définies. Si la valeur de la largeur est supérieure à la largeur du conteneur, le redimensionnement de la zone de travail à la place de la largeur du conteneur (sinon, votre présentation sera brisée).

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

Voir un exemple complet ici https://jsfiddle.net/1a11p3ng/7/

UPDATE 2:

Pour avoir un contrôle total sur la largeur, vous pouvez utiliser ceci:

<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/

les colonnes gauche et droite du contenu se déplaceront au-dessus et au-delà de la division centrale si la largeur est trop élevée, mais vous ne pourrez pas y remédier si vous utilisez bootstrap. Ce n’est cependant pas ce que signifie réactif. un site véritablement réactif adaptera sa taille à l'écran de l'utilisateur pour conserver la mise en page comme vous le souhaitez sans aucune entrée externe; laisser l'utilisateur définir n'importe quelle taille, ce qui risquerait de casser votre mise en page ne signifie pas pour autant que le site doit être réactif.

18
valepu

Vous pouvez avoir un canevas réactif en 3 étapes courtes et simples:

  1. Supprimez les attributs width et height de votre <canvas>.

    <canvas id="responsive-canvas"></canvas>

  2. Avec CSS, définissez le width de votre toile sur 100%.

    #responsive-canvas {
  width: 100%;
}

  3. En utilisant JavaScript, définissez la hauteur sur un rapport de la largeur.

    var canvas = document.getElementById('responsive-canvas');
var heightRatio = 1.5;
canvas.height = canvas.width * heightRatio;
11
Faheel Ahmad

cela à l'air de marcher :

#canvas{
  border: solid 1px blue; 
  width:100%;
}
5
TheGrum
<div class="outer">
 <canvas id="canvas"></canvas>
</div>    

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

#canvas {
 position: absolute;
 width: 100%;
 height: 100%;
}
5
Michael Sherris Caley

étendre la réponse acceptée avec jQuery

que faire si vous voulez ajouter plus de toile ?, ce jquery.each y répondre

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);
  })

}

il fera tout le travail pour vous

pourquoi ne définissons-nous pas le width ou le height via css ou style? car il étendra votre toile au lieu de la transformer en taille attendue

4
david valentino

Il existe un meilleur moyen de le faire dans les navigateurs modernes en utilisant les unités vh et vw.

vh est la hauteur de la fenêtre.

Donc, vous pouvez essayer quelque chose comme ça:

<style>
canvas {
  border: solid 2px purple;
  background-color: green;
  width: 100%;
  height: 80vh;
}
</style>

Cela faussera l'aspect rationnel.

Vous pouvez conserver le rapport hauteur/largeur en utilisant la même unité pour chacun. Voici un exemple avec un format 2: 1:

<style>
canvas {
  width: 40vh;
  height: 80vh;
}
</style>
0
Michael Cole