自定义 View：绘制垂直正弦函数

2021 年 12 月 04 日
本文字数：847 字
阅读完需：约 3 分钟

1.知识点

贝塞尔曲线：需要一个起始点 P0，控制点 P1，结束点 P2
垂直正弦函数的数学模型：由 2 个贝塞尔曲线拼接而成，P0-P1-P2，P2-P3-P4；计算的重点在于确定这 4 个点的在屏幕中的位置和坐标。假设 SIN_HEIGHT 为正弦函数幅值的 2 倍，SIN_PERIOD 为正弦行数周期长度。

2.原理

3.源码

private static final int SIN_HEIGHT = (int) Util.dp2px(100);    private static final int SIN_PERIOD = (int) Util.dp2px(200);    private void setPathData() {        //  1、复位    清空一次路径        path.reset();        int offset = 0;        int length = SIN_PERIOD*2;        int linePos = getWidth()/2; // 正弦函数中线在X轴上的位置
        for (int i = 0; i < length/SIN_PERIOD; i++) {            int y0 = offset + i*SIN_PERIOD;            int x0 = linePos;            int y1 = SIN_PERIOD/4 + y0;            int x1 = x0+SIN_HEIGHT/2;            int y2 = y0 + SIN_PERIOD/2;            int x2 = linePos;            int y3 = SIN_PERIOD*3/4+y0;            int x3 = linePos-SIN_HEIGHT/2;            int y4 = y0+SIN_PERIOD;            int x4 = linePos;            path.moveTo(x0, y0);            path.quadTo(x1, y1, x2, y2);            path.quadTo(x3, y3, x4, y4);        }
//        path.close();    }          @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        setPathData();
        canvas.drawPath(path, paint2);
        int left = (int) (rightLimit - bitmapMarginRight - imageWidth);        if (left < 0) left = 0;
        @SuppressLint("DrawAllocation")        Rect rect = new Rect(left, getHeight() / 2 - imageHeight / 2, (int) (rightLimit - bitmapMarginRight), getHeight() / 2 + imageHeight / 2);        canvas.drawBitmap(bitmap, null, rect, null);    }