c# - 在 UWP C# 中从路径绘制图形

Question

我正在尝试将 android 方法转换为绘制任何类型的形状。以下是 android 代码和我尝试过的 C# 代码。我的 C# 代码根本不起作用，它提供了模糊的绘图作为输出。
我在 C# UWP 中搜索了很多关于路径绘制的内容，类似于 android.graphics.Path 但找不到任何适用于 UWP 的内容。

安卓代码

public static Bitmap getPathBitmap(int width, int height, GraphicsSegment[] segments) {

    RectF rect = null;
    Path path = new Path();
    Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.TRANSPARENT);
    canvas.drawPaint(paint);

    for (GraphicsSegment segment : segments) {

        switch (segment.drawingType) {
            case GraphicsSegment.T_MOVETO:
                path.moveTo(segment.x, segment.y);
                break;
            case GraphicsSegment.T_LINETO:
                path.lineTo(segment.x, segment.y);
                break;
            case GraphicsSegment.T_QUADTO:
                path.quadTo(segment.x, segment.y, segment.x2, segment.y2);
                break;
            case GraphicsSegment.T_CUBICTO:
                path.cubicTo(segment.x, segment.y, segment.x1, segment.y1, segment.x2, segment.y2);
                break;
            case GraphicsSegment.T_ARCTO:
                rect = new RectF();
                rect.set(segment.x, segment.y, segment.x1, segment.y1);
                path.arcTo(rect, segment.x2, segment.y2, true);
                break;
            case GraphicsSegment.T_ADDOVAL:
                rect = new RectF();
                rect.set(segment.x, segment.y, segment.x1, segment.y1);
                path.addOval(rect, Path.Direction.CW);
                break;
            case GraphicsSegment.T_CLOSE:
                path.close();
                break;
        }
    }

    paint.setStrokeWidth(2);
    paint.setStyle(Paint.Style.STROKE);
    canvas.drawPath(path, paint);
    return bitmap;
}

我试过的 C# 代码

 public WriteableBitmap getPathBitmap(int width, int height, GraphicsSegment[] segments)
 {
        List<int> points = new List<int>();

        foreach (GraphicsSegment segment in segments)
        {
            if (segment.drawingType == GraphicsSegment.T_CLOSE)
                continue;

            points.Add((int)segment.X);
            points.Add((int)segment.Y);
        }

        WriteableBitmap writeableBmp = BitmapFactory.New(width, height);
        using (writeableBmp.GetBitmapContext())
        {
           writeableBmp.DrawPolyline(points.ToArray(), Colors.Blue);
        }

        return writeableBmp;
 }

GraphicsSegment 是一个具有属性 x,y,x1,y1,x2,y2 对应第一个、第二个和第三个目标点的 X,Y 坐标位置的类

Answer 1

您可以使用 Microsoft.Graphics.Canvas 命名空间。 只需按照以下步骤

使用 CanvasPathBuilder (Microsoft.Graphics.Canvas.Geometry) 像 android 一样构建 Path

使用您的路径创建 CanvasGeometry (Microsoft.Graphics.Canvas.Geometry)

创建 CanvasDrawingSession 实例

使用 CanvasDrawingSession 实例使用 DrawGeometry 绘制图像

将 CanvasRenderTarget 图像转换为您所需的格式

这是您可以尝试的示例代码:

public getPathBitmap(int width, int height, GraphicsSegment[] segments) {

    CanvasRenderTarget _RenderImage = null;

    CanvasDevice device = CanvasDevice.GetSharedDevice();
    var logicalDpi = 96.0f;

    //Step 01
    var path = new CanvasPathBuilder(device);  

    foreach(GraphicsSegment segment in segments) {
        switch (segment.drawingType) {
        case GraphicsSegment.T_MOVETO:
            path.BeginFigure(X-Cordinate Start Position, Y-Cordinate Start Position);
            break;
        case GraphicsSegment.T_LINETO:
            path.AddLine(X-Cordinate Next Position, Y-Cordinate Next Position);
            break;
        case GraphicsSegment.T_QUADTO:
            {
                Vector2 point = new Vector2(X-Cordinate Control Position1, Y-Cordinate Control Position1);
                Vector2 point2 = new Vector2(X-Cordinate Control Position2, Y-Cordinate Control Position2);
                path.AddQuadraticBezier(point, point2);
            }
            break;
        case GraphicsSegment.T_CUBICTO:
            {
                Vector2 point = new Vector2(X-Cordinate Control Position1, Y-Cordinate Control Position1);
                Vector2 point2 = new Vector2(X-Cordinate Control Position2, Y-Cordinate Control Position2);
                Vector2 point3 = new Vector2(X-Cordinate End Position, Y-Cordinate End Position);
                path.AddCubicBezier(point, point2, point3);
            }
            break;
        case GraphicsSegment.T_ARCTO:
            {
                //TODO:: Set centerPoint, radiusX, radiusY, startAngle, sweepAngle by your self based on your requirement
                Vector2 centerPoint = Calculate();
                path.AddArc(centerPoint, radiusX, radiusY, startAngle, sweepAngle);
            }
            break;
        case GraphicsSegment.T_CLOSE:
            path.EndFigure(CanvasFigureLoop.Closed);
            break;
        case GraphicsSegment.T_ADDOVAL:
            {
                //TODO:: Set endpoint,radiusX,radiusY,rotationAngle by your self based on your requirement
                Vector2 endpoint = Calculate();
                path.AddArc(endpoint, radiusX, radiusY, rotationAngle, CanvasSweepDirection.Clockwise, CanvasArcSize.Small);
            }

            break;
        }
    }

    //Step 02
    var g = CanvasGeometry.CreatePath(path);

    _RenderImage = new CanvasRenderTarget(device, width, height, logicalDpi);

    //Step 03
    using(var ds = _RenderImage.CreateDrawingSession()) {
        ds.Clear(Colors.Transparent);

        //Step 05
        ds.DrawGeometry(g, Colors.Blue, 3.0f);
    }

    //Step 05
    //Here you have to convert CanvasRenderTarget object  _RenderImage to your required format like bitmapimage,stream,stroageFile etc
    return yourTypeFile;
}