web-dev-qa-db-fra.com

Comment mettre le pourcentage de largeur dans la toile html (no css)

J'ai une image et j'ai superposé une toile pour pouvoir dessiner "sur" l'image sans modifier l'image elle-même. 

<div class="needPic" id="container">
    <img id="image" src=""/>
    <!-- Must specify canvas size in html -->
    <canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas>
</div>

Je peux spécifier la largeur et la hauteur en pixels dans la ligne de la toile ci-dessus et cela fonctionne très bien. Toutefois, j'ai besoin de cette taille dynamiquement en fonction de la taille de l'écran (doit fonctionner sur les petits smartphones ainsi que sur les tablettes). Lorsque j'essaie de saisir le pourcentage indiqué ci-dessus, il l'interprète en pixels. Ainsi, la toile aura une largeur de 70 px et une hauteur de 60 px.

Pour une raison quelconque, je ne peux pas dimensionner la toile dans le CSS, alors il me semble que je dois le faire au format HTML. Pour clarifier, lorsque j'essaie de spécifier les dimensions de la toile dans le CSS, elles ne changent pas réellement la taille de la toile. Il semble que l'image interfère d'une manière ou d'une autre.

Toute aide serait appréciée.

Mise à jour: Si je fais <canvas id="sketchpad" style="width:70%;height:60%;"></canvas>, la valeur par défaut est 150px de haut et 300px de large (quel que soit le périphérique), puis étire le canevas en fonction du div. Je règle la div à 60% largeur et 60% hauteur dans le css, ainsi la toile s’étire pour remplir cela. Je l'ai confirmé en enregistrant le fichier canvas.width vs canvas.style.width - canvas.width était de 300 pixels et que canvas.sytle.width était de '60% '(à partir du div parent). Cela provoque des effets de pixelisation et de dessin vraiment étranges ...

htmlcanvas
22
Anthony Elliott

Vous devez définir la taille de la zone de travail en pixels, sinon vous réduirez non seulement la qualité de son contenu, mais si vous souhaitez dessiner dessus, les coordonnées de la souris seront également désactivées. N'utilisez pas CSS pour redimensionner la toile si vous l'utilisez de manière interactive.

Je vous recommande d’ajuster votre image puis d’adopter le canevas à la taille de l’image. Vous pouvez le faire en utilisant getComputedStyle(element) qui vous donne la taille de l'élément définie en pixels.

Après la onload de l'image (vous devez être sûr que l'image est réellement chargée pour obtenir sa taille) ou plus tard, si vous modifiez la taille de l'image (CSS) à tout moment, vous pouvez procéder comme suit:

/// get computed style for image
var img = document.getElementById('myImageId');
var cs = getComputedStyle(img);

/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);

/// now use this as width and height for your canvas element:
var canvas = document.getElementById('myCanvasId');

canvas.width = width;
canvas.height = height;

Désormais, le canevas correspondra à l'image, mais avec un ratio de pixels 1: 1 pour vous éviter des problèmes lorsque vous dessinez sur le canevas. Sinon, vous devrez également convertir/redimensionner les coordonnées de la souris/du toucher.

25
user1693593

Redimensionnez votre toile pour l’adapter à la taille de la fenêtre/du navigateur:

<script>
function resizeCanvas() {
    var canvs = document.getElementById("snow");
    canvs.width = window.innerWidth;
    canvs.height = window.innerHeight;
}
</script>

<body onload="resizeCanvas();">
    <canvas id="snow" ></canvas>
</body>
8
Irshad Khan

Vous pouvez redimensionner le canevas pour l'adapter à la largeur de l'image en pixels via JavaScript. Puisque vous utilisez une toile, vous utilisez probablement déjà JavaScript, ce qui ne devrait pas poser de problème.

Voir Redimensionner le canevas HTML5 pour s’adapter à la fenêtre , bien que non identique, une solution similaire devrait fonctionner.

0
Jochem Kuijpers

Définissez la hauteur de la zone de dessin sur la hauteur intérieure de la fenêtre et la largeur sur la largeur intérieure de la fenêtre:

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

Si vous voulez un pourcentage spécifique, multipliez-les par le pourcentage ..__ Exemple:

//25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages
0
C12