Dibuje superposición en una imagen

Question

Tengo una imagen que el usuario puede hacer zoom / desplazamiento. Quiero sacar algunas rectángulos / círculos en una capa diferente (por ejemplo: dibujar un círculo para el rostro de cada persona que se identificó en la imagen).

El rectángulo de posición es relativa a la imagen.

¿Cómo creo una superposición tal?

Answer 1

He conseguido hacer algo similar:

• Establecer imagen como fondo
• Poner un ItemsControl transparente en la parte superior de la misma
• Establecer ItemsControl.ItemsPanel a Canvas
• escribió manipuladores para las operaciones de arrastrar

Fragmento de código:

  <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

Una forma sencilla es usar una lona y establecer la propiedad tela de fondo a su foto, y luego colocar sus círculos o rectángulos en la parte superior de eso y la posición de ellos con las propiedades Canvas.Left y .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>