Comment découper une image (élément d'interface utilisateur) pour échantillonner la géométrie?

Question

Je veux clip image à ellipse, par exemple. L'élément d'interface a Clip, mais Clip dans l'API Windows Runtime doit être un RectangleGeometry. Je peux obtenir le même résultat en utilisant un élément Ellipse et ImageBrush comme remplissage brosse:

How to clip image to ellipse in XAML

Mais alors je ne peux pas ou déplacer mon image, car il est pinceau, pas l'interface utilisateur-élément. Alors, comment l'image de clip n'est pas rectangulaire? Par exemple, je veux ceci: Move image into ellipse

Peut-être, je peux utiliser alphamask à l'élément d'interface utilisateur? Ou OpacityMask? Peut-être que c'est possible avec win2d?

Answer 1

Une façon dont vous devriez être en mesure de dessiner une forme avec GeometryGroup à l'intérieur d'un Path, et en utilisant la forme pour créer un masque à l'image. La forme peut être composée d'un RectangleGeometry et d'un EllipseGeometry, et la forme doit être de la même taille que l'image (attention à ce que la taille de la forme soit identique à l'image elle-même et non au contrôle de l'image). le rapport de l'image). Remplissez le chemin, puis laissez les pièces Ellipse pour afficher l'image.

Par exemple, le code comme suit:

<Grid> 
    <Image Source="Assets/caffe1.jpg" Height="200" Canvas.ZIndex="-1" Width="265"> 
    </Image> 
    <Path Fill="White" Height="200" Width="265"> 
     <Path.Data> 
      <GeometryGroup> 
       <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/> 
       <RectangleGeometry Rect="0,0 265,200" ></RectangleGeometry> 
      </GeometryGroup> 
     </Path.Data> 
    </Path> 
</Grid> 

Et le résultat:

De cette façon, peut vous permettre de définir le clip d'image à la forme arbitraire comme ce que vous voulez, aussi taille de l'image et la taille du clip sont comme ce que vous voulez. Plus de détails sur la façon de dessiner des formes s'il vous plaît référence this article.