WPF，多边形和多边形 [英] WPF, Polygon and Poly

问题描述

我正在使用WFP构建应用C#，我试图绘制形状，每个形状都属于一个类，并且此类包含用于外部形状的Polygon和1至3条Polylines，使其看起来像真实的2D对象，这样我就可以即时更改整个形状的某些属性(颜色，可见性等) 我必须说，某些折线是根据所需的高度和宽度通过循环创建的

I'm building an aplication C# with WFP, I'm trying to draw shapes, each shape belongs to a class and such class contains a Polygon for the outer shape, and 1 to 3 Polylines to make it look like real 2D object, this way I can change some properties of the whole shape on the fly (Colors, Visibility, etc) I must say that some Polylines are created by a loop according to the desired height and width

但是现在我正面临着一些折线的渲染的问题 如果使用绘画来表示调试结束时提取的点，则点位于正确的位置(x，y)，但最终图片不太准确，我希望最终结果看起来像位图像素，没有阴影，模糊或边缘效果.

but righ now I'm facing a probem with the render of some PolyLines If you use paint to represent the points extracted at the end of the debugging, points are in correct location (x,y) but the final picture is not too accurate , I want the final result to look like bitmap pixels, without shadow, blur or edge effects..

这是一个示例(面板是给网格的名称)

this is an example (Panel is the name given to the grid)

 public partial class Window1 : Window {

    private Polyline zigzag;

    public Window1() {
        InitializeComponent();
        PointCollection points = new PointCollection();
        ArrayList axisX = new ArrayList();
        ArrayList axisY = new ArrayList();

        zigzag = new Polyline();
        zigzag.Stroke = Brushes.Black;

        int count = 1;
        Boolean increase = true;
        //the number 60 in this loop is to represent the width of the main shape
        for (int p = 3; p < 60 - 3; p++) {
            if (count == 1) {
                axisX.Add(p);
                axisY.Add(5);
                increase = true;
            }
            if (count == 4) {
                axisX.Add(p);
                axisY.Add(2);
                increase = false;
            }
            if (increase) {
                count++;
            }
            else {
                count--;
            }
        }

        for (int i = 0; i < axisX.Count; i++) {
            //the number 10 is to represent the position where the Poliline is to be placed
            int tmpx = 10 + (int)axisX[i];
            int tmpy = 10 + (int)axisY[i];
            points.Add(new Point(tmpx, tmpy));
        }

        this.zigzag.Points = points;
        RenderOptions.SetEdgeMode(Panel , EdgeMode.Aliased);
        Panel.Children.Add(zigzag);

    }

}

图片在上方显示了所绘制的锯齿形，其外观应如下图所示

The picture shows the drawn zigzag on above, and the way it should look like below

推荐答案

坐标系的原点位于左上像素的左上角.要击中中间的像素，您必须指定3.5等坐标.

The coordinate system has its origin on the top left corner of the top left pixel. To hit the pixel in the middle, you must specify coordinates like 3.5 etc.

我稍微缩短了您的代码，希望您不要介意. (仍然这样做，只是减少了行数)

I shortened your code a little, I hope you don't mind. (Still does the same, just less lines)

PointCollection points = new PointCollection();

zigzag = new Polyline();
zigzag.Stroke = Brushes.Black;

for (int i = 1; i < 60 - 3; i = i + 3)
{
    points.Add(
        new Point(
            10.5f + i,
            10.5f + (i % 2 == 0 ? 2 : 5)
         ));
}

this.zigzag.Points = points;
RenderOptions.SetEdgeMode(Panel1, EdgeMode.Aliased);
Panel1.Children.Add(zigzag);

我将两个方向的平移从10增加到10.5.小数部分应为0.5，以指示像素的中心.

I increased the translation from 10 to 10.5 in both directions. The fractional part should be 0.5 to indicate the center of the pixel.

这篇关于WPF，多边形和多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！