画笔实现的一个简单自定义控件

来源:互联网 发布:微信拍卖系统源码 编辑:程序博客网 时间:2024/05/21 11:18

主要是最近项目有个用到一个圆环的自定义控件菜单动画,就大概说明下简单的布局, 直接贴代码:

import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.util.AttributeSet;import android.view.View;/** * Created by admin on 2017/4/12. * 扇形每次在圆环上转动角度的weight */public class CustomView extends View {    /**     * 圆圈画笔     */    private Paint mCirclePaint;    /**     * 大扇形画笔     */    private Paint mBigSectorPaint;    /**     * 小扇形画笔     */    private Paint mSmoolSectorPaint;    public CustomView(Context context) {        super(context);        initPaint();    }    public CustomView(Context context, AttributeSet attrs) {        super(context, attrs);        initPaint();    }    private void initPaint() {        mCirclePaint = new Paint();        mCirclePaint.setAntiAlias(true);        mCirclePaint.setColor(getResources().getColor(R.color.circlr));        mCirclePaint.setStyle(Paint.Style.STROKE);        mCirclePaint.setStrokeWidth(1);        mBigSectorPaint = new Paint();        mBigSectorPaint.setAntiAlias(true);        mBigSectorPaint.setColor(getResources().getColor(R.color.bigsector));        mBigSectorPaint.setStyle(Paint.Style.FILL);        mBigSectorPaint.setStrokeWidth(1);        mSmoolSectorPaint = new Paint();        mSmoolSectorPaint.setAntiAlias(true);        mSmoolSectorPaint.setColor(getResources().getColor(R.color.smoolSector));        mSmoolSectorPaint.setStyle(Paint.Style.FILL);        mSmoolSectorPaint.setStrokeWidth(1);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        /**         * 圆中心点的坐标为(getWidth() / 2,getHeight() / 2         * 半径为 getWidth() *2/ 5         */        int xCenter = getWidth() / 2;        int yCenter = (getHeight() - 136) / 2;        int rCircleSmoll = 80;        int rCircleBig = getWidth() / 2-10;        //外切大圆半径        int rExcircleBig;        rExcircleBig = (int) Math.round(rCircleBig / Math.sin(Math.toRadians(45)));        canvas.drawCircle(xCenter, yCenter, rCircleSmoll, mCirclePaint);        canvas.drawCircle(xCenter, yCenter, rCircleBig, mCirclePaint);        //大圆外切正方形左上角坐标  (正方向的左上角为圆上-135度角)        int xb, yb;        //大圆外切正方形右下角坐标  (正方形的右下角为圆上45度角)        int Xb, Yb;        xb = (int) Math.round(rExcircleBig * Math.cos(Math.toRadians(-135))) + xCenter;        yb = (int) Math.round(rExcircleBig * Math.sin(Math.toRadians(-135))) + yCenter;        Xb = (int) Math.round(rExcircleBig * Math.cos(Math.toRadians(45))) + xCenter;        Yb = (int) Math.round(rExcircleBig * Math.sin(Math.toRadians(45))) + yCenter;        RectF ovalB = new RectF(xb, yb, Xb, Yb);        canvas.drawArc(ovalB, mStartAngle, 60, true, mBigSectorPaint);        //外切小圆半径        int rExcircleSmoll;        rExcircleSmoll = (int) Math.round(rCircleSmoll / Math.sin(Math.toRadians(45)));        //小圆外切正方形左上角坐标        int xs, ys;        //小圆外切正方形右下角坐标        int Xs, Ys;        xs = (int) Math.round(rExcircleSmoll * Math.cos(Math.toRadians(-135))) + xCenter;        ys = (int) Math.round(rExcircleSmoll * Math.sin(Math.toRadians(-135))) + yCenter;        Xs = (int) Math.round(rExcircleSmoll * Math.cos(Math.toRadians(45))) + xCenter;        Ys = (int) Math.round(rExcircleSmoll * Math.sin(Math.toRadians(45))) + yCenter;        RectF ovalS = new RectF(xs, ys, Xs, Ys);        canvas.drawArc(ovalS, mStartAngle, 360, true, mSmoolSectorPaint);    }    private float mStartAngle = -120;    /**     * 每次旋转的角度     * @param angle     */    public void setStartAngle(int angle) {        this.mStartAngle = angle;        //重新绘制        postInvalidate();    }}
大概就是这样的一个代码;都是很简单的  我主要是为了记忆下,就写出来  有什么不好的地方可以回复;

中间有些旋转角度问题;因为在手机屏幕上左上角为(0,0)坐标,往下为Y正方向,所以0度为X轴正方向,Y轴负方向为-90度,以此类推,

还有就是边的计算问题,这都属于一些简单的数学三角函数,sinA = 对边/斜边  cosA = 邻边/斜边,根据自己需要计算

因为我做的是属于智能家居遥控器方面的app,所以需要硬件控制

activity代码是通过onkeyUp事件处理;

@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {    if (keyCode == KeyEvent.KEYCODE_PAGE_UP) {        mStartAngle = mStartAngle + 60;        mCustomView.setStartAngle(mStartAngle);    } else if (keyCode == KeyEvent.KEYCODE_PAGE_DOWN) {        mStartAngle = mStartAngle - 60;        mCustomView.setStartAngle(mStartAngle);    } else {        return false;    }    return true;}

xml直接饮用该布局就ok,没有什么难度就不贴代码了

加载出来默认图片

通过事件处理转动后图片

0 0
原创粉丝点击