8

我有一个<Grid>包含一些垂直和水平<Line>的s。我希望网格可以随窗口大小缩放，并保持其纵横比，因此它包含在<Viewbox Stretch="Uniform">.

但是，我还希望线条始终以 1 像素的宽度呈现，所以我使用：

Line line = new Line();
line.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased);
// other line settings here...

这使得线条的初始外观很理想，但是一旦您开始调整窗口大小，就会开始拉伸/缩放，线条再次变成 1 和 2 像素粗的混合。

有什么方法可以让线条始终为 1 像素粗并且还允许调整窗口/网格的大小？

更新 - 根据 Clemens 的建议使用路径几何

@Clemens - 感谢您强调线条和路径之间的渲染差异。当我尝试使用您的示例重新编写我的代码时，我有一种下沉的感觉，我正在为自己挖掘更多的漏洞，并没有真正掌握整个概念（完全是我的错，不是你的错，我只是 WPF 的新手） .

我将添加一些屏幕截图来说明以下描述：

我正在制作一个游戏板（用于Go游戏，以防有助于理解布局）。我有一个 9x9 的网格，我打算通过简单地将椭圆添加到特定的网格单元来放置游戏片段。

然而，要在棋盘上绘制底层线，我需要在棋盘上绘制与单元格中间相交的线（在 Go 中，棋子放置在交叉点上，而不是单元格的中间）。

很可能是我采取了完全错误的方法，请随时告诉我从另一条路线重新开始，而不是在当前结构中四处乱窜。

到目前为止，这就是我所做的（由于坐标的计算方式，我正在以编程方式添加路径。不确定是否可以全部在 XAML 中完成）：

XAML：

<Grid MinHeight="400" MinWidth="400" ShowGridLines="False" x:Name="boardGrid">
    <Grid.Resources>
        <ScaleTransform x:Key="transform"
            ScaleX="{Binding ActualWidth, ElementName=boardGrid}"
            ScaleY="{Binding ActualHeight, ElementName=boardGrid}" />
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <!-- more rows, 9 in total -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <!-- more columns, 9 in total -->
    </Grid.ColumnDefinitions>

    <!-- example game pieces -->
    <Ellipse Stroke="Black" Fill="#333333" Grid.Row="3" Grid.Column="2" />
    <Ellipse Stroke="#777777" Fill="#FFFFFF" Grid.Row="4" Grid.Column="4" />
</Grid>

C＃：

int cols = 9;
int rows = 9;

// Draw horizontal lines
for (int row = 0; row < rows; row++)
{
    var path = new System.Windows.Shapes.Path();
    path.Stroke = Brushes.Black;
    path.StrokeThickness = 1;
    path.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased);
    Grid.SetRow(path, row);
    Grid.SetColumnSpan(path, cols);
    Grid.SetZIndex(path, -1);

    double cellWidth = boardGrid.ColumnDefinitions[0].ActualWidth;
    double cellHeight = boardGrid.RowDefinitions[0].ActualHeight;
    double x1 = (cellWidth / 2) / boardGrid.ActualWidth;
    double y1 = (cellHeight / 2) / boardGrid.ActualHeight;
    double x2 = ((cellWidth * cols) - (cellWidth / 2)) / boardGrid.ActualWidth;
    double y2 = (cellHeight / 2) / boardGrid.ActualHeight;

    path.Data = new LineGeometry(new Point(x1, y1),
                                 new Point(x2, y2), 
                           (ScaleTransform)boardGrid.TryFindResource("transform"));
    boardGrid.Children.Add(path);
}

// Similar loop code follows for vertical lines...

这是我使用上面的代码时得到的

使用路径时的结果

这几乎就是我想要的样子。它又为我提出了两个问题：

1) 我是否采用了正确的方法来计算x1、和值x2，通过将它们除以总板宽度来创建一个介于 0 和 1 之间的数字，以便随后可以将 ScaleTransform 应用于它们？y1y2

2）现在我不再使用aViewbox了，如何实现固定比例缩放？如果我放大我的窗口，板会不成比例地伸展（见下图）。（不过，它不再对线条进行抗锯齿，这很棒。）

拉伸板失去纵横比

我知道这将成为一个单一的帖子。我非常感谢您的耐心和回复。

4

1 回答 1

11

Viewbox 只能“直观地”缩放其子元素，包括任何渲染笔画的粗细。您需要的是仅适用于线条（或其他形状）的几何形状，但不影响笔画的缩放。

您可以通过使用转换后的LineGeometries作为其属性Line的对象来绘制线条，而不是使用对象。您可以通过使用 Grid 的宽度和高度作为 x 和 y 方向的缩放因子来创建从逻辑坐标缩放到视口坐标的坐标。每个 LineGeometry（或任何其他几何）将使用 0..1 范围内的逻辑坐标：PathDataScaleTransform

<Grid x:Name="grid">
    <Grid.Resources>
        <ScaleTransform x:Key="transform"
                        ScaleX="{Binding ActualWidth, ElementName=grid}"
                        ScaleY="{Binding ActualHeight, ElementName=grid}"/>
    </Grid.Resources>
    <Path Stroke="Black" StrokeThickness="1">
        <Path.Data>
            <LineGeometry StartPoint="0.1,0.1" EndPoint="0.9,0.9"
                          Transform="{StaticResource transform}"/>
        </Path.Data>
    </Path>
</Grid>

为了获得统一的缩放，您可以简单地将 ScaleTransformScaleX和ScaleY属性绑定到GridActualWidth或ActualHeightGrid 中：

<Grid x:Name="grid">
    <Grid.Resources>
        <ScaleTransform x:Key="transform"
                        ScaleX="{Binding ActualWidth, ElementName=grid}"
                        ScaleY="{Binding ActualWidth, ElementName=grid}"/>
    </Grid.Resources>
    ...
</Grid>

您还可以从宽度和高度的最小值计算统一比例因子，后面有一些代码：

<Grid x:Name="grid" SizeChanged="grid_SizeChanged">
    <Grid.Resources>
        <ScaleTransform x:Key="transform"/>
    </Grid.Resources>
    ...
</Grid>

使用这样的 SizeChanged 处理程序：

private void grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var transform = grid.Resources["transform"] as ScaleTransform;
    var minScale = Math.Min(grid.ActualWidth, grid.ActualHeight);
    transform.ScaleX = minScale;
    transform.ScaleY = minScale;
}
于 2013-03-10T14:19:26.820 回答