画像上にオーバーレイを描画する

Question

ユーザーがズーム/スクロールできるイメージがあります。別のレイヤーにいくつかの四角形/円を描画したいと考えています (例:写真で特定された各人の顔に円を描きます)。

長方形の位置は画像に対する相対的な位置です。

このようなオーバーレイを作成するにはどうすればよいですか?

Answer 1

私も同様のことを行うことができました:

• 画像を背景として設定する
• 透明を入れる 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>

Answer 2

簡単な方法は、ちょうどキャンバスを使用し、あなたの写真にキャンバス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>