Dans ce tutoriel, nous allons vous montrer comment créer une représentation sous forme de chaîne Objet image utilisant FabricJS. Nous pouvons créer un objet Image en créant une instance Tissu.Image. Puisqu’il s’agit d’un des éléments de base de FabricJS, on peut aussi facilement Personnalisez-le en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour créer une chaîne Pour la représentation des objets Image, nous utilisons la méthode toString.
toString(): String
Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toString. exister Dans ce cas, une représentation sous forme de chaîne de l’instance d’image est renvoyé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>Using the toString method</h2>
<p>
You can open console from dev tools and see that the logged output contains the String representation of the image instance
</p>
<canvas id="canvas"></canvas>
<img
src="https://www.tutorialspoint.com/images/logo.png"
id="img1"
style="display: none"
/>
<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, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using the toString method
console.log(
"String representation of the Image instance is: ",
image.toString()
);
</script>
</body>
</html>
Regardons un exemple de code pour voir comment comparer deux objets en les regardant leurs représentations de chaîne respectives. Ici, nous initialisons une instance Image et un Instance rectangulaire. En appliquant la méthode toString à chaque objet, nous pouvons voir leur La représentation sous forme de chaîne respective dans la console.
<!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 toString method to compare two different elements</h2>
<p>
You can open console from dev tools and see that the logged output contains the String representation of the Image instance and the rectangle instance
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<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, {
top: 50,
left: 110,
});
// Initiate a Rectangle object
var rect = new fabric.Rect({
stroke: "red",
strokeWidth: 20,
width: 20,
height: 50,
left: 460,
top: 55,
});
// Add them to the canvas
canvas.add(image);
canvas.add(rect);
// Using the toString method
console.log(
"String representation of the Image instance is: ",
image.toString()
);
console.log(
"String representation of the Rectangle instance is: ",
rect.toString()
);
</script>
</body>
</html>
Dans ce tutoriel, nous utilisons deux exemples pour montrer comment créer une chaîne Utilisez FabricJS pour représenter les objets Image.
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!
Comment ouvrir des fichiers HTML sur un téléphone mobile
Comment résoudre une erreur dans le script de la page actuelle
Comment implémenter la messagerie instantanée sur le front-end
ERR_CONNECTION_REFUSED
Que sont les boîtes mail internationales ?
Quelle inscription est la plus prometteuse dans le cercle monétaire ?
Vérifier les fenêtres d'occupation du port
winkawaksrom
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
