为什么在Canvas上使用剪切坐标显示GeometryDrawing？

Question

我有以下简单的代码绘制矩形

    <Canvas Name="MainImageLayer" >
        <Image >
            <Image.Source >
                <DrawingImage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
                    <DrawingImage.Drawing >                            
                        <DrawingGroup>
                            <DrawingGroup.Children>
                                <GeometryDrawing>
                                    <GeometryDrawing.Pen>
                                        <Pen Brush="#FF1acc33" Thickness="1" />
                                    </GeometryDrawing.Pen>
                                    <GeometryDrawing.Brush>
                                        <SolidColorBrush>Red</SolidColorBrush>
                                    </GeometryDrawing.Brush>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="300,480,287,83" />
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>

                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>                
        </Image>
    </Canvas>

结果如下所示 - 请注意矩形在(0,0)中,即使Rect定义为

<RectangleGeometry Rect="300,480,287,83" />

我希望它从(300,480)开始,就像那样:

我可以通过检查我的DrawingImage并执行以下操作来实现:

            <Canvas.Top>300</Canvas.Top>
            <Canvas.Left>480</Canvas.Left>

但考虑到这些数据被编码到几何中的事实,是不是有更好的方法？

Answer 1

您的问题来自于您将所有几何体包裹在"图像"对象中.默认情况下,Image对象的.Height和.Width属性设置为"Auto",而.Stretch属性设置为"Uniform".这可以保证矩形始终显示在"画布"的左上角.

如果您确实需要将几何体封装在"图像"对象中(我会提醒您不要这样做),则需要将Image对象的边距设置为300,480,0,0.为了让你的矩形出现在你想要的地方.这是必需的,因为'Image'对象处理其内容的方式.

Image对象的行为与Canvas对象不同,即使它位于Canvas对象中.

除非有一些压倒性的理由要保留Image对象,否则如果丢弃Image并直接在Canvas上绘制,则会获得更好的成功.

编辑

为什么在这种情况下不能使用Image对象？
Image对象主要用于显示......井,图像,如位图等.它不适合在特定位置(和大小)绘制几何图形.像大多数WPF控件一样,它被称为"相对"控件,这意味着它非常适合自动调整大小并将其自身定位为与其内容及其父级相关.另一方面,Canvas是"绝对"控件的一个例子.它存在的全部原因是允许在具有确切大小的确切位置上绘制内容.在Canvas中添加Image然后在Image中绘制几何图形只会在Canvas和需要绘制的几何体之间添加一个不必要的复杂层.

如何直接添加几何图形？
最简单的方法之一是使用Clemens答案中给出的Path对象.只需用该路径的5行替换整个Image对象及其所有内容,您的矩形就会准确显示在它应该的位置.您也可以使用单行和Rectangle对象执行此操作:

<Rectangle Height="83" Width="287" Margin="300,480,0,0" Stroke="#FF1acc33" StrokeThickness="1" Fill="Red" />

但我会推荐Path,因为它包含一组数字中矩形的大小和位置.如果使用矩形以外的形状,Path还允许您更灵活.