Maison > Article > interface Web > Comment définir les propriétés d'un objet image à partir des options à l'aide de FabricJS ?
Comment définir les propriétés d'un objet image à partir des options à l'aide de FabricJS ?
- 王林avant
- 2023-08-23 08:01:041471parcourir
Dans ce tutoriel, nous apprendrons comment définir les propriétés d'un objet image à partir des options
Utilisez FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image Puisqu'il s'agit d'un des éléments de base de FabricJS, nous pouvons également le modifier facilement en le personnalisant Appliquez des propriétés telles que l'angle, l'opacité, etc. afin de définir les propriétés de l'objet image de Options, nous utilisons la méthode setOptions.Grammaire
setOptions(options: Object)
Paramètres
options (facultatif) - Ce paramètre est un Object qui fournit des Personnalisez notre objet. Utilisez ce paramètre origine, largeur de trait et bien d'autres choses D'autres propriétés liées à l'objet image peuvent être modifiées.
Apparence par défaut des objets image
La traduction chinoise deExemple
est :Exemple
Regardons un exemple de code pour voir comment un objet Image est affiché lorsque setOptions est présent.
Méthode non utilisée.<!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 image object</h2>
<p>You can see the default appearance of Image object</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Comment définir les propriétés d'un objet image à partir des options à l'aide de FabricJS ?" >
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement);
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Utilisez la méthode setOptions
La traduction chinoise deExemple
est :Exemple
Dans cet exemple, nous utilisons la méthode setOptions pour définir les propriétés de l'image
Options Ici, nous avons appliqué un trait de couleur « vert » de 4 px et réajusté la valeur. choix. Ici, nous avons appliqué un trait de 4 pixels avec la couleur "vert" et redimensionné le Définissez la position de l'objet Image sur une valeur supérieure de 30 et une valeur gauche de 100.<!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>Using setOptions method</h2>
<p>
You can see that the object's properties have been set using setOptions method
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Comment définir les propriétés d'un objet image à partir des options à l'aide de FabricJS ?" >
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement);
// Using setOptions method
image.setOptions({
left: 100,
top: 30,
stroke: "green",
strokeWidth: 4,
});
// Add it to the canvas
canvas.add(image);
</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!