Question

在我的Xamarin PLC中，我希望能够绘制速度计或响应输入数值流的条形图。例如，我想从0到100绘制我的条形或速度计，然后根据输入值流将颜色条移动/移动速度表。

我最好把它放在PLC中，用于Android或mac解决方案。

我一直在寻找能满足这些需求的在线资源或Xamarin课程，但还没有运气好。您可以指点我的资源或课程吗？

Answer 1

没有创建自定义渲染器的最接近的Xamarin.Forms解决方案可能是ProgressBar，尽管它非常基础。

ProgressBar的文档可在此处找到： https://developer.xamarin.com/api/type/Xamarin.Forms.ProgressBar/

如果这对您不起作用，可以在此处找到有关创建自定义渲染器的信息： https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/view/

Answer 2

首先，对不起我的英语。

然后，我做了类似的事情，在图表中有一个指针和一些说明，请参见下图。

Speedometer

我复制了一些人的代码，并设法使他们团结起来，并对自己的代码进行了一些更改。因此，某些范围与xml中的参数（宽度，高度）不成比例，我使用了Microcharts和Microcharts.Forms包。希望对您有所帮助。

using System;
using System.Collections.Generic;
using System.Text;
using Microcharts.Forms;
using Microcharts;
using SkiaSharp;
using System.Linq;

namespace MES_App1.Chart
{
    class SpeedometerChart : RadialGaugeChart
    {
        public SpeedometerChart()
        {
            BackgroundColor = SKColors.White;
        }

        private const float startAngle = 150;
        private const float backgroundSweepAngle = 240;


        public override void DrawContent(SKCanvas canvas, int width, int height)
        {
            var diferenceX = width > height ? (width - height) / 2 : 0;
            var diferenceY = height > width ? (height - width) / 2 : 0;
            var strokeWidth = (4 * (width - diferenceX)) / 100;

            var rect = new SKRect(
                5 + strokeWidth + diferenceX,
                5 + strokeWidth + diferenceY + 50,
                width - (5 + strokeWidth + diferenceX),
                height - (5 + strokeWidth + diferenceY)+50);

            var paint = new SKPaint
            {
                Style = SKPaintStyle.Stroke,
                Color = SKColor.Parse("#008000"),
                StrokeWidth = strokeWidth*4,
                IsAntialias = true,
                IsStroke = true
            };

            float[] angulos = { 1, 0.85f, 0.7f, 0.55f, 0.4f, .25f };
            string[] angulosStr = { "100%", "85%", "70%", "55%", "40%", "25%" };
            string[] cores = { "#008000", "#32CD32", "#5F9EA0", "#FFA500", "#FFD700", "#FF0000" };

            for (int i = 0; i < angulos.Length; i++)
            {
                using (SKPath backgroundPath = new SKPath())
                {
                    paint.Color = SKColor.Parse(cores[i]);
                    backgroundPath.AddArc(rect, startAngle, backgroundSweepAngle * angulos[i]);                    
                    canvas.DrawPath(backgroundPath, paint);
                }
                using (SKPath labelPath = new SKPath()) 
                { 
                    var rectLabels = new SKRect
                    {
                        Left=rect.Left-strokeWidth*2-20,
                        Top=rect.Top-strokeWidth*2-20,
                        Right=rect.Right+strokeWidth*2+20,
                        Bottom=rect.Bottom+strokeWidth*2+20
                    };
                    var labelPaint = new SKPaint
                    {
                        Style = SKPaintStyle.Stroke,
                        BlendMode = SKBlendMode.Clear,
                        Color = SKColors.Black,
                        StrokeWidth = 0,
                        IsAntialias = true,
                        IsStroke = true
                    };
                    labelPath.AddArc(rectLabels, startAngle, backgroundSweepAngle * angulos[i]);
                    canvas.DrawPath(labelPath, labelPaint);
                    canvas.DrawCaptionLabels(string.Empty, SKColor.Empty, angulosStr[i], SKColors.Black, 20,labelPath.LastPoint, SKTextAlign.Center);
                }
            }

            float[] angulosLabel = { 1f, 0.85f, 0.7f, 0.55f, .25f };
            float[] offsetLabels = { 20, 25, 20, 30, 30};
            string[] labelsStr = { "Ideal", "Alta", "Tipico", "Precisa Melhoria", "Inaceitavel" };

            for (int i = angulosLabel.Length-1; i >= 0; i--)
            {
                float anguloInicial;
                if (i == angulosLabel.Length-1)
                {
                    anguloInicial = startAngle;
                }
                else
                {
                    anguloInicial = startAngle+backgroundSweepAngle * angulosLabel[i + 1];
                }
                using (SKPath labelPath = new SKPath())
                {
                    
                    var labelPaint = new SKPaint
                    {
                        TextSize=18
                    };
                    labelPath.AddArc(rect, anguloInicial, backgroundSweepAngle * angulosLabel[i]);
                    canvas.DrawTextOnPath(labelsStr[i], labelPath, offsetLabels[i], -10, labelPaint);
                    if (labelsStr[i] == "Alta")
                    {
                        labelPaint.TextSize = 16;
                        canvas.DrawTextOnPath("Performance", labelPath, 0, 10, labelPaint);
                    }
                }
            }


            using (SKPath circlePath = new SKPath())
            {
                
                var circlePaint = new SKPaint
                {
                    Style = SKPaintStyle.Fill,
                    Color = SKColors.Black,
                    IsAntialias = true
                    
                };
                circlePath.AddCircle(rect.MidX, rect.MidY, 20);
                canvas.DrawPath(circlePath, circlePaint);
            }

            foreach (var entry in Entries.OrderByDescending(e => e.Value))
            {
                using (SKPath pointerPath = new SKPath())
                {
                    var colors = new[]
                    {
                        SKColors.SlateGray,
                        SKColors.Gray,
                        SKColors.Black
                    };
                    var shader = SKShader.CreateLinearGradient(
                        new SKPoint(128.0f, 0.0f),
                        new SKPoint(128.0f,256.0f),
                        colors,
                        null,
                        SKShaderTileMode.Clamp);
                    var labelPaint = new SKPaint
                    {
                        Style = SKPaintStyle.Fill,
                        StrokeJoin = SKStrokeJoin.Miter,
                        Shader = shader,
                        IsAntialias = true
                    };
                    canvas.Save();
                    canvas.RotateDegrees(entry.Value/100*backgroundSweepAngle-120, rect.MidX, rect.MidY);
                    pointerPath.MoveTo(rect.MidX-10, rect.MidY);
                    pointerPath.LineTo(rect.MidX, rect.Top);
                    canvas.DrawCaptionLabels(string.Empty, SKColor.Empty, entry.Value.ToString() + "%", SKColors.Black, 20, pointerPath.LastPoint, SKTextAlign.Center);
                    pointerPath.LineTo(10+rect.MidX, rect.MidY);
                    pointerPath.Close();
                    canvas.DrawPath(pointerPath, labelPaint);
                    canvas.Restore();
                }
            }

        }

    }
}

Xamarin PLC中的拉杆或速度计

2 个答案: