Les avantages sont nombreux ! Par exemple, le fait qu'étant une classe vous pouvez créer différents designs qui ne nécessitent pas de contexte graphique, ainsi que la précision avec laquelle vous pouvez créer les représentations en concaténant les chemins... simplement en joignant les points !
Et est-ce que les méthodes disponibles dans la classe vous permettront d'ajouter de manière vraiment simple et moins complexe que la classe Object2D, à la fois des rectangles (avec sa variante de coins arrondis), des arcs, des courbes et des courbes quadratiques (de Bèzier) qui fournissent nous avec un point de contrôle.
Vous pouvez télécharger l'exemple de projet à partir d'ici.
La chose intéressante dans ce cas est que chaque appel à l'une de ces méthodes prendra comme point de départ la coordonnée (point) où le "trait" s'est terminé de la manière précédente ; bien que vous puissiez toujours utiliser la méthode MoveToPoint pour faire exactement cela : déplacer le "crayon" à une certaine coordonnée sans dessiner de trace. Ce serait donc le nouveau point pris comme origine lors du tracé de la ligne suivante, du tracé de la courbe, etc.
En ce qui concerne les propriétés disponibles, vous disposez des éléments suivants :
- Point actuel. Vous pouvez le consulter pour savoir dans quelle coordonnée vous vous trouvez à un moment donné et prendre une décision en conséquence.
- C'est vide. Il nous permet de savoir si le graphe (chart) est vide ; c'est-à-dire qu'il ne contient aucun élément.
- EstRectangle. Il nous permet de savoir si le chemin est un rectangle.
En cours!
Nous allons commencer par voir avec quelle facilité il est possible d'appliquer ces principes en créant un graphe utilisant une courbe de Bézier, sur laquelle on peut faire varier le point de contrôle. Lorsque nous aurons terminé, notre projet ressemblera à ceci :
1. Concevoir l'interface utilisateur
Notre interface utilisateur se compose des éléments suivants :
- 2 jours (Étiquette)
- 2 curseurs. Utilisez le panneau d'inspection sur chacun d'eux pour activer la propriété "Autoriser le défilement en temps réel" dans la section Comportement.
- 1 Contrôle tissu.
Utilisez les paramètres de verrouillage des contrôles sur chacun des curseurs et sur le canevas, comme indiqué dans l'image. Cela permettra à leur taille de s'adapter au changement de taille de la fenêtre.
2. Création de notre espace graphique (sous-classe Canvas)
Nous allons faire du Canvas une classe spécialisée, et cela signifie créer notre propre sous-classe.
Ajoutez une nouvelle classe au projet (Insérer> Classe) et utilisez le panneau Inspecteur pour ajuster les propriétés suivantes :
- Nom: QuadraticCanvas
- Super: tissu
Ajoutez ensuite deux propriétés calculées. Pour ce faire, assurez-vous que notre entrée de classe est sélectionnée dans le navigateur du projet et accédez au menu contextuel pour sélectionner l'option Ajouter à "CuadraticCanvas"> Propriété calculée.
Utilisez les données suivantes dans le panneau d'inspecteur résultant :
- Nom: PC1X
- Type: Double
Ensuite, sélectionnez la méthode "Set" de la propriété calculée et ajoutez la ligne de code suivante après celle existante :
invalidez-vous
Avec cela, nous forçons le contrôle à être redessiné chaque fois que nous modifions la valeur du point X dans la coordonnée de contrôle de la courbe de Bézier.
Répétez l'opération pour ajouter une deuxième propriété calculée avec les valeurs suivantes :
- Nom: PC1Y
- Type: Double.
N'oubliez pas d'ajouter également la ligne de code "Invalidate" dans la méthode "Set" de cette propriété.
Nous allons maintenant ajouter le Paint Event Handler à notre classe. Pour ce faire, et avec l'élément toujours sélectionné dans le Navigateur du projet, accédez au menu contextuel pour sélectionner l'option Ajouter à « CuadraticCanvas »> Gestionnaire d'événements...
Dans le panneau résultant, sélectionnez Peindre et confirmez votre sélection. Cette action ajoutera le nouvel événement à la classe présentant l'éditeur de code où vous devez insérer le code suivant :
g.AntiAlias = Vero g.DrawingColor = & cffffff g.FillRectangle (0,0, g.Width, g.Height) g.DrawingColor = & c000000 g.DrawLine (g.Width / 2,0, g.Width / 2, g.Height) g.DrawLine (0, g.Height / 2, g.Width, g.Height / 2) g.DrawingColor = & ccc1233 Var gp As New GraphicsPath gp.MoveToPoint (0, g.Altezza / 2) gp.AddQuadraticCurveToPoint (Me.pc1x, Me.pc1y, g.Width, g.Height / 2) g.DrawPath gp
Comme vous pouvez le voir, c'est ici que nous créons une instance de la classe GraphicsPath (représentée par la variable "gp"), et sur laquelle une courbe quadratique est ajoutée en utilisant les coordonnées correspondant aux valeurs de propriété "PC1X" comme contrôle et "PC1Y".
Pour que notre forme soit dessinée dans le contexte graphique (représenté par la variable "g") nous utilisons la méthode DrawPath, en passant la variable de notre objet GraphicsPath comme argument.
3. Reliez les points
Sélectionnez l'entrée « Canvas1 » dans le navigateur de projet et utilisez le panneau Inspecteur pour changer le champ « Super » en « CuadraticCanvas ».
Ensuite, sélectionnez l'élément "Slider1" et ajoutez le gestionnaire d'événements "ValueChanged". Entrez la ligne de code suivante dans l'éditeur de code résultant :
canvas1.pc1x = moi.Valeur
Répétez l'opération avec "Slider2", sauf que dans ce cas la ligne de code sera :
canvas1.pc1y = moi.Valeur
Sélectionnez maintenant l'entrée «Window1» dans le Navigateur du projet et ajoutez deux événements : Open et Resize. Intégrez la ligne de code suivante dans les deux :
Définir le curseur
Ensuite, nous ajouterons une nouvelle méthode dans la fenêtre Window1. Pour cela, sélectionnez-le dans le Navigateur du projet et accédez au menu contextuel pour choisir l'option Ajouter à « Fenêtre1 » > Méthode. Utilisez la signature suivante dans le panneau de l'inspecteur :
- Nom de la méthode : Définir les curseurs
Et saisissez le code suivant dans l'éditeur de code associé :
slider1.MaximumValue = canvas1.Width slider2.MaximumValue = canvas1.Height canvas1.PC1x = Slider1.Value canvas1.PC1y = Slider2.Value
Ce sera la méthode chargée de mettre à jour à la fois la valeur maximale des curseurs (avec la largeur de la fenêtre) et de mettre à jour le dessin du graphique en passant les nouvelles valeurs ajustées.
Déplacez la courbe!
Nous avons déjà tout ce dont nous avons besoin. Il est temps d'exécuter l'application et d'utiliser les curseurs pour déplacer le point de contrôle. En faisant cela, vous verrez comment la conception de la courbe sur la toile varie.
Vous avez déjà un point de départ ! Essayez d'utiliser le reste des méthodes de la classe GraphicsPath ou d'ajouter plus de courbes de Bézier pour dessiner les formes dont vous avez besoin.
