android - 如何使用 AndroidPlot 与圆角（光滑）角对齐

Question

我在绘制图表时遇到了一个小问题。下面的图片是我已经完成的。

该图应代表可用 Wi-Fi 网络的实际信号强度。这是一个简单的XYPlot这里数据表示SimpleXYSeries（值是动态创建的）。

这是一小段代码（仅作为示例）：

plot = (XYPlot) findViewById(R.id.simplexyPlot);
series1 = new SimpleXYSeries(Arrays.asList(series1Numbers),
SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Link 1");
f1 = new LineAndPointFormatter(color.getColor(), null,
Color.argb(60, color.getRed(), color.getGreen(), color.getBlue()), null);
plot.addSeries(series1, f1);

图片中的示例是 dB 变化的动态模拟。我猜一切正常，但我想要实现的是与“圆角”对齐（参见图片以了解我的意思）。

我已经尝试自定义 LineFormatter：

f1.getFillPaint().setStrokeJoin(Join.ROUND);
f1.getFillPaint().setStrokeWidth(8);

但这并没有按预期工作。

在此处输入图像描述

注意：Wifi Analyzer应用程序有一个类似的图表，它的图表有我想要的圆角。它看起来像这样：

在此处输入图像描述

score 12 · Accepted Answer

您可以使用Path.cubicTo()方法。它使用三次样条算法绘制一条线，从而产生您想要的平滑效果。

在此处查看类似问题的答案，其中一个人正在谈论三次样条。有一个简短的算法显示如何计算Path.cubicTo()方法的输入参数。您可以使用分隔值来实现所需的平滑度。例如，在下图中，我除以 5 而不是 3。希望这会有所帮助。

使用 Path.cubicTo() 方法绘制的多段线示例

我花了一些时间实现了一个SplineLineAndPointFormatter类，它可以完成你在 androidplot 库中需要的东西。它使用相同的技术。这是 androidplot 示例应用程序的外观。您只需要使用它而不是LineAndPointFormatter.

带有 SplineLineAndPointFormatter 的 Androidplot 示例

这是代码示例和我编写的类。

f1 = new SplineLineAndPointFormatter(color.getColor(), null, 
      Color.argb(60, color.getRed(), color.getGreen(), color.getBlue()), null);
plot.addSeries(series1, f1);

这是在做魔术的班级。它基于androidplot库的 0.6.1 版本。

package com.androidplot.xy;

import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.RectF;

import com.androidplot.ui.SeriesRenderer;
import com.androidplot.util.ValPixConverter;

public class SplineLineAndPointFormatter extends LineAndPointFormatter {

    public SplineLineAndPointFormatter() { }

    public SplineLineAndPointFormatter(Integer lineColor, Integer vertexColor, Integer fillColor) {
        super(lineColor, vertexColor, fillColor, null);
    }

    public SplineLineAndPointFormatter(Integer lineColor, Integer vertexColor, Integer fillColor, FillDirection fillDir) {
        super(lineColor, vertexColor, fillColor, null, fillDir);
    }

    @Override
    public Class<? extends SeriesRenderer> getRendererClass() {
        return SplineLineAndPointRenderer.class;
    }

    @Override
    public SeriesRenderer getRendererInstance(XYPlot plot) {
        return new SplineLineAndPointRenderer(plot);
    }

    public static class SplineLineAndPointRenderer extends LineAndPointRenderer<BezierLineAndPointFormatter> {

        static class Point {
            public float x, y, dx, dy;
            public Point(PointF pf) { x = pf.x; y = pf.y; }
        }

        private Point prev, point, next;
        private int pointsCounter;

        public SplineLineAndPointRenderer(XYPlot plot) {
            super(plot);
        }

        @Override
        protected void appendToPath(Path path, final PointF thisPoint, PointF lastPoint) {
            pointsCounter--;

            if (point == null) {
                point = new Point(thisPoint);
                point.dx = ((point.x - prev.x) / 5);
                point.dy = ((point.y - prev.y) / 5);
                return;

            } else if (next == null) {
                next = new Point(thisPoint);
            } else {
                prev = point;
                point = next;
                next = new Point(thisPoint);
            }

            point.dx = ((next.x - prev.x) / 5);
            point.dy = ((next.y - prev.y) / 5);
            path.cubicTo(prev.x + prev.dx, prev.y + prev.dy, point.x - point.dx, point.y - point.dy, point.x, point.y);

            if (pointsCounter == 1) { // last point
                next.dx = ((next.x - point.x) / 5);
                next.dy = ((next.y - point.y) / 5);
                path.cubicTo(point.x + point.dx, point.y + point.dy, next.x - next.dx, next.y - next.dy, next.x, next.y);
            }

        }

        @Override
        protected void drawSeries(Canvas canvas, RectF plotArea, XYSeries series, LineAndPointFormatter formatter) {

            Number y = series.getY(0);
            Number x = series.getX(0);
            if (x == null || y == null) throw new IllegalArgumentException("no null values in xyseries permitted");

            XYPlot p = getPlot();
            PointF thisPoint = ValPixConverter.valToPix(x, y, plotArea,
                    p.getCalculatedMinX(), p.getCalculatedMaxX(), p.getCalculatedMinY(), p.getCalculatedMaxY());

            prev = new Point(thisPoint);
            point = next = null;
            pointsCounter = series.size();

            super.drawSeries(canvas, plotArea, series, formatter);
        }
    }
}

score 8 · Accepted Answer

1-我猜你只使用几个点来绘制信号图。所有图形/图表应用程序都尝试用直线连接点，然后您的图表将显示出来。因此，如果您只使用三个点，您的图表将看起来像一个三角形！如果你想让你的图表弯曲，你必须添加更多的点。然后它像曲线一样出来。

2-或者您可以找到任何可以绘制sin图形的库，例如GraphView Library。然后尝试绘制这个函数：

在此处输入图像描述

所以它看起来像这样：

在此处输入图像描述

然后将其翻译成(a,0)，所以结果看起来像你想要的。

3-Math.sin另一种方式，您可以使用Java内置：

例如，在范围内选择 1000 个点a并b计算每个点的上述函数的值，最后创建一个path并将它们显示在画布中。

您可以使用quadTo (float x1, float y1, float x2, float y2)为您简化绘图quad curves。文档说：

从最后一点添加二次贝塞尔曲线，接近控制点 (x1,y1)，并在 (x2,y2) 处结束。如果没有对此轮廓进行 moveTo() 调用，则第一个点将自动设置为 (0,0)。

参数

x1 二次曲线上控制点的 x 坐标
y1 二次曲线上控制点的 y 坐标
x2 二次曲线上端点的 x 坐标
y2 上端点的 y 坐标二次曲线

最后，我添加了一个简单的类，它可以扩展View并可以绘制一条看起来像您想要的曲线：

public class SinWave extends View {

    private float first_X = 50;
    private float first_Y = 230;
    private float end_X = 100;
    private float end_Y = 230;
    private float Max = 50;

    public SinWave(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint() {
            {
                setStyle(Paint.Style.STROKE);
                setStrokeCap(Paint.Cap.ROUND);
                setStrokeWidth(0.7f);
                setAntiAlias(true);
                setColor(0xFFFF00FF);
            }
        };
        final Path path = new Path();
        path.moveTo(first_X, first_Y);
        path.quadTo((first_X + end_X)/2, Max, end_X, end_Y);
        canvas.drawPath(path, paint);
    }
}

结果必须如下所示：

在此处输入图像描述

您可以向该类添加更多方法并对其进行更改以提高性能！

score 0 · Accepted Answer

Androidplot 中一直有一个平滑线渲染器：BezierLineAndPointRenderer，它与上面的实现一样使用 Android 内置的 Bezier 绘图例程cubicTo(...) & quadTo(...)。问题在于，使用贝塞尔曲线以这种方式绘制平滑线会创建一条假线，它会以不同的量超出实际控制点，如果仔细观察上图，您会发现这种情况正在发生。

解决方案是使用Catmull-Rom样条插值，现在Androidplot终于支持了。详情在这里：http ://androidplot.com/smooth-curves-and-androidplot/

score 0 · Accepted Answer

在一些简单的情况下，这可能会有所帮助：

mPaint.pathEffect = CornerPathEffect(radius)

即使结合

path.lineTo(x,y)

score 0 · Accepted Answer

只需使用 ChartFactory.getCubeLineChartView 而不是 ChartFactory.getLineChartView 使用 chart 引擎

score -1 · Accepted Answer

try this:

symbol = new Path();
paint = new Paint();
paint.setAntiAlias(true);      
paint.setStrokeWidth(2);
paint.setColor(-7829368);  
paint.setStrokeJoin(Paint.Join.ROUND);    // set the join to round you want
paint.setStrokeCap(Paint.Cap.ROUND);      // set the paint cap to round too
paint.setPathEffect(new CornerPathEffect(10) );
paint.setStyle(Paint.Style.STROKE);       

symbol.moveTo(50.0F, 230.0F);         
symbol.lineTo(75.0F, 100.0F);
symbol.lineTo(100.0F, 230.0F);

most of the info found here

android - 如何使用 AndroidPlot 与圆角（光滑）角对齐

6 回答 6

Related

Reference