在线建设网站,如何做企业网站营销,海南省最新消息,沈阳 教育 公司 网站建设❝学习往往是枯燥的#xff0c;如果能用一个有趣 Demo 来学习和练习技术#xff0c;那对知识的掌握就会更牢固。我在学习 Canvas 绘制 API 的时候就是这样做的。❞截图镇楼效果图我觉得这个绘制小黄人的自定义 View 就很有意思#xff0c;也为我后来工作中的自定义 View 实现… ❝学习往往是枯燥的如果能用一个有趣 Demo 来学习和练习技术那对知识的掌握就会更牢固。我在学习 Canvas 绘制 API 的时候就是这样做的。❞截图镇楼效果图我觉得这个绘制小黄人的自定义 View 就很有意思也为我后来工作中的自定义 View 实现打下了良好的基础。虽然这是 4 年半以前写的文章但是大部分关注我们的同学应该没看过今天咱们一起来拷古翻新一下代码(程序员的事怎么能叫炒冷饭呢这明明是温故而知新)。以后有机会还会分享项目实用自定义 View敬请关注。实现步骤其实很简单首先找到一张小黄人的图然后调用 canvas.drawBitmap() 后画到画布上 好吧一点都不好笑 - -。正文 ↓准备工作自定义MinionView extends View定义以下成员变量备用(可以先不看后面的代码看到莫名其妙出来的变量再上来看下)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:5private 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 方法尺寸变化时初始化一下绘制的参数(会经常看到一些奇怪的数字用做比例换算别问我怎么来的目测 一点点微调得来的- -。)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;}绘制参数好了接下来就是一步步绘制几何图形了画身体显然身体是一个矩形加上上下半圆这边只要用一个圆角矩形然后圆角的弧度半径用身体宽度的一半就可以达到这个效果了。把身体的矩形外存起来后面经常要用到其相对位置进行对其它部位的定位代码如下: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);再画半圆上方的矩形, w 表示矩形离左边身体的距离h 矩形的高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.addArcpath.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) { //就是上面那一堆代码按顺序合起来啦。。。。。}画脚脚这部分比较简单从身体的下方一个竖直的矩形下来再加上一个左边圆角的圆角矩形还是通过画Path来实现。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); ... }画眼睛,嘴巴三个字圆圆圆反正就是各种画圆或者弧形嘴巴部分偷懒也就一条小弧一笔带过了哈哈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);}重写 onDraw 方法按层级依次调用上述的各种方法画完收工。Overrideprotected 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 可点击“阅读原文”查看推荐阅读设计模式概览六大设计原则RecyclerView 的缓存复用机制ServiceManager 的工作原理关注我助你升职加薪Android 面试官原创不易在看支持
