Qu'est-ce que fabricjs ? Disposition d'utilisation de la bibliothèque de dessins frontale Fabricjs (avec code)

Le contenu de cet article porte sur qu'est-ce que fabricjs ? L'utilisation de la bibliothèque de dessins frontale fabricjs (avec code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Je l'utilise depuis un moment. D'une manière générale, c'est un outil de dessin vectoriel très puissant. La documentation officielle est également riche, mais l'organisation des documents n'est pas très bonne, et quelques conceptions d'API ne le sont pas. cohérent. Il faut encore faire le tri.

Canvas

canvas est l'objet le plus basique. Il est encapsulé pour la balise
Cet objet canevas n'est pas un élément du DOM Si vous avez besoin de contrôler le DOM ou le contexte correspondant, vous devez quand même l'obtenir vous-même.

canvasElement = document.getElementById(canvasEle);
ctx = canvasElement.getContext("2d");

Lors de la création d'un nouvel objet canevas, vous pouvez spécifier la largeur et la hauteur :

canvas = new fabric.Canvas(canvasElement, { 
            selection: false,
            width: 800,
            height:600
});

La largeur et la hauteur spécifiées ici remplaceront celles définies en CSS. Notez que cette forme de création d'objets est fondamentalement similaire dans Fabric.js. Le nom de la classe indique le type d'objet à créer. Le premier paramètre correspond aux données nécessaires et le deuxième paramètre correspond à diverses options.

Toutes les modifications apportées au canevas, y compris l'ajout et la suppression d'objets et la modification des paramètres de l'objet, doivent appeler la méthode de rendu pour être affichée :

canvas.renderAll();

Forme de base

Les formes géométriques telles que la ligne, le cercle, le rectangle, etc. sont toutes des formes de base.

Toutes les formes de base ont des classes correspondantes, de sorte que leur position, couleur, taille et autres styles peuvent être contrôlés via les propriétés et méthodes des instances de classe. Toutes les classes héritent de la classe Object et possèdent des propriétés et méthodes publiques.

Créer

Ce qui suit est un exemple de dessin d'une ligne (étant donné les coordonnées de deux sommets) :

        var line =  new fabric.Line([x1, y1, x2, y2], {
            strokeWidth: 2, //线宽
            stroke: rgba(255,0,0,0.8), //线的颜色
            selectable: false
        });
        canvas.add(line);

Exemple de dessin d'un cercle (le sommet et le rayon sont dans les options), ici gauche et haut sont en fait (x, y), qui doivent être empruntés au nom en CSS.

        var circle =  new fabric.Circle({
            radius: 2,
            left: left,
            top: top,
            originX: 'center',
            originY: 'center',
            fill: rgba(0,200,0,0.8), 
            strokeWidth: 1,
            stroke: rgba(255,0,0,0.8),
            selectable: false
        };
        canvas.add(circle);

Comme vous pouvez le voir ici, cela est similaire à la création d'un canevas. Le premier paramètre est spécifique à cette classe (comme les coordonnées du point de départ et d'arrivée transmises lors du tracé d'une ligne droite), et le deuxième paramètre est une option générale. S'il n'y a pas de paramètres spéciaux, alors le premier paramètre est simplement une option universelle. Toutes les formes créées ne peuvent être affichées que si elles sont ajoutées à la scène via la méthode d'ajout de canevas.

Control

left et top sont des propriétés de chaque objet. Quant au point du graphique auquel il fait référence, les coordonnées sont déterminées par les paramètres originX et originY. Déterminez qu'ils sont équivalents à l'alignement dans un logiciel d'édition de texte. originX a trois valeurs facultatives : gauche, centre, droite ; originY a également trois valeurs facultatives : haut, centre, bas.

Leurs schémas sont les suivants :

http://fabricjs.com/test/misc...

Si vous souhaitez l'origine par défaut de chacun objet à être Le centre peut être défini comme ceci :

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'

la largeur et la hauteur sont également des attributs accessibles directement. Comme leur nom l'indique, ils représentent la longueur et la largeur (toutes les formes ont des rectangles encerclant, donc). ils peuvent être contrôlés par la longueur et la largeur) (taille).

À l'exception des attributs ci-dessus qui sont directement accessibles, la plupart des attributs doivent être lus et écrits à l'aide de la méthode get/set, par exemple :

line.left = pointer.x;
line.top = pointer.y;
line.set('stroke', startColor);
line.set('height', 20);

Certains articles sur Internet le seront être écrit sous la forme line.Stroke= Les formulaires tels que color ou line.setProperty('Stroke',color) ne sont pas valides et peuvent être des expressions de versions antérieures.

Image

Image est similaire aux autres formes et est une sous-classe d'Object. La plus grande différence est que le chargement des fichiers Quest-ce que fabricjs ? Disposition dutilisation de la bibliothèque de dessins frontale Fabricjs (avec code) est asynchrone, donc le suivi. Les opérations sur les Quest-ce que fabricjs ? Disposition dutilisation de la bibliothèque de dessins frontale Fabricjs (avec code)s doivent être complétées dans les rappels.

var bkImage = fabric.Image.fromURL(imgUrl,function(img) {
    canvas.add(img);
}

Recommandations associées :

Comment utiliser la bibliothèque de traçage plotly.js

Planche à dessin VML ④ Serveur simplifié Terminal--server.php, server.asp

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!