DrawingBrush中的相对坐标

Question

我对WPF中相对坐标的工作方式有些困惑，尤其是在使用DrawingBrush的场景中。

假设我想画一个正方形区域的背景，它的大小是灵活的。我想用一种特殊的“形状”来绘制背景，比如说在侧面画一种“T”，垂直笔划穿过区域的中间。使用相对坐标（区域的大小是灵活的），我得出了以下XAML：

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="722" Width="722" UseLayoutRounding="True">
<Window.Resources>
   
    <DrawingBrush x:Key="EdgeGrid">
        <DrawingBrush.Drawing>
            <GeometryDrawing>
                <GeometryDrawing.Geometry>
                    <!-- draw a single T laying on the side -->
                    <GeometryGroup>
                        <!-- top to bottom -->
                        <LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
                        <!-- left to right -->
                        <LineGeometry StartPoint="0.5,0.5" EndPoint="1,0.5"/>
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
                <GeometryDrawing.Pen>
                    <Pen Thickness="0.01" Brush="Black" />
                </GeometryDrawing.Pen>
            </GeometryDrawing>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</Window.Resources>      
    <Grid Name="LayoutRoot">
    <Rectangle Width="400" Height="400" Stroke="Black" StrokeThickness="1" Fill="{StaticResource EdgeGrid}">
    </Rectangle>

</Grid>

但我得到的结果是这样的：

垂直笔划是否应该穿过中间（X坐标为0.5）？还有，如何在相对模式下将笔的厚度设置为1或2像素？有什么想法吗？

Answer 1

让我们看看提议的解决方案是什么样子。假设我们想在一种网格中显示形状，并根据数据绘制各种形状（通过选择适当的日期模板）。为了简单起见，在本例中，我们只画一种形状（十字，如我的第一个问题所示）：

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="722" Width="722" UseLayoutRounding="True">

    <ItemsControl ItemsSource="{Binding data}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="10" Rows="10">
                </UniformGrid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>        
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="Cell">
                   <Path StrokeThickness="2" Stroke="Blue" SnapsToDevicePixels="True">
                        <Path.Data>
                            <GeometryGroup>
                                <GeometryGroup.Transform>
                                    <ScaleTransform ScaleX="{Binding ElementName=Cell, Path=ActualWidth}" ScaleY="{Binding ElementName=Cell, Path=ActualHeight}"/>
                                </GeometryGroup.Transform>
                                <!-- top to bottom -->
                                <LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
                            </GeometryGroup>
                        </Path.Data>
                    </Path>
                    <Path StrokeThickness="1" Stroke="Black" SnapsToDevicePixels="True">
                        <Path.Data>
                            <GeometryGroup>
                                <GeometryGroup.Transform>
                                    <ScaleTransform ScaleX="{Binding ElementName=Cell, Path=ActualWidth}" ScaleY="{Binding ElementName=Cell, Path=ActualHeight}"/>
                                </GeometryGroup.Transform>
                                <!-- left to right -->
                                <LineGeometry StartPoint="0,0.5" EndPoint="1,0.5"/>
                            </GeometryGroup>
                        </Path.Data>
                    </Path>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>    
    </ItemsControl>        
   </Window>

@克莱门斯，这就是你想要的解决方案吗？这是正确的做法吗？我对结果的唯一问题是，线条模糊，甚至在水平线中可以看到一个中断。有什么解决办法吗？

Answer 2

要获得正确的垂直行程，您需要这样做：

<GeometryGroup>
     <!-- top to bottom -->
     <LineGeometry StartPoint="0.75,0.0"
                   EndPoint="0.75,1" />
     <!-- left to right -->
     <LineGeometry StartPoint="0.5,0.5"
                   EndPoint="1,0.5" />
</GeometryGroup>

但这对笔的厚度没有帮助。一般来说，如果您想缩放几何图形-首先使用您喜欢的绝对坐标（例如在0-100范围内）创建它，然后将其放入ViewBox或使用ScaleTransform，如下所示：

    <Viewbox Width="400"
             Height="400">
        <Path Stroke="Black"
              StrokeThickness="1">
            <Path.Data>
                <GeometryGroup>
                    <!-- top to bottom -->
                    <LineGeometry StartPoint="75,0"
                                  EndPoint="75, 100" />
                    <!-- left to right -->
                    <LineGeometry StartPoint="50,50"
                                  EndPoint="100, 50" />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Viewbox>

Answer 3

您必须将DrawingBrush的ViewboxUnits属性设置为Absolute（而不是默认的RelativeToBoundingBox）。视图框仍然是（0,0,1,1）。

有关笔刷的viewbox和viewport的详细信息，请参阅MSDN上的TileBrush Overview文章。

<DrawingBrush x:Key="EdgeGrid" ViewboxUnits="Absolute">
    <DrawingBrush.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Geometry>
                <GeometryGroup>
                    <LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
                    <LineGeometry StartPoint="0.5,0.5" EndPoint="1,0.5"/>
                </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
                <Pen Thickness="0.01" Brush="Black" />
            </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

当然，这不允许以像素为单位定义笔划宽度。在绝对坐标系下绘制图形，然后将整个图形放在视口中也不会有多大帮助，因为笔划仍然会按比例缩放。

为了获得具有固定笔划宽度的可缩放图形，必须使用路径元素，在其中设置笔划宽度和数据属性，并将缩放变换指定给用作数据的几何体的变换属性。

在绘制具有固定笔画宽度的居中T形图形的特殊情况下，您可以简单地在Canvas中绘制两条（很长）线，其中坐标原点通过将Canvas放在2x2网格中居中。您甚至可以选择为两条线设置不同的笔画和笔画宽度。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Canvas Grid.Column="1" Grid.Row="1">
        <Line Y1="-10000" Y2="10000" Stroke="Black" StrokeThickness="1"/>
        <Line X2="10000" Stroke="Black" StrokeThickness="1"/>
    </Canvas>
</Grid>