在图像上绘制缩放图片答案

【问题标题】：Draw scaled picture over an Image在图像上绘制缩放图片
【发布时间】：2013-08-21 21:44:54
【问题描述】：

我有一个 WPF 图像，我正在尝试在其上绘制一些东西（比如说一个笑脸，两个蓝色圆圈代表眼睛，一个红色椭圆代表嘴巴）。我在图片上做了一个小的Rectangle，并把它拉长了。

<Grid Name="mGrid">
    <Rectangle Height="0" HorizontalAlignment="Stretch" Stretch="Fill" Name="mImageFrame"  VerticalAlignment="Stretch" Width="0" />
</Grid >

我使用DrawingBrush 在矩形中绘制圆圈。
显然这是错误的，因为我有两个问题：
1. DrawingBrush 似乎有不同的比例。它将根据它所绘制的最大项目进行缩放。
2. 我只能使用一种画笔颜色。

那么，我怎样才能以某种方式在图像上绘制以保持相同的比例？
以及如何为每个形状使用不同的颜色？

【问题讨论】：

标签： c# wpf drawing

【解决方案1】：

您可以将 Shapes 放在覆盖 Image 的 Canvas 上，然后将整个东西放在 Viewbox 中。这要求您通过将图像的Stretch 属性设置为None（从而强制图像大小为其Source 位图的大小）或明确设置为Width 或Height 来定义绝对坐标。

<Viewbox>
    <Grid>
        <Image Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
               Stretch="None"/>
        <Canvas>
            <Ellipse Canvas.Left="420" Canvas.Top="480"
                     Fill="Red" Width="100" Height="100"/>
            ... more shapes here ...
        </Canvas>
    </Grid>
</Viewbox>

【讨论】：

我需要用户调整整个东西的大小，所以我不能使用绝对大小。
好的，知道了。 Viewbox 本身设置整个容器的大小。

【解决方案2】：

一种解决方案是将绘图和Image 放入ViewBox 控件中。您可以从 MSDN 上的 Viewbox Class 页面了解有关 Viewbox 的更多信息。基本上，它提供了与Image 控件相同的拉伸功能。

您可能还想查看 MSDN 上的 Shapes and Basic Drawing in WPF Overview 页面。

【讨论】：

是的，我看到了那个页面，非常简单的一种形状 - 一种颜色，没有调整大小的示例。