Zeichnen Sie Overlay auf ein Bild,

Question

Ich habe ein Bild, dass der Benutzer / Scroll vergrößern. Ich möchte ein paar Rechtecke / Kreise auf einer anderen Ebene ziehen (zB einen Kreis für jede Person, die Gesichtszeichnung, die im Bild identifiziert wurde).

Das Rechteck Lage ist, das Bild relativ.

Wie kann ich so ein Overlay erstellen?

Answer 1

Ich habe es geschafft, etwas Ähnliches zu tun:

• Set Bild als Hintergrund
• Legen Sie eine transparente ItemsControl oben drauf
• Stellen Sie ItemsControl.ItemsPanel auf Canvas
• schrieb Handler für Ziehoperationen

Code-Snippet:

  <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

Eine einfache Möglichkeit ist, einfach eine Leinwand zu verwenden und die Leinwand Hintergrund-Eigenschaft auf Ihr Foto zu setzen, und dann platzieren Sie Ihre Kreise oder Rechtecken oben darauf und positionieren sie mit den Canvas.Left und .Top Eigenschaften.

    <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>