Dessiner une superposition sur une image

Question

J'ai une image que l'utilisateur peut zoomer/faire défiler. Je veux dessiner des rectangles/cercles sur un calque différent (par exemple: dessiner un cercle pour le visage de chaque personne identifié dans l'image).

La position du rectangle est relative à l'image.

Comment créer une telle superposition?

Answer 1

J'ai réussi à faire quelque chose de similaire:

• Définir l'image comme fond
• Mettez un ItemsControl transparent sur le dessus de celui-ci
• Set ItemsControl.ItemsPanel-Canvas
• a écrit des gestionnaires pour traînantes opérations

Extrait de code:

<ItemsControl x:Name="overlayItemsControl" 
     Background="Transparent" 
     ItemsSource="{Binding Path=Blocks}" 
     Width="{Binding ElementName=imageControl, Path=Width}" 
     Height="{Binding ElementName=imageControl, Path=Height}" 
     ItemContainerStyle="{StaticResource rectStyle}" 
     PreviewMouseMove="ItemsControl_PreviewMouseMove" 
     PreviewMouseDown="ItemsControl_PreviewMouseDown" 
     PreviewMouseUp="ItemsControl_PreviewMouseUp" 
     PreviewKeyDown="ItemsControl_PreviewKeyDown"> 

     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas IsItemsHost="True" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    .... 
</ItemsControl> 

Answer 2

Un moyen facile est d'utiliser simplement une toile et mettre la toile propriété de fond à votre photo, puis placez vos cercles ou des rectangles sur le dessus de cela et de les positionner avec les propriétés Canvas.Left et .top .

<Canvas x:Name="myCanvas"> 
     <Canvas.Background> 
      <ImageBrush ImageSource="c:\photo.bmp"/> 
     </Canvas.Background> 
     <Image Canvas.Top="20" Canvas.Left="20" Height="20" Width="20" Source="c:\circle.bmp"/> 
    </Canvas>