Comment créer un canevas avec un Triangle en utilisant FabricJS ?
Sep 15, 2023 pm 12:33 PM
Dans ce tutoriel, nous allons apprendre à créer un canevas avec un objet Triangle à 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.
Syntaxe
new fabric.Triangle({ width: Number, height: Number }: Object)Paramètres
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 triangle telles que la couleur, le curseur, la largeur du trait, et ses largeur et hauteur sont des propriétés.
Touche d'option
Width - Cette propriété accepte un number qui spécifie la largeur de l'objet. Sa valeur par défaut est 100.
Hauteur - Cette propriété accepte un Nombre qui spécifie la hauteur de l'objet. Sa valeur par défaut est 100.
Exemple 1
Créez une instance Fabric.Triangle() et ajoutez-la au canevas
Regardons un exemple de code pour voir comment ajouter un triangle au canevas. Ici, nous créons un objet d'une largeur de 100px et d'une hauteur de 70px. De plus, nous avons utilisé la couleur « Orange » comme couleur de remplissage.
<!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>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
<p>You can move around the triangle and interact with it</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: 55,
top: 60,
width: 100,
height: 70,
fill: "orange",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Exemple 2
Utilisation de la méthode set pour manipuler un objet Triangle
Dans cet exemple, nous utilisons la méthode set pour définir la valeur. Toutes les propriétés liées au trait, à la largeur du trait, à l'angle, à l'échelle, à la rotation, etc. peuvent être modifiées à l'aide de cette méthode.
<!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>Manipulating the Triangle object by using the set method</h2>
<p>You can move around the triangle and interact with it</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();
// Set the properties
triangle.set("height", 70);
triangle.set("width", 100);
triangle.set("stroke", "#2a52be");
triangle.set("strokeWidth", 5);
triangle.set("fill", "#d9603b");
triangle.set("top", 60);
triangle.set("left", 55);
// 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!
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Remplacer les caractères de chaîne en javascript
Mar 11, 2025 am 12:07 AM
Remplacer les caractères de chaîne en javascript
Tutoriel de configuration de l'API de recherche Google personnalisé
Mar 04, 2025 am 01:06 AM
Tutoriel de configuration de l'API de recherche Google personnalisé
8 Superbes plugins de mise en page JQuery Page
Mar 06, 2025 am 12:48 AM
8 Superbes plugins de mise en page JQuery Page
Créez vos propres applications Web Ajax
Mar 09, 2025 am 12:11 AM
Créez vos propres applications Web Ajax
Qu'est-ce que & # x27; ceci & # x27; en javascript?
Mar 04, 2025 am 01:15 AM
Qu'est-ce que & # x27; ceci & # x27; en javascript?
Améliorez vos connaissances jQuery avec le spectateur source
Mar 05, 2025 am 12:54 AM
Améliorez vos connaissances jQuery avec le spectateur source
10 feuilles de triche mobiles pour le développement mobile
Mar 05, 2025 am 12:43 AM
10 feuilles de triche mobiles pour le développement mobile
