风车控件, 光圈控件

https://www.cnblogs.com/willhua/p/5763189.html

参考大神的思路, 动手改造加深理解

要点

• 定义扇叶 (30, 60, 90 的直角三角形)
• 找到内六边形顶点
• 依次移动到顶点,进行旋转(参考第4幅图, 半透明是移动前的图形, 理解下面的计算)

  mPoints[0].x = curRadius / 2;
  mPoints[0].y = -curRadius * COS_30;

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <com.huawei.camera.canvas.MyTextView
        android:layout_width="100dp"
        android:layout_height="400dp" />

</LinearLayout>

代码参考:

package com.huawei.camera.canvas;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.PorterDuff;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class MyTextView extends View {
    private static final String TAG = "MyTextView";
    private static final float ROTATE_ANGLE = 30;
    private static final int BACKGROUND_COLOR_ACTIVE = Color.parseColor("#FFFFFFFF");
    private static final float COS_30 = 0.866025f;
    private static final float MIN_RADIUS = 17.5f/COS_30;
    private static final float MAX_RADIUS = 67f/COS_30;
    private static final int SPACE = 3;
    private static final int BLADE_COLOR = Color.parseColor("#FF00FF00");
    private static final int VIRTUAL_BLADE_COLOR = Color.parseColor("#3300FF00");

    private int mCircleRadius;
    private int mWidth;
    private PointF[] mPoints = new PointF[6];
    private Bitmap mBlade;
    private Bitmap mVirtualBlade;
    private Bitmap mBmp;
    private Canvas mBmpCanvas;
    private Path mPath;
    private Paint mPaint;
    private int k = 0;
    public MyTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    class AnimationRotateRunnable implements Runnable {
        @Override
        public void run() {
            invalidate();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Log.i(TAG, "onDraw: " + getHeight());
        mBmpCanvas = canvas;
        mBmpCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);//清理画布, 防止透明背景出现叠加
        mBmpCanvas.drawColor(BACKGROUND_COLOR_ACTIVE);
        mBmpCanvas.save();
        calculatePoints(0);
        mBmpCanvas.translate(mWidth / 2, mWidth / 2);
        mBmpCanvas.rotate(k % 360);
        //mBmpCanvas.clipPath(mPath);
        for (int i = 0; i < 6; i++) {
            mBmpCanvas.save();
            mBmpCanvas.translate(mPoints[i].x, mPoints[i].y);
            mBmpCanvas.rotate(-i * 60);
            mBmpCanvas.drawBitmap(mBlade, 0, 0, mPaint);
            mBmpCanvas.restore();
        }
        //postInvalidateDelayed(20);
        mBmpCanvas.restore();
        mBmpCanvas.drawLine(0f, mWidth, mWidth, mWidth, mPaint);

        //2nd
        mBmpCanvas.save();
        calculatePoints(0.3f);
        mBmpCanvas.translate(mWidth / 2, 3 * mWidth / 2);
        //mBmpCanvas.clipPath(mPath);
        for (int i = 0; i < 6; i++) {
            mBmpCanvas.save();
            mBmpCanvas.translate(mPoints[i].x, mPoints[i].y);
            mBmpCanvas.rotate(-i * 60);
            mBmpCanvas.drawBitmap(mBlade, 0, 0, mPaint);
            mBmpCanvas.restore();
        }
        mBmpCanvas.restore();
        mBmpCanvas.drawLine(0f, 2*mWidth, mWidth, 2*mWidth, mPaint);

        //3rd
        mBmpCanvas.save();
        calculatePoints(0.6f);
        mBmpCanvas.translate(mWidth / 2, 5 * mWidth / 2);
        //mBmpCanvas.clipPath(mPath);
        for (int i = 0; i < 6; i++) {
            mBmpCanvas.save();
            mBmpCanvas.translate(mPoints[i].x, mPoints[i].y);
            mBmpCanvas.rotate(-i * 60);
            mBmpCanvas.drawBitmap(mBlade, 0, 0, mPaint);
            mBmpCanvas.restore();
        }
        mBmpCanvas.restore();
        mBmpCanvas.drawLine(0f, 3*mWidth, mWidth, 3*mWidth, mPaint);

        //4th
        mBmpCanvas.save();
        calculatePoints(0.9f);
        mBmpCanvas.translate(mWidth / 2, 7 * mWidth / 2);
        //mBmpCanvas.clipPath(mPath);
        mBmpCanvas.drawBitmap(mVirtualBlade, 0, 0, mPaint);
        for (int i = 0; i < 6; i++) {
            mBmpCanvas.save();
            mBmpCanvas.translate(mPoints[i].x, mPoints[i].y);
            mBmpCanvas.rotate(-i * 60);
            mBmpCanvas.drawBitmap(mBlade, 0, 0, mPaint);
            mBmpCanvas.restore();
        }
        mBmpCanvas.restore();
        k += 1;
    }

    private void calculatePoints(float progress) {
        if (mCircleRadius - SPACE <= 0) {
            Log.e(TAG, "the size of view is too small and Space is too large");
            return;
        }
        float curRadius = MIN_RADIUS + progress * (MAX_RADIUS - MIN_RADIUS);
        mPoints[0].x = curRadius / 2;
        mPoints[0].y = -curRadius * COS_30;
        mPoints[1].x = -mPoints[0].x;
        mPoints[1].y = mPoints[0].y;
        mPoints[2].x = -curRadius;
        mPoints[2].y = 0;
        mPoints[3].x = mPoints[1].x;
        mPoints[3].y = -mPoints[1].y;
        mPoints[4].x = -mPoints[3].x;
        mPoints[4].y = mPoints[3].y;
        mPoints[5].x = curRadius;
        mPoints[5].y = 0;
    }

    private void init() {
        mWidth = 350;
        mCircleRadius = 80;
        mBmp = Bitmap.createBitmap(mWidth, mWidth, Bitmap.Config.ARGB_8888);
        mBmpCanvas = new Canvas(mBmp);
        mPaint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG);
        mPaint.setAntiAlias(true);
        for (int i = 0; i < 6; i++) {
            mPoints[i] = new PointF();
        }
        mPath = new Path();
        mPath.addCircle(0, 0, mCircleRadius, Path.Direction.CW);
        createBlade();
        createVirtualBlade();
    }

    private void createBlade() {
        mBlade = Bitmap.createBitmap(mCircleRadius,
                (int) (mCircleRadius * 2 * COS_30), Bitmap.Config.ARGB_8888);
        Path path = new Path();
        Canvas canvas = new Canvas(mBlade);
        path.moveTo(SPACE / 2 / COS_30, SPACE);
        path.lineTo(mBlade.getWidth(), mBlade.getHeight());
        path.lineTo(mBlade.getWidth(), SPACE);
        path.close();
        canvas.clipPath(path);
        canvas.drawColor(BLADE_COLOR);
    }

    private void createVirtualBlade() {
        mVirtualBlade = Bitmap.createBitmap(mCircleRadius,
                (int) (mCircleRadius * 2 * COS_30), Bitmap.Config.ARGB_8888);
        Path path = new Path();
        Canvas canvas = new Canvas(mVirtualBlade);
        path.moveTo(SPACE / 2 / COS_30, SPACE);
        path.lineTo(mVirtualBlade.getWidth(), mVirtualBlade.getHeight());
        path.lineTo(mVirtualBlade.getWidth(), SPACE);
        path.close();
        canvas.clipPath(path);
        canvas.drawColor(VIRTUAL_BLADE_COLOR);
    }
}

变成光圈控件:

只需要对canvas执行clipPath