Maison > Article > interface Web > FabricJS - Comment créer une instance de fabric.Image à partir de sa représentation objet ?
FabricJS - Comment créer une instance de fabric.Image à partir de sa représentation objet ?
- WBOYavant
- 2023-08-25 21:17:14718parcourir
Dans ce tutoriel, nous allons vous montrer comment créer une instance de Fabric.Image Obtenu à partir de sa représentation d'objet à l'aide de FabricJS. Nous pouvons créer un objet Image en Créez une instance de fabric.Image. Puisqu'il s'agit d'un des éléments de base de FabricJS, Nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour créer une instance de fabric.Image à partir de sa représentation objet, nous utilisons Méthode fromObject.
Grammaire
fromObject(object: Object, callback: function)
Paramètres
object - Ce paramètre accepte un objet qui représente l'objet à obtenir à partir de L'image sera créée.
callback - Ce paramètre est une fonction lorsque l'image Instance créée.
Ne pas utiliser la méthode fromObject
Exemple
Regardons un exemple de code pour comprendre comment un objet Image apparaît lorsque fromObject La méthode n’est pas utilisée. Dans ce cas, il suffit de créer une instance de fabric.Image et Ajoutez ceci à notre toile.
<!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>Without using the fromObject method</h2>
<p>You can see that the image object has been added to the canvas</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);
</script>
</body>
</html>
Utilisez la méthode fromObject
Exemple
Dans cet exemple, nous avons utilisé la méthode fromObject pour démontrer que nous pouvons Les objets image peuvent être créés même si nous n'avons pas d'élément image. Dans ce cas nous Objet à partir duquel l'instance d'image doit être créée. après Appelez la fonction de rappel et ajoutez-la au canevas.
<!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 fromObject method</h2>
<p>You can see that the image has been added</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Using fromObject method
fabric.Image.fromObject({
type: "image",
version: "5.1.0",
originX: "left",
originY: "top",
left: 110,
src: "https://www.tutorialspoint.com/images/logo.png",
},
function(oImg) {
oImg.set("top", 50);
canvas.add(oImg);
}
);
</script>
</body>
</html>
Conclusion
Dans ce tutoriel, nous utilisons deux exemples pour montrer comment créer une instance Obtenez un Fabric.Image à partir de sa représentation d'objet à l'aide de FabricJS.
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!