Android 贝塞尔曲线 折线图

1、贝塞尔曲线:http://baike.baidu.com/view/60154.htm,在这里理解什么是贝塞尔曲线

2、直接上图:

 Android 贝塞尔曲线 折线图

3、100多行代码就可以画出贝塞尔曲线,直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
package com.example.bezier;
 
import java.util.ArrayList;
import java.util.List;
 
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
 
public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(new BezierView(this));
    }
}
 
class BezierView extends View {
    /**
     *
     * @author liqiongwei
     * @param context
     *
     */
    public BezierView(Context context) {
        super(context);
    }
 
    protected void onDraw(Canvas canvas) {
 
        List<Float> points = new ArrayList<Float>();
 
        Paint paint = new Paint();
        // 添加第一个点(118.0, 294.0),
        points.add((float) 118.0);// X轴
        points.add((float) 294.0);// Y轴
        // 添加第二个点
        points.add((float) 206.0);
        points.add((float) 294.0);
        // 添加第三个点
        points.add((float) 294.0);
        points.add((float) 118.0);
        // 添加第四个点
        points.add((float) 382.0);
        points.add((float) 206.0);
 
        points.add((float) 470.0);
        points.add((float) 118.0);
 
        // 通过画折线和贝塞尔曲线可以知道,点得位置是不一样的。
        // 画折线
        for (int i = 0; i < points.size() - 2; i = i + 2) {
            canvas.drawLine(points.get(i), points.get(i + 1), points.get(i + 2), points.get(i + 3), paint);
            canvas.drawCircle(points.get(i), points.get(i + 1), 3, paint);
        }
        canvas.drawCircle(points.get(points.size() - 2), points.get(points.size() - 1), 3, paint);
 
        // 贝塞尔曲线
        paint.setColor(Color.BLUE);
        Path p = new Path();
        Point p1 = new Point();
        Point p2 = new Point();
        Point p3 = new Point();
        float xp = points.get(0);
        float yp = points.get(1);
        // 设置第一个点开始
        p.moveTo(xp, yp);
        canvas.drawCircle(xp, yp, 5, paint);
        int length = points.size();
        // 设置第一个控制点33%的距离
        float mFirstMultiplier = 0.3f;
        // 设置第二个控制点为66%的距离
        float mSecondMultiplier = 1 - mFirstMultiplier;
 
        for (int b = 0; b < length; b += 2) {
            int nextIndex = b + 2 < length ? b + 2 : b;
            int nextNextIndex = b + 4 < length ? b + 4 : nextIndex;
            // 设置第一个控制点
            calc(points, p1, b, nextIndex, mSecondMultiplier);
            // 设置第二个控制点
            p2.setX(points.get(nextIndex));
            p2.setY(points.get(nextIndex + 1));
            // 设置第二个控制点
            calc(points, p3, nextIndex, nextNextIndex, mFirstMultiplier);
            // 最后一个点就是赛贝尔曲线上的点
            p.cubicTo(p1.getX(), p1.getY(), p2.getX(), p2.getY(), p3.getX(), p3.getY());
            // 画点
            canvas.drawCircle(p3.getX(), p3.getY(), 5, paint);
        }
        // 设置为线
        paint.setStyle(Style.STROKE);
        canvas.drawPath(p, paint);
 
        invalidate();
    }
 
    /**
     * 计算控制点,此方法来源于Achartengine
     * @param points
     * @param result
     * @param index1
     * @param index2
     * @param multiplier
     */
    private void calc(List<Float> points, Point result, int index1, int index2, final float multiplier) {
        float p1x = points.get(index1);
        float p1y = points.get(index1 + 1);
        float p2x = points.get(index2);
        float p2y = points.get(index2 + 1);
 
        float diffX = p2x - p1x;
        float diffY = p2y - p1y;
        result.setX(p1x + (diffX * multiplier));
        result.setY(p1y + (diffY * multiplier));
    }
}

4、定义点的类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
package com.example.bezier;
 
import java.io.Serializable;
 
/**
 * 点的类,来源于Achartengine
 */
public final class Point implements Serializable {
  private float mX;
  private float mY;
   
  public Point() {
  }
   
  public Point(float x, float y) {
    mX = x;
    mY = y;
  }
   
  public float getX() {
    return mX;
  }
 
  public float getY() {
    return mY;
  }
   
  public void setX(float x) {
    mX = x;
  }
   
  public void setY(float y) {
    mY = y;
  }
}

5、下载地址:http://files.cnblogs.com/liqw/Bezier.zip

本文来源于:http://www.cnblogs.com/liqw/p/3631137.html

有问题,请提问,大家一起研究!

Android 贝塞尔曲线 折线图,布布扣,bubuko.com

Android 贝塞尔曲线 折线图

上一篇:iOS 中通过使用Google API获得Google服务


下一篇:MAC 下Java Android 环境配置