Dans ce tutoriel, nous allons créer un triangle avec une bordure en pointillés à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.
Nous pouvons modifier l'apparence du tiret de bordure en utilisant la propriété borderDashArray. Cependant, notre objet triangle doit avoir une bordure pour que cette propriété fonctionne. Cette propriété n'aura aucun effet si une valeur incorrecte est spécifiée pour la propriété hasBorders.
new fabric.Triangle({ borderDashArray: Array }: Object)
Options (facultatif) - Ce paramètre est un objet< /em> qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet dont borderDashArray est une propriété, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés
borderDashArray - Cette propriété accepte un tiret spécifié ArrayDéclarez le modèle d'intervalles via un tableau.
Passer borderDashArray comme clé avec une valeur personnalisée
Regardons un exemple de code qui crée une bordure en pointillés à l'aide de la propriété borderDashArray dans FabricJS. Dans cet exemple, nous utilisons un tableau [7,10], qui nous indique que le motif sera créé en traçant une longue ligne de 7 pixels, suivie d'un espace de 10 pixels, et en répétant ce même motif encore et encore.
<!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 borderDashArray as key with a custom value</h2> <p>Select the triangle to see the dash pattern</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", borderColor: "red", borderDashArray: [7, 10], }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Passage de la clé hasBorders avec la valeur "false"
Comme nous pouvons le voir dans cet exemple, même si nous avons attribué aux propriétés borderColor et borderDashArray les valeurs correctes, elles ne fonctionnent pas fonctionne car la propriété hasBorders a été définie sur false. Lorsque la valeur est False, le cadre de sélection de l'objet n'est pas rendu.
<!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 hasBorders key with the value "false"</h2> <p>Select the triangle and observe that its borders have not been rendered.</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", borderColor: "red", borderDashArray: [7, 10], hasBorders: false, }); // Add it to the canvas canvas.add(triangle); </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!