如何用画布上的画笔绘制棋盘图案？答案

【问题标题】：How to draw chess board pattern with Brush on Canvas?如何用画布上的画笔绘制棋盘图案？
【发布时间】：2014-10-16 01:09:09
【问题描述】：

我得到了Canvas 和一些Rectangles 不同的width 但相同的height。我在Canvas 上实际绘制Rectangles，width 在我绘制时实时计算。

一些Rectangles 有SolidColorBrush，但其余部分应该看起来像棋盘：

我试着这样做：

private static Brush CreateBrush()
{

    // Create a DrawingBrush
    var blackBrush = new DrawingBrush();
    // Create a Geometry with white background

    // Create a GeometryGroup that will be added to Geometry
    var gGroup = new GeometryGroup();
    gGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 10, 10)));
    gGroup.Children.Add(new RectangleGeometry(new Rect(10, 10, 10, 10)));
    // Create a GeomertyDrawing
    var checkers = 
        new GeometryDrawing(new SolidColorBrush(Colors.Black), null, gGroup);

    var checkersDrawingGroup = new DrawingGroup();

    checkersDrawingGroup.Children.Add(checkers);

    blackBrush.Drawing = checkersDrawingGroup;

    // Set Viewport and TileMode
    blackBrush.Viewport = new Rect(0, 0, 0.5, 0.5 );
    blackBrush.TileMode = TileMode.Tile;

    return blackBrush; 
}

就Rectangles 的大小不同，相同的DrawingBrush 在不同的Rectangles 上看起来也不同——它不是重复填充它，而是拉伸。

据我了解，问题出在blackBrush.Viewport = new Rect(0, 0, 0.5, 0.5 ); - 我应该根据每个Rectangle width 设置不同的Viewports，但这对我来说是不可接受的。我需要为所有不同大小和纹理的矩形使用一个画笔，看起来应该像一张图片 - X 和 Y 的比例相同，但它可以在一张中重复多次Rectangle

也许有另一种画笔类型或其他方法来解决这个问题？

如果我的帖子不清楚，请随意提问，也对不起我的英语。

为我需要的添加图片：（不是关于宽度，而是关于纹理填充）

【问题讨论】：

rest 应该看起来像 chessfield... 现在像什么？请使用合理的描述。
@Sheridan 我添加图片解释，抱歉不知道更好的词。
啊……棋盘。我已相应地编辑了您的问题。但是，我仍然不明白你的问题......好像你已经成功地创建了你的棋盘图案。你的问题究竟是什么是？
@Sheridan，我添加图片来说明我的矩形现在看起来如何，以及我希望它看起来如何。我想要没有变形和拉伸的相同纹理，但只需重复相同的图案以覆盖所有矩形。
不幸的是，DrawingBrush 没有SpreadMethod 所具有的有用的SpreadMethod 属性，所以我们不能以同样的方式重复它。但是，您面临的真正问题是DrawingBrush 的图案会随着使用它的形状的大小而延伸……正如您自己发现的那样。必须有一些方法可以做到这一点......继续寻找。

标签： c# wpf canvas

【解决方案1】：

通过使用带有 King King 答案的 DrawingGroup，您可以为每一面指定不同的颜色：

<DrawingBrush.Drawing>
    <DrawingGroup>
        <GeometryDrawing Brush="Black" Geometry="M5,5 L0,5 0,10 5,10 5,5 10,5 10,0 5,0 Z"/>
        <GeometryDrawing Brush="Blue" Geometry="M0,0 L0,5 0,10 0,5, 10,5 10,10 5,10 5,0 Z"/>
    </DrawingGroup>
</DrawingBrush.Drawing>

【讨论】：

【解决方案2】：

问题出在Viewport 设置中，您应该将其ViewportUnits 设置为Absolute 而不是RelativeToBoundingBox（默认情况下）：

//we have to use a fixed size for the squares
blackBrush.Viewport = new Rect(0, 0, 60, 60);
blackBrush.Viewport.ViewportUnits = BrushMappingMode.Absolute;

这是一个使用纯 XAML 显示棋盘的示例：

<Grid>
    <Grid.Background>
        <DrawingBrush TileMode="Tile" Viewport="0,0,60,60" 
                                      ViewportUnits="Absolute">
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="Black" 
                    Geometry="M5,5 L0,5 0,10 5,10 5,5 10,5 10,0 5,0 Z"/>
            </DrawingBrush.Drawing>
        </DrawingBrush>            
    </Grid.Background>
</Grid>

【讨论】：