Tissu.js: avancé

Cet article plonge dans les fonctionnalités avancées de tissu.js: groupes, sérialisation (et désérialisation) et création de classe personnalisée.

Concepts clés:

• Groupes de tissus: Gérer efficacement plusieurs objets comme une seule unité, simplifiant la manipulation (mouvement, mise à l'échelle, rotation).
• Sérialisation du canerialisation (JSON): Enregistrer et charger les états de toile en utilisant JSON, une méthode plus adaptée à la bande passante que les formats d'image.
• Création de classe personnalisée: étendre le tissu.js avec des comportements et des propriétés d'objets personnalisés, sérialisés et désérialisés efficacement.
• Interopérabilité SVG: Exporter des éléments de canevas vers SVG et importer du contenu SVG dans la toile pour la flexibilité du format.
• Méthodes de désérialisation: Utiliser loadFromJSON et loadFromSVG pour la restauration de l'état de toile sans couture.
• Contrôle d'objet avancé: Créer des éléments interactifs complexes et des objets hautement personnalisés au-delà des formes de base par la sous-classe.

Groupes:

Les groupes dans tissu.js permettent de combiner des objets en une seule entité. (Voir figure 1). Un nombre d'objets Canvas peut être regroupé, permettant une manipulation unifiée. La mise à l'échelle, la rotation et la modification des propriétés du groupe (couleur, transparence, frontières) sont toutes possibles. Le tissu crée implicitement des groupes lors de la sélection de plusieurs objets.

Figure 1

Création de groupe programmatique:

var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);

(voir la figure 2 pour le résultat). Les objets individuels au sein d'un groupe sont accessibles et modifiés à l'aide de la méthode item.

Figure 2

Modification des objets de groupe:

group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');

(voir figure 3). Les objets au sein d'un groupe sont positionnés par rapport au centre du groupe à moins que les coordonnées left / top ne soient spécifiées.

Figure 3

Création d'un groupe aligné horizontalement:

var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);

(voir figure 4). Pour les groupes contenant des images, assurez-vous que les images sont entièrement chargées avant le regroupement.

Figure 4

Les méthodes de groupe incluent getObjects, size, contains, item, forEachObject, add et remove. addWithUpdate ajoute des objets lors de la mise à jour des dimensions du groupe. Le clonage des objets en toile existants est nécessaire avant de les ajouter à un nouveau groupe.

Sérialisation:

tissu.js utilise toObject et toJSON pour la sérialisation. toJSON appelle implicitement toObject.

Exemple: sérialisation d'une toile vide:

var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);

L'ajout d'objets met à jour la représentation JSON. toObject Renvoie une représentation d'objet non corporelle. La personnalisation de la sérialisation des objets est obtenue en remplaçant ou en étendant la méthode toObject.

Exemple: Extension toObject:

group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');

SVG Serialization utilise la méthode toSVG, en déléguant aux méthodes toSVG de l'objet individuel. Cela permet d'exporter vers tout rendu compatible SVG.

désérialisation:

loadFromJSON et loadFromDatalessJSON States de toile de chargement de JSON. loadSVGFromURL et loadSVGFromString Charge à partir des données SVG. loadFromDatalessJSON gère efficacement les données de chemin de gros chemin en faisant référence aux fichiers SVG externes.

Sous-classe:

tissu.js utilise fabric.util.createClass pour la sous-classe. La propriété initialize agit comme constructeur. callSuper appelle les méthodes de classe parent.

Exemple: Création d'une classe personnalisée:

var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);

(voir les figures 8 et 9 pour des exemples de LabeledRect). Les propriétés personnalisées doivent être gérées dans toObject et initialize.

Questions fréquemment posées (FAQ): (Les FAQ fournis sont déjà bien structurés et complets, donc aucun changement n'est nécessaire ici.)

Les images sont incluses comme demandé, en maintenant leur format d'origine et leurs positions dans le texte.

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!