学习每每是枯燥的,若是能用一个有趣 Demo 来学习和练习技术,那对知识的掌握就会更牢固。我以前在学习 Canvas 绘制 API 的时候就是这样作的。java
效果图android
我以为这个绘制小黄人的自定义 View 就颇有意思,也为我后来工做中的自定义 View 实现打下了良好的基础。虽然这是 4 年半之前写的文章,可是大部分关注咱们的同窗应该没看过,今天我们一块儿来拷古翻新一下代码(程序员的事,怎么能叫炒冷饭呢,这明明是温故而知新)。之后有机会还会分享项目实用自定义 View,敬请关注。git
其实很简单程序员
canvas.drawBitmap()
后画到画布上 好吧,一点都很差笑 - -。正文github
自定义MinionView extends View
,定义如下成员变量,备用(能够先不看,后面的代码看到莫名其妙出来的变量再上来看下)canvas
private float bodyWidth;
private float bodyHeight;
private static final float BODY_SCALE = 0.6f; // 身体主干占整个view的比重
private static final float BODY_WIDTH_HEIGHT_SCALE = 0.6f; // 身体的比例设定为 w:h = 3:5
private float mStrokeWidth = 4; // 描边宽度
private float offset; // 计算时,部分须要 考虑描边偏移
private float radius; // 身体上下半圆的半径
private int colorClothes = Color.rgb(32, 116, 160); // 衣服的颜色
private int colorBody = Color.rgb(249, 217, 70); // 身体的颜色
private int colorStroke = Color.BLACK;
private RectF bodyRect = new RectF();
private float handsHeight;// 计算出吊带的高度时,能够用来作手的高度
private float footHeight; // 脚的高度,用来画脚部阴影时用
复制代码
重写 onSizeChanged
方法,尺寸变化时初始化一下绘制的参数(会常常看到一些奇怪的数字,用作比例换算,别问我怎么来的,目测 + 一点点微调得来的- -。)dom
private void initParams() {
bodyWidth = Math.min(getWidth(), getHeight() * BODY_WIDTH_HEIGHT_SCALE) * BODY_SCALE;
bodyHeight = Math.min(getWidth(), getHeight() * BODY_WIDTH_HEIGHT_SCALE) / BODY_WIDTH_HEIGHT_SCALE * BODY_SCALE;
mStrokeWidth = Math.max(bodyWidth / 50, mStrokeWidth);
offset = mStrokeWidth / 2;
bodyRect.left = (getWidth() - bodyWidth) / 2;
bodyRect.top = (getHeight() - bodyHeight) / 2;
bodyRect.right = bodyRect.left + bodyWidth;
bodyRect.bottom = bodyRect.top + bodyHeight;
radius = bodyWidth / 2;
footHeight = radius * 0.4333f;
handsHeight = (getHeight() + bodyHeight) / 2 + offset - radius * 1.65f;
}
复制代码
绘制参数好了,接下来就是一步步绘制几何图形了ide
protected void onDraw(Canvas canvas) {
...
drawBody(canvas); // 身体
drawBodyStroke(canvas); // 最后画身体的描边,能够摭住一些过渡的棱角
}
private void drawBody(Canvas canvas) {
mPaint.setColor(colorBody);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawRoundRect(bodyRect, radius, radius, mPaint);
}
private void drawBodyStroke(Canvas canvas) {
mPaint.setColor(colorStroke);
mPaint.setStrokeWidth(mStrokeWidth);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawRoundRect(bodyRect, radius, radius, mPaint);
}
复制代码
rect.left = (getWidth() - bodyWidth) / 2 + offset;
rect.top = (getHeight() + bodyHeight) / 2 - radius * 2 + offset;
rect.right = rect.left + bodyWidth - offset * 2;
rect.bottom = rect.top + radius * 2 - offset * 2;
mPaint.setColor(colorClothes);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(mStrokeWidth);
canvas.drawArc(rect, 0, 180, true, mPaint);
复制代码
int h = (int) (radius * 0.5);
int w = (int) (radius * 0.3);
rect.left += w;
rect.top = rect.top + radius - h;
rect.right -= w;
rect.bottom = rect.top + h;
canvas.drawRect(rect, mPaint);
复制代码
canvas.drawLines
把线一条条画出来吧,这边要同时考虑画笔的描边宽度,不然会出现链接点有锯齿的感受。( 2020 注:这是当时最直接的想法,如今来看用 Path 来绘制,每一个点用 rLineTo 去链接,代码会简单得多。)mPaint.setColor(colorStroke);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(mStrokeWidth);
float[] pts = new float[20];// 5 条线
pts[0] = rect.left - w;
pts[1] = rect.top + h;
pts[2] = pts[0] + w;
pts[3] = pts[1];
pts[4] = pts[2];
pts[5] = pts[3] + offset;
pts[6] = pts[4];
pts[7] = pts[3] - h;
pts[8] = pts[6] - offset;
pts[9] = pts[7];
pts[10] = pts[8] + (radius - w) * 2;
pts[11] = pts[9];
pts[12] = pts[10];
pts[13] = pts[11] - offset;
pts[14] = pts[12];
pts[15] = pts[13] + h;
pts[16] = pts[14] - offset;
pts[17] = pts[15];
pts[18] = pts[16] + w;
pts[19] = pts[17];
canvas.drawLines(pts, mPaint);
复制代码
canvas.drawPath
将其画上去,而后纽扣用一个实心的小圆表示// 画左吊带
path.reset();
path.moveTo(rect.left - w - offset, handsHeight);
path.lineTo(rect.left + h / 4f, rect.top + h / 2f);
final float smallW = w / 2f * (float) Math.sin(Math.PI / 4);
path.lineTo(rect.left + h / 4f + smallW, rect.top + h / 2f - smallW);
final float smallW2 = w / (float) Math.sin(Math.PI / 4) / 2;
path.lineTo(rect.left - w - offset, handsHeight - smallW2);
canvas.drawPath(path, mPaint);
mPaint.setColor(colorStroke);
mPaint.setStrokeWidth(mStrokeWidth);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, mPaint);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(rect.left + h / 5f, rect.top + h / 4f, mStrokeWidth * 0.7f, mPaint);
// 画右吊带,代码差很少省略了,坐标对称
复制代码
canvas.drawPath
来画,在圆角的地方添加圆弧过渡path.addArc
path.reset();
float radiusBigPocket = w / 2.0f;
path.moveTo(rect.left + 1.5f * w, rect.bottom - h / 4f);
path.lineTo(rect.right - 1.5f * w, rect.bottom - h / 4f);
path.lineTo(rect.right - 1.5f * w, rect.bottom + h / 4f);
path.addArc(rect.right - 1.5f * w - radiusBigPocket * 2, rect.bottom + h / 4f - radiusBigPocket,
rect.right - 1.5f * w, rect.bottom + h / 4f + radiusBigPocket, 0, 90);
path.lineTo(rect.left + 1.5f * w + radiusBigPocket, rect.bottom + h / 4f + radiusBigPocket);
path.addArc(rect.left + 1.5f * w, rect.bottom + h / 4f - radiusBigPocket,
rect.left + 1.5f * w + 2 * radiusBigPocket, rect.bottom + h / 4f + radiusBigPocket, 90, 90);
path.lineTo(rect.left + 1.5f * w, rect.bottom - h / 4f - offset);
canvas.drawPath(path, mPaint);
复制代码
// 下边一竖,分开裤子
canvas.drawLine(bodyRect.left + bodyWidth / 2, bodyRect.bottom - h * 0.8f, bodyRect.left + bodyWidth / 2, bodyRect.bottom, mPaint);
// 左边的小口袋
float radiusSmallPocket = w * 1.2f;
canvas.drawArc(bodyRect.left - radiusSmallPocket, bodyRect.bottom - radius - radiusSmallPocket,
bodyRect.left + radiusSmallPocket, bodyRect.bottom - radius + radiusSmallPocket, 80, -60, false, mPaint);
// 右边小口袋
canvas.drawArc(bodyRect.right - radiusSmallPocket, bodyRect.bottom - radius - radiusSmallPocket,
bodyRect.right + radiusSmallPocket, bodyRect.bottom - radius + radiusSmallPocket, 100, 60, false, mPaint);
复制代码
protected void onDraw(Canvas canvas) {
...
drawClothes(canvas);//衣服
}
private void drawClothes(Canvas canvas) {
//就是上面那一堆代码按顺序合起来啦。。。。。
}
复制代码
private void drawFeet(Canvas canvas) {
mPaint.setStrokeWidth(mStrokeWidth);
mPaint.setColor(colorStroke);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
float radiusFoot = radius / 3 * 0.4f;
float leftFootStartX = bodyRect.left + radius - offset * 2;
float leftFootStartY = bodyRect.bottom - offset;
float footWidthA = radius * 0.5f;//脚宽度大-到半圆结束
float footWidthB = footWidthA / 3;//脚宽度-比较细的部分
// 左脚
path.reset();
path.moveTo(leftFootStartX, leftFootStartY);
path.lineTo(leftFootStartX, leftFootStartY + footHeight);
path.lineTo(leftFootStartX - footWidthA + radiusFoot, leftFootStartY + footHeight);
rect.left = leftFootStartX - footWidthA;
rect.top = leftFootStartY + footHeight - radiusFoot * 2;
rect.right = rect.left + radiusFoot * 2;
rect.bottom = rect.top + radiusFoot * 2;
path.addArc(rect, 90, 180);
path.lineTo(rect.left + radiusFoot + footWidthB, rect.top);
path.lineTo(rect.left + radiusFoot + footWidthB, leftFootStartY);
path.lineTo(leftFootStartX, leftFootStartY);
canvas.drawPath(path, mPaint);
// 右脚与左脚实现一致,坐标对称,代码略
}
复制代码
手我用的是一个等腰直角三角形来实现,斜边就是吊带到裤子,从直角顶点做高到斜边,经过小直角三角形的直角边相等就能够算出顶点的坐标。这个时候仍是有个圆角,刚开始我实现的时候是像上面那些经过path.addArc
加上圆角,可是这边计算好以后和原来的衔接一直有问题,在调了半天以后,偶然发现mPaint.setPathEffect(new CornerPathEffect(radiusHand));
这个方法,可使path的拐角用圆角来过渡,一会儿就简单到爆了,果真科学技术是第一辈子产力。学习
private void drawHands(Canvas canvas) {
...
// 左手
path.moveTo(bodyRect.left, handsHeight);
path.lineTo(bodyRect.left - hypotenuse / 2, handsHeight + hypotenuse / 2);
path.lineTo(bodyRect.left +offset, bodyRect.bottom - radius +offset);
path.lineTo(bodyRect.left, handsHeight);
canvas.drawPath(path, mPaint);
mPaint.setStrokeWidth(mStrokeWidth);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(colorStroke);
canvas.drawPath(path, mPaint);
// 右手略 ...
// 手臂内侧拐点
path.reset();
mPaint.setStyle(Paint.Style.FILL);
path.moveTo(bodyRect.left, handsHeight + hypotenuse / 2 - mStrokeWidth);
path.lineTo(bodyRect.left - mStrokeWidth * 2, handsHeight + hypotenuse / 2 + mStrokeWidth * 2);
path.lineTo(bodyRect.left, handsHeight + hypotenuse / 2 + mStrokeWidth);
canvas.drawPath(path, mPaint);
...
}
复制代码
反正就是各类画圆,或者弧形,嘴巴部分偷懒也就一条小弧一笔带过了,哈哈spa
private void drawEyesMouth(Canvas canvas) {
// 眼睛中心处于上半圆直径 往上的高度偏移
float eyesOffset = radius * 0.1f;
mPaint.setStrokeWidth(mStrokeWidth * 5);
// 计算眼镜带弧行的半径 分两段,以便眼睛中间有隔开的效果
float radiusGlassesRibbon = (float) (radius / Math.sin(Math.PI / 20));
rect.left = bodyRect.left + radius - radiusGlassesRibbon;
rect.top = bodyRect.top + radius - (float) (radius / Math.tan(Math.PI / 20)) - radiusGlassesRibbon - eyesOffset;
rect.right = rect.left + radiusGlassesRibbon * 2;
rect.bottom = rect.top + radiusGlassesRibbon * 2;
canvas.drawArc(rect, 81, 3, false, mPaint);
canvas.drawArc(rect, 99, -3, false, mPaint);
// 眼睛半径
float radiusEyes = radius / 3;
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(mStrokeWidth);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(bodyRect.left + bodyWidth / 2 - radiusEyes - offset, bodyRect.top + radius - eyesOffset, radiusEyes, mPaint);
canvas.drawCircle(bodyRect.left + bodyWidth / 2 + radiusEyes + offset, bodyRect.top + radius - eyesOffset, radiusEyes, mPaint);
mPaint.setColor(colorStroke);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(bodyRect.left + bodyWidth / 2 - radiusEyes - offset, bodyRect.top + radius - eyesOffset, radiusEyes, mPaint);
canvas.drawCircle(bodyRect.left + bodyWidth / 2 + radiusEyes + offset, bodyRect.top + radius - eyesOffset, radiusEyes, mPaint);
final float radiusEyeballBlack = radiusEyes / 3;
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(bodyRect.left + bodyWidth / 2 - radiusEyes - offset, bodyRect.top + radius - eyesOffset, radiusEyeballBlack, mPaint);
canvas.drawCircle(bodyRect.left + bodyWidth / 2 + radiusEyes + offset, bodyRect.top + radius - eyesOffset, radiusEyeballBlack, mPaint);
mPaint.setColor(Color.WHITE);
final float radiusEyeballWhite = radiusEyeballBlack / 2;
canvas.drawCircle(bodyRect.left + bodyWidth / 2 - radiusEyes + radiusEyeballWhite - offset * 2,
bodyRect.top + radius - radiusEyeballWhite + offset - eyesOffset,
radiusEyeballWhite, mPaint);
canvas.drawCircle(bodyRect.left + bodyWidth / 2 + radiusEyes + radiusEyeballWhite,
bodyRect.top + radius - radiusEyeballWhite + offset - eyesOffset,
radiusEyeballWhite, mPaint);
// 画嘴巴,由于位置和眼睛有相对关系,因此写在一块
mPaint.setColor(colorStroke);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mStrokeWidth);
float radiusMonth = radius;
rect.left = bodyRect.left;
rect.top = bodyRect.top - radiusMonth / 2.5f;
rect.right = rect.left + radiusMonth * 2;
rect.bottom = rect.top + radiusMonth * 2;
canvas.drawArc(rect, 95, -20, false, mPaint);
}
复制代码
这是最后一步了,直接画一个很是扁的椭圆放在脚下面就能够了
private void drawFeetShadow(Canvas canvas) {
mPaint.setColor(getResources().getColor(android.R.color.darker_gray));
canvas.drawOval(bodyRect.left + bodyWidth * 0.15f,
bodyRect.bottom - offset + footHeight,
bodyRect.right - bodyWidth * 0.15f,
bodyRect.bottom - offset + footHeight + mStrokeWidth * 1.3f, mPaint);
}
复制代码
按层级依次调用上述的各类方法,画完收工。
@Override
protected void onDraw(Canvas canvas) {
drawFeetShadow(canvas); // 脚下的阴影
drawFeet(canvas); // 脚
drawHands(canvas); // 手
drawBody(canvas); // 身体
drawClothes(canvas); // 衣服
drawEyesMouth(canvas); // 眼睛,嘴巴
drawBodyStroke(canvas); // 最后画身体的描边,能够摭住一些过渡的棱角
}
复制代码
画完了,好像少了点什么。。。。。对了,头发。好吧,我画的是程序猿,哪来的头发 - -
至此,正常画风的小黄人已经画完了,可是吧,好不容易画好,好像没啥意思,脑洞大开一下吧。 电影中的小黄人中病毒后是会变成紫色的,那咱们用代码画,换个颜色还不是分分钟,不但要紫色,还要各类颜色。
public void randomBodyColor() {
Random random = new Random();
colorBody = Color.rgb(random.nextInt(255), random.nextInt(255), random.nextInt(255));
invalidate();
}
复制代码
而后效果就变成了这样。
但愿你们喜欢 ,上述有任何问题或者表述不清楚的,欢迎评论交流。 完整源码 github