2016-10-13 1 views
1

Je crée mon propre style de case à cocher. J'ai trouvé le code sur Internet que j'aime et je ne suis pas si confiant dans le dessin WPF. J'ai besoin de faire ces coins arrondis. Comment rendre ces coins doux?Coins arrondis pour le chemin

<Path Name="InnerPath" 
     Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75" 
     Stretch="Fill" 
     Stroke="#808080" /> 

enter image description here

+0

Utilisez un rectangle au lieu d'un chemin ou un RectangleGeometry pour les données du chemin. – Clemens

+0

En outre, la définition de Stretch to Fill avec ces coordonnées semble étrange. – Clemens

+0

Les données de chemin sont la seule chose qui peut faire cela. il ne regarde pas comme vous le souhaitez car les données ne le lui demandent pas. – Logan

Répondre

0

Au début, les chemins peuvent sembler assez balises confus. Les principales annotations dont vous devez vous préoccuper concernant votre question sont M, Q, L et Z.

M est le point de départ d'un nouveau chemin. Comme votre image contient 2 éléments (chemins), vous utiliserez 2 markups M - Un pour la coche, l'autre pour la case.

Q désigne une courbe de Bézier quadratique. Il a besoin de deux points. Le premier détermine où tirer la ligne et le second est le point final. Il est important de noter que le point de consigne précédent marque le début de la courbe.

L est pour une ligne droite. Ceci est critique après la courbe de bezier sinon il va lancer une erreur. Évidemment l'analyseur voit le Q, manipule les deux premiers nombres, puis voit un tiers qui n'est pas lié à un balisage et un BOOM. Dans votre cas, le L est utilisé puisque nous faisons une ligne. Nous pourrions, cependant, utiliser un autre Q pour faire une ligne ondulée.

Z ferme un chemin et le connecte au point de départ.

En regardant l'image d'origine, les seules marges bénéficiaires nécessaires sont M et Z. Votre chemin valeur de la propriété des données seraient:

M 263,99 263.115 87.115 87.340 311.340 311.221 327.221 327.355 73.355 73,99 Z M 186.323 105.238 143.195 186,240,351,68 391.112 Z

Espérons que cette image vous aidera à comprendre les chiffres ci-dessus: Outline Image

le seul ajout serait d'ajouter une propriété FILL au chemin et utiliser la même valeur que votre coup (# 808080). Cela vous donne la même image que votre original. Ne vous inquiétez pas que ce sont de grands nombres. En tant que graphiques à base de vecteurs, ils seront réduits pour s'adapter à leur conteneur!

(Pour ceux qui sont curieux de savoir comment j'ai trouvé ces chiffres, j'ai pris l'image ci-dessus dans photoshop, élargi la toile pour la rendre carrée, puis notez simplement chaque point X, Y dans photoshop.)

en ce qui concerne les courbes ...

C'est là que le balisage Q arrive ainsi que la L. Espérons que les illustrations suivantes vous aideront. Ici, nous avons d'un simple angle de 90 degrés:

RightAngle

Pour lancer une courbe en cela, nous devons utiliser le balisage Q. Si vous voulez faire une courbe parfaite, vous utiliserez le point où les 2 lignes se croisent. Comme c'est un angle de 90 degrés, c'est assez facile à comprendre. Ce sera le point sur lequel la courbe sera tirée. Dans notre exemple ci-dessus, ce serait le point 0,0. Nous devons ensuite savoir où nous voulons que la courbe commence et se termine. Plus le point d'ancrage est éloigné, plus la courbe est grande.Dans l'illustration suivante je 50:

CurvedAngle

En M langage simple Q 100,0 50,0 0,0 0,50 L 0100 se traduit par: Fixant au point 100,0, dessiner le point 50,0, à partir de là commencer une courbe tirée au point 0,0 et se terminant au point 0,50. Maintenant, tracez une ligne à 0,100.

Espérons que cela explique comment faire des courbes dans un chemin. C'est en fait assez facile une fois que vous avez compris. Avec un peu de créativité, vous pouvez vraiment faire beaucoup avec les chemins.

Avec ce qui précède à l'esprit, le balisage je pense que vous recherchez est (NE PAS OUBLIER D'AJOUTER LA PROPRIÉTÉ FILL!):

Data = "M 263,99 263115 113115 Q 87115 87139 L 87.315 87.340 113.340 Q L Q 287.340 311.340 311.315 L 311.221 327.221 327.315 327.355 287.355 Q L Q 113.355 73.355 73.315 L 73139 Q 73,99 113,99
ZM 186.323 105.238 143.195 186,240,351,68 391.112 Z »

Le balisage ci-dessus vous donne: CurvedCheckBox

Voici un lien vers les commandes de balisage: MarkupCommands

Voici quelques exemples de formes qui font: MakingShapes