将图标添加到图像

Question

我在<Grid>内的<Border>内有<Image>。我有一个baseMap.png加载到该图像（来源）。使用滚轮我可以使用矩阵旋转图像。

我现在想在图像上的任意x，y上添加一个图标（例如push_pin.png），实际上是通过合并baseMap.png和push_pin.png来创建一个新图像，稍后将偏移一些x & y相对于baseMap.png。

如何做到最好？

戴夫

Answer 1

你可以使用一个Canvas定位的图标，而在ImageBrush设定为Canvas.Background这样显示baseMap.png图像：

<Grid> 
    <Border> 
     <Canvas> 
      <Canvas.Background> 
       <ImageBrush ImageSource="/YourAppName;component/Images/baseMap.png" /> 
      </Canvas.Background> 
      <Image Source="/YourAppName;component/Images/push_pin.png" 
       Canvas.Left="100" Canvas.Top="100" /> <!-- Positioning --> 
     </Canvas> 
    </Border> 
</Grid> 

您可以硬编码的位置图标，或者更好的是，数据绑定到他们。 Canvas.Left和Canvas.Top属性也可以用在动画中，并且ImageBrush类具有各种属性以影响它如何显示图像。