canvas和paint画劳力士表盘

效果图:

canvas和paint画劳力士表盘_第1张图片

页面代码:

public class WatchView extends View {
    private Paint mPaint, minPaint;
    private float mRadius = 250;

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

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(8);

        //这么做不仅仅是为了方便,还和[canvas的原理](http://blog.csdn.net/dinko321/article/details/7679019)有关
        canvas.translate(canvas.getWidth() / 2, canvas.getHeight() / 2);//把屏幕中心设为原点
        canvas.drawCircle(0, 0, mRadius, mPaint);//画表环
        canvas.drawCircle(0, 0, 8, mPaint);//画中心点
        canvas.drawLine(0, 20, 0, -180, mPaint);//画指针

        //使用path绘制路径文字
        Path path = new Path();//实例化路径
        RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);//实例化一个矩形
        path.addArc(rectF, 180, -180);//绘制圆弧,圆弧为矩形rectF内切椭圆180°到-180°的那部分
        minPaint = new Paint(mPaint);//实例化新画笔
        minPaint.setStyle(Paint.Style.FILL);//设置实心
        minPaint.setTextSize(20);
        minPaint.setStrokeWidth(1);//设置线条粗度
        canvas.drawTextOnPath("R  O  L  E  X", path, 340, -100, minPaint);//根据路径写上文字,340为距路径初始点的偏移,50为距路径的距离


        //画表盘
        int count = 60;
        float distance = -mRadius + 20;
        for (int i = 0; i < count; i++) {
            if (i % 5 == 0) {
                canvas.drawLine(0, -mRadius, 0, distance + 10, minPaint);
                canvas.drawText(i == 0 ? "12" : String.valueOf(i / 5), -5, distance + 30, minPaint);
            } else {
                canvas.drawLine(0, -mRadius, 0, distance, minPaint);
            }
            canvas.rotate(360 / count);//旋转画纸,注意:canvas之前画的东西不会旋转,在调用rotate()后再画上的图形才会旋转
        }
    }
}

你可能感兴趣的:(android,UI)