Table des matières
Syntaxe
Paramètres
Option Key
Exemple 2
Maison interface Web js tutoriel Comment définir le remplissage d'un cercle à l'aide de FabricJS ?

Comment définir le remplissage d'un cercle à l'aide de FabricJS ?

Aug 25, 2023 am 10:45 AM

如何使用 FabricJS 设置圆的填充?

Dans ce tutoriel, nous apprendrons comment définir le remplissage d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille d'un objet circulaire dans le canevas, nous pouvons également définir le remplissage de l'objet circulaire. Cela peut être fait en utilisant l'attribut padding.

Syntaxe

1

new fabric.Circle({ padding : Number }: Object)

Copier après la connexion

Paramètres

  • Options (facultatif) - Ce paramètre est un objet< /em> qui offre une personnalisation supplémentaire pour nos cercles. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet dont padding est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

  • Option Key

    • Padding - Cette propriété accepte une valeur numérique. La valeur attribuée détermine la distance entre l'objet circulaire et son cadre de délimitation de contrôle.

    Exemple 1

    Apparence par défaut lorsque le remplissage n'est pas utilisé

    Jetons un coup d'œil au code qui affiche l'apparence d'un objet circulaire lorsque l'attribut padding n'est pas utilisé. Comme nous pouvons le constater, il n’y a aucun espace entre l’objet et ses limites de contrôle environnantes. Cela signifie qu’il n’y a aucun remplissage entre le cercle et son cadre de délimitation de contrôle.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    <em>&lt;!DOCTYPE html&gt;

    &lt;html&gt;

       &lt;head&gt;

          &lt;!-- Adding the Fabric JS Library--&gt;

          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;

       &lt;/head&gt;

     

       &lt;body&gt;

          &lt;h2&gt;Setting the padding of circle using FabricJS&lt;/h2&gt;

          &lt;p&gt;Select the object and observe that there is no space between the object and its surrounding controlling borders. This is the default behavior. We haven&#39;t used any &lt;b&gt;padding&lt;/b&gt; here. &lt;/p&gt;

          &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;

     

          &lt;script&gt;

             // Initiate a canvas instance

             var canvas = new fabric.Canvas(&quot;canvas&quot;);

             var circle = new fabric.Circle({

                left: 115,

                top: 50,

                radius: 50,

                fill: &quot;#85bb65&quot;

             });

             canvas.add(circle);

             canvas.setWidth(document.body.scrollWidth);

             canvas.setHeight(250);

          &lt;/script&gt;

       &lt;/body&gt;

    &lt;/html&gt;</em>

    Copier après la connexion

    Exemple 2

    Passer la propriété padding en tant que clé

    Dans cet exemple, nous transmettons la propriété padding en tant que clé avec la valeur 7. Cela signifie que la distance entre l'objet circulaire et toutes ses bordures de contrôle est de 7 pixels.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    <em>&lt;!DOCTYPE html&gt;

    &lt;html&gt;

       &lt;head&gt;

          &lt;!-- Adding the Fabric JS Library--&gt;

          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;

       &lt;/head&gt;

     

       &lt;body&gt;

          &lt;h2&gt;Setting the padding of circle using FabricJS&lt;/h2&gt;

          &lt;p&gt;Select the object and notice the padding between the object and its controlling border. Here we have set the &lt;b&gt;padding&lt;/b&gt; at 10px.&lt;/p&gt;

          &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;

     

          &lt;script&gt;

             // Initiate a canvas instance

             var canvas = new fabric.Canvas(&quot;canvas&quot;);

             var circle = new fabric.Circle({

                left: 115,

                top: 50,

                padding: 10,

                radius: 50,

                fill: &quot;#85bb65&quot;

             });

             canvas.add(circle);

             canvas.setWidth(document.body.scrollWidth);

             canvas.setHeight(250);

          &lt;/script&gt;

       &lt;/body&gt;

    &lt;/html&gt;</em>

    Copier après la connexion

    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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript 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é 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é

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

8 Superbes plugins de mise en page JQuery Page 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

Qu'est-ce que & # x27; ceci & # x27; en javascript? 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 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 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

See all articles