画像上にオーバーレイを描く

Question

私はズーム/スクロールできる画像を持っています。 私はいくつかの矩形/円を別のレイヤーに描きたいと思っています（例えば、写真で特定された人の顔ごとに円を描く）。

矩形の位置は画像を基準にしています。

このようなオーバーレイを作成するにはどうすればよいですか？私は似たような行うために管理している

Answer 1

：背景

として

• 設定された画像は、Canvas
• に設定ItemsControl.ItemsPanel
• 、その上に透明ItemsControlを入れて操作
をドラッグするためのハンドラを書きました

コードスニペット：

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