Dans ce tutoriel, nous apprendrons comment définir un multiplicateur pour mettre à l'échelle une image clonée à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'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 définir le multiplicateur afin de mettre à l'échelle l'image clonée, nous utilisons l'attribut multiplier.
cloneAsImage( callback: function, { multiplier: Number}: Object): fabric.Object
Callback (facultatif) - Ce paramètre est une fonction qui utilisera l'instance d'image clonée comme premier argument d'appel.
Options (facultatif) - Ce paramètre est un objet facultatif qui fournit une personnalisation supplémentaire à notre image clonée. En utilisant ce paramètre, nous pouvons définir le multiplicateur, recadrer l'image clonée, supprimer la transformation de l'objet actuel ou modifier de nombreuses propriétés, dont Multiplier est une propriété.
multiplier - Cette propriété accepte une valeur Number qui représente le multiplicateur par lequel l'image de sortie finale est mise à l'échelle. La valeur par défaut est 1.
Regardons un exemple de code pour voir comment un objet Image cloné s'affiche lorsque la propriété multiplier n'est pas utilisée. Dans ce cas, la valeur multiplicatrice par défaut de 1 est 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>Without using the multiplier property</h2> <p>You can see that the clone image uses the default multiplier</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 a shadow object var shadow = new fabric.Shadow({ color: "#308080", blur: 3, }); // Initiate an Image object var image = new fabric.Image(imageElement, { top: 50, left: 110, skewX: 20, shadow: shadow, }); // Using cloneAsImage method image.cloneAsImage(function (Img) { canvas.add(Img); }); </script> </body> </html>
Dans cet exemple, nous avons utilisé l'attribut multiplier et lui avons transmis la valeur 2 pour démontrer que l'image clonée finale sera mise à l'échelle deux fois dans les directions x et y.
<!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 multiplier property</h2> <p>You can see that the clone image has been scaled</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 a shadow object var shadow = new fabric.Shadow({ color: "#308080", blur: 3, }); // Initiate an Image object var image = new fabric.Image(imageElement, { top: 50, left: 110, skewX: 20, shadow: shadow, }); // Using cloneAsImage method image.cloneAsImage( function (Img) { Img.set("top", 90); canvas.add(Img); }, { multiplier: 2, } ); </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!