此时效果如下：

整体代码如下：

/** * 闹钟表盘 * * @author AJian */ public class RotateClockView extends View { private static final int LONG_LINE_HEIGHT = 35; private static final int SHORT_LINE_HEIGHT = 25; private Paint mCirclePaint, mLinePaint; private DrawFilter mDrawFilter; private int mHalfWidth, mHalfHeight; // 圆环线宽度 private int mCircleLineWidth, mHalfCircleLineWidth; // 直线刻度线宽度 private int mLineWidth, mHalfLineWidth; // 长线长度 private int mLongLineHeight; // 短线长度 private int mShortLineHeight; // 刻度线的左、上位置 private int mLineLeft, mLineTop; // 刻度线的下边位置 private int mLineBottom; // 用于控制刻度线位置 private int mFixLineHeight; public RotateClockView(Context context) { super(context); mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); mCircleLineWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics()); mHalfCircleLineWidth = mCircleLineWidth; mLineWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources().getDisplayMetrics()); mHalfLineWidth = mLineWidth / 2; mFixLineHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources().getDisplayMetrics()); mLongLineHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, LONG_LINE_HEIGHT, getResources().getDisplayMetrics()); mShortLineHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, SHORT_LINE_HEIGHT, getResources().getDisplayMetrics()); initPaint(); } private void initPaint() { mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mCirclePaint.setColor(Color.RED); // 将画笔设置为空心 mCirclePaint.setStyle(Style.STROKE); // 设置画笔宽度 mCirclePaint.setStrokeWidth(mCircleLineWidth); mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mLinePaint.setColor(Color.RED); mLinePaint.setStyle(Style.FILL_AND_STROKE); // 设置画笔宽度 mLinePaint.setStrokeWidth(mLineWidth); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onDraw(Canvas canvas) { canvas.setDrawFilter(mDrawFilter); super.onDraw(canvas); // 绘制表盘 drawCircle(canvas); // 绘制刻度 drawLines(canvas); } /** * 绘制刻度 * * @param canvas */ private void drawLines(Canvas canvas) { for (int i = 0; i <= 360; i++) { if (i % 30 == 0) { mLineBottom = mLineTop + mLongLineHeight; mLinePaint.setStrokeWidth(mLineWidth); } else { mLineBottom = mLineTop + mShortLineHeight; mLinePaint.setStrokeWidth(mHalfLineWidth); } if (i % 6 == 0) { canvas.save(); canvas.rotate(i, mHalfWidth, mHalfHeight); canvas.drawLine(mLineLeft, mLineTop, mLineLeft, mLineBottom, mLinePaint); canvas.restore(); } } } /** * 绘制表盘 * * @param canvas */ private void drawCircle(Canvas canvas) { canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth - mHalfCircleLineWidth, mCirclePaint); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mHalfWidth = w / 2; mHalfHeight = h / 2; mLineLeft = mHalfWidth - mHalfLineWidth; mLineTop = mHalfHeight - mHalfWidth + mFixLineHeight; } }

同样的，有兴趣的同学可以自己补上文字；

四、canvas.skew( ) － 画布的错切： 

/** * Preconcat the current matrix with the specified skew. * * @param sx The amount to skew in X * @param sy The amount to skew in Y */ public native void skew(float sx, float sy);

这个方法只要理解了两个参数即可：

float sx:将画布在x方向上倾斜相应的角度，sx为倾斜角度的tan值；

float sy:将画布在y轴方向上倾斜相应的角度，sy为倾斜角度的tan值；

注意，这里全是倾斜角度的tan值，比如我们打算在X轴方向上倾斜45度，tan45=1；

先在X 轴上倾斜45 度，我们一起看看： @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawColor(Color.BLUE); canvas.drawRect(new Rect(0, 0, 400, 400), mPaint); // x 方向上倾斜45 度 canvas.skew(1, 0); mPaint.setColor(0x8800ff00); canvas.drawRect(new Rect(0, 0, 400, 400), mPaint); }效果如下：