Нарисуйте оверлей на изображении

Question

У меня есть изображение, которое пользователь может масштабировать / прокручивать. Я хочу нарисовать несколько прямоугольников / кругов на другом слое (например: нарисовать круг для лица каждого человека, которое было идентифицировано на рисунке).

Положение прямоугольника относительно изображения.

Как мне создать такой оверлей?

Answer 1

Самый простой способ - просто использовать Canvas и установить свойство background для холста для своей фотографии, а затем поместить поверх него круги или прямоугольники и расположить их со свойствами Canvas.Left и .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>

Answer 2

Мне удалось сделать нечто подобное:

• Установить изображение в качестве фона
• Положите прозрачный ItemsControl поверх него
• Установите ItemsControl.ItemsPanel на Canvas
• написал обработчики для операций перетаскивания

Фрагмент кода:

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