如何创建棋盘格图案?

问题描述

可能是一个微不足道的问题:我需要用棋盘图案填充一个矩形，其中每个单元格的大小为 1x1 像素.如何在 XAML 中为此模式创建矢量几何?我没有使用 Blend 我正在手工制作矢量图形.

probably a trivial question: i need to fill a rectangle with a checker board pattern where each cell is 1x1 pixel in size. how to create a vector geometry for this pattern in XAML? i am not using Blend I am doing my vector graphics by hand.

谢谢康斯坦丁

推荐答案

您将从下面的 XAML 中获得以下内容:

You'd get the following from the XAML below:

..

这是 XAML 的长版，详细说明了正在创建的几何体.RectangleGeometry 元素的 Rect 属性采用 left,top,width,height 序列.

Here's the long version of the XAML, spelling out what geometry is being created. The Rect attribute of the RectangleGeometry element takes a left,top,width,height sequence.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="250">
    <Canvas>
        <Rectangle Width="100" Height="100" Canvas.Left="10" Canvas.Top="10">
            <Rectangle.Fill>
                <DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,2,2" ViewportUnits="Absolute">

                    <!-- a drawing of 4 checkerboard tiles -->
                    <DrawingBrush.Drawing>
                        <DrawingGroup>

                            <!-- checkerboard background -->
                            <GeometryDrawing Brush="White">
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,2,2" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>

                            <!-- two checkerboard foreground tiles -->
                            <GeometryDrawing Brush="Black">
                                <GeometryDrawing.Geometry>
                                    <GeometryGroup>
                                        <RectangleGeometry Rect="0,0,1,1" />
                                        <RectangleGeometry Rect="1,1,1,1" />
                                    </GeometryGroup>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>

                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Canvas>
</Window>

以下较短的版本呈现完全相同的图像，但使用几何体的速记符号.棋盘格图块呈现为路径.

The following shorter version renders the exact same image, but uses a shorthand notation for the geometry. The checkerboard tiles are rendered as a path.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="250">
    <Canvas>
        <Rectangle Width="100" Height="100" Canvas.Left="10" Canvas.Top="10">
            <Rectangle.Fill>
                <DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,2,2" ViewportUnits="Absolute">
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z" Brush="White"/>
                            <GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" Brush="Black"/>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Canvas>
</Window>

警告:当矩形位于整数坐标上时，这很有效.如果它位于分数坐标上(例如 Canvas.Left="10.5" 而不是 "10")，画笔将抗锯齿并失去清晰的图案.SnapToDevicePixels 无济于事.只要知道矩形的位置，就可以设置DrawingBrush的RelativeTransform来偏移小数部分，以避免抗锯齿.

Caveat: this works well when the rectangle is positioned on integer coordinates. Should it be positioned on a fractional coordinates (e.g. Canvas.Left="10.5" instead of "10"), the brush will be anti aliased and will lose the sharp pattern. SnapToDevicePixels will not help. As long as the rectangle's position is known, you could set the DrawingBrush's RelativeTransform to offset the fractional component, in order to avoid anti-aliasing.

这篇关于如何创建棋盘格图案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！