Maison > Article > interface Web > Comment définir la valeur d'échelle minimale autorisée par Textbox à l'aide de FabricJS ?
Comment définir la valeur d'échelle minimale autorisée par Textbox à l'aide de FabricJS ?
- WBOYavant
- 2023-08-24 13:09:031031parcourir
Dans ce tutoriel, nous apprendrons comment définir la proportion minimale autorisée de Textbox à l'aide de FabricJS. Nous pouvons personnaliser, étirer ou déplacer le texte écrit dans la zone de texte. Afin de créer une zone de texte, nous devons créer une instance de la classe fabric.Textbox et l'ajouter au canevas. De même, nous pouvons également utiliser l'attribut minScaleLimit pour définir son échelle minimale autorisée.
Grammaire
new fabric.Textbox(text: String, { minScaleLimit : Number }: Object)
Paramètres
text - Ce paramètre accepte une String qui est la chaîne de texte que nous voulons afficher dans la zone de texte.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre zone de texte. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés liées à l'objet dont minScaleLimit est la propriété.
Touche d'option
minScaleLimit - Cette propriété accepte Number comme valeur qui nous permet de contrôler la valeur d'échelle minimale autorisée pour la zone de texte.
Exemple 1
Apparence par défaut des objets de zone de texte
Regardons un exemple de code pour voir à quoi ressemble notre objet zone de texte lorsque nous n'utilisons pas la propriété minScaleLimit. Dans ce cas, nous pourrons redimensionner l'objet librement puisqu'aucune limite minimale n'est définie.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of the Textbox object</h2>
<p>You can scale the textbox object to see that there is no minimum limit set</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a textbox object
var textbox = new fabric.Textbox("That which does not kill us makes us stronger.", {
backgroundColor: "#e5e4e2",
width: 400,
left: 50,
top: 70,
fill: "#e1a95f",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Exemple 2
Passez l'attribut minScaleLimit comme clé avec une valeur personnalisée
Dans cet exemple, nous verrons comment l'attribution d'une valeur à la propriété minScaleLimit modifie la valeur d'échelle minimale autorisée d'un objet zone de texte dans le canevas. Ici, nous utilisons 0,8 comme valeur, ce qui signifie que nous ne pourrons pas réduire l'objet à une largeur inférieure à 240 pixels, la largeur est calculée par largeur * limite (0,8 *300 = 240 pixels).
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing the minScaleLimit property as key with a custom value</h2>
<p> You can scale the textbox object to see that there is a minimum limit set</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a textbox object
var textbox = new fabric.Textbox("That which does not kill us makes us stronger.", {
backgroundColor: "#e5e4e2",
width: 400,
left: 50,
top: 70,
fill: "#e1a95f",
minScaleLimit: 0.8,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!