用HTML5画布画一个小黄人,Android 用Canvas 画几何图形，画出小黄人

于 2021-06-19 04:16:08 发布
阅读量371 收藏
点赞数
文章标签： 用HTML5画布画一个小黄人

看了大神 JR93的这篇文章:纯CSS3画出小黄人并实现动画效果 ，萌生了我在安卓上画小黄人的想法，同时他在文章中的步骤分解，在我的具体实现中起到了很大的帮助。话不多说，先上效果图

1453305106109937.png

实现步骤

其实很简单首先找到一张小黄人的图

然后调用canvas.drawBitmap()后画到画布上 - -。

好吧，一点都不好笑

正文

准备工作

自定义MinionView extends View，定义以下成员变量，备用(可以先不看，后面的代码看到莫名其妙出来的变量再上来看下)private Paint mPaint;

private float bodyWidth;

private float bodyHeigh;

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;

private float handsHeight;//计算出吊带的高度时，可以用来做手的高度

private float footHeigh;//脚的高度，用来画脚部阴影时用

初始化参数

重写protected void onDraw(Canvas canvas)方法，首先调用 如下 (会经常看到一些奇怪的数字，做比例，别问我怎么来的，目测+一点点微调得来的- -。)private void initParams() {

bodyWidth = Math.min(getWidth(), getHeight() * BODY_WIDTH_HEIGHT_SCALE) * BODY_SCALE;

bodyHeigh = Math.min(getWidth(), getHeight() * BODY_WIDTH_HEIGHT_SCALE) / BODY_WIDTH_HEIGHT_SCALE * BODY_SCALE;

mStrokeWidth = Math.max(bodyWidth / 50, mStrokeWidth);

offset = mStrokeWidth / 2;

bodyRect = new RectF();

bodyRect.left = (getWidth() - bodyWidth) / 2;

bodyRect.top = (getHeight() - bodyHeigh) / 2;

bodyRect.right = bodyRect.left + bodyWidth;

bodyRect.bottom = bodyRect.top + bodyHeigh;

radius = bodyWidth / 2;

footHeigh = radius * 0.4333f;

handsHeight =  (getHeight() + bodyHeigh) / 2   + offset - radius * 1.65f ;

}

画身体

1453305760444948.png

我来组成身体

显然身体是一个矩形加上，上下半圆，这边只要用一个圆角矩形，然后圆角的弧度半径用身体宽度的一半就可以达到这个效果了。

把身体的矩形外存起来，后面经常要用到其相对位置进行对其它部位的定位，代码如下。drawBody(canvas);//身体

drawBodyStroke(canvas);//最后画身体的描边，可以摭住一些过渡的棱角

private void drawBody(Canvas canvas) {

initPaint();

mPaint.setColor(colorBody);

mPaint.setStyle(Paint.Style.FILL);

canvas.drawRoundRect(bodyRect, radius, radius, mPaint);

}     private void drawBodyStroke(Canvas canvas) {

initPaint();

mPaint.setColor(colorStroke);

mPaint.setStrokeWidth(mStrokeWidth);

mPaint.setStyle(Paint.Style.STROKE);

canvas.drawRoundRect(bodyRect, radius, radius, mPaint);

}

画衣服

1453308183347180.png

这是穿上裤子的样子

首先先画上底下的半圆RectF rect = new RectF();

rect.left = (getWidth() - bodyWidth) / 2 + offset;

rect.top = (getHeight() + bodyHeigh) / 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把线一条条画出来吧，这边要同时考虑画笔的描边宽度，否则会出现连接点有锯齿的感觉。

//画横线

initPaint();

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将其画上去，然后纽扣用一个实心的小圆表示//画左吊带

initPaint();

mPaint.setColor(colorClothes);

mPaint.setStrokeWidth(mStrokeWidth);

mPaint.setStyle(Paint.Style.FILL);

Path path = new Path();

path.moveTo(rect.left - w - offset, handsHeight);

path.lineTo(rect.left + h / 4, rect.top + h / 2);

final float smallW = w / 2 * (float) Math.sin(Math.PI / 4);

path.lineTo(rect.left + h / 4 + smallW, rect.top + h / 2 - smallW);

final float smallW2 = w / (float) Math.sin(Math.PI / 4) / 2;

path.lineTo(rect.left - w - offset, handsHeight - smallW2);

canvas.drawPath(path, mPaint);

initPaint();

mPaint.setColor(colorStroke);

mPaint.setStrokeWidth(mStrokeWidth);

mPaint.setStyle(Paint.Style.STROKE);

canvas.drawPath(path, mPaint);

initPaint();

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

canvas.drawCircle(rect.left + h / 4, rect.top + h / 4, mStrokeWidth, mPaint);

//画右吊带

initPaint();

mPaint.setColor(colorClothes);

mPaint.setStrokeWidth(mStrokeWidth);

mPaint.setStyle(Paint.Style.FILL);

path.reset();

path.moveTo(rect.left - w + 2 * radius - offset, handsHeight);

path.lineTo(rect.right - h / 4, rect.top + h / 2);

path.lineTo(rect.right - h / 4 - smallW, rect.top + h / 2 - smallW);

path.lineTo(rect.left - w + 2 * radius - offset, handsHeight- smallW2);

canvas.drawPath(path, mPaint);

initPaint();

mPaint.setColor(colorStroke);

mPaint.setStrokeWidth(mStrokeWidth);

mPaint.setStyle(Paint.Style.STROKE);

canvas.drawPath(path, mPaint);

initPaint();

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

canvas.drawCircle(rect.right - h / 4, rect.top + h / 4, mStrokeWidth, mPaint);

画中间的口袋 是一个下面两边是圆角的圆角矩形，但是貌似不能直接画这样的圆角矩形，所以我就用土办法，不就是一个多边形吗，用canvas.drawPath来画，在圆角的地方添加圆弧过渡path.addArc//中间口袋

initPaint();

mPaint.setColor(colorStroke);

mPaint.setStrokeWidth(mStrokeWidth);

mPaint.setStyle(Paint.Style.STROKE);

path.reset();

float radiusBigPokect = w / 2.0f;

path.moveTo(rect.left + 1.5f * w, rect.bottom - h / 4);

path.lineTo(rect.right - 1.5f * w, rect.bottom - h / 4);

path.lineTo(rect.right - 1.5f * w, rect.bottom + h / 4);

path.addArc(rect.right - 1.5f * w - radiusBigPokect * 2, rect.bottom + h / 4 - radiusBigPokect,

rect.right - 1.5f * w, rect.bottom + h / 4 + radiusBigPokect, 0, 90);

path.lineTo(rect.left + 1.5f * w + radiusBigPokect, rect.bottom + h / 4 + radiusBigPokect);

path.addArc(rect.left + 1.5f * w, rect.bottom + h / 4 - radiusBigPokect,

rect.left + 1.5f * w + 2 * radiusBigPokect, rect.bottom + h / 4 + radiusBigPokect, 90, 90);

path.lineTo(rect.left + 1.5f * w, rect.bottom - h / 4 - offset);

canvas.drawPath(path, mPaint);

左右两个小口袋也直接用一个小弧来解决掉

//        下边一竖，分开裤子

canvas.drawLine(bodyRect.left + bodyWidth / 2, bodyRect.bottom - h * 0.8f, bodyRect.left + bodyWidth / 2, bodyRect.bottom, mPaint);

//      左边的小口袋

float radiusSamllPokect = w * 1.2f;

canvas.drawArc(bodyRect.left - radiusSamllPokect, bodyRect.bottom - radius - radiusSamllPokect,

bodyRect.left + radiusSamllPokect, bodyRect.bottom - radius + radiusSamllPokect, 80, -60, false, mPaint);

//      右边小口袋

canvas.drawArc(bodyRect.right - radiusSamllPokect, bodyRect.bottom - radius - radiusSamllPokect,

bodyRect.right + radiusSamllPokect, bodyRect.bottom - radius + radiusSamllPokect, 100, 60, false, mPaint);

//        canvas.drawArc(left + w/5,);

嗯，衣服画完了。drawClothes(canvas);//衣服

private void drawClothes(Canvas canvas) {

initPaint();

//就是上面那一堆代码按顺序合起来啦。。。。。

}

画脚

1453308529111624.png

萌萌的小短腿

脚这部分比较简单，从身体的下方，一个竖直的矩形下来，再加上一个左边圆角的圆角矩形，还是通过画Path来实现。drawFeet(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 path = new Path();

path.moveTo(leftFootStartX, leftFootStartY);

path.lineTo(leftFootStartX, leftFootStartY + footHeigh);

path.lineTo(leftFootStartX - footWidthA + radiusFoot, leftFootStartY + footHeigh);

RectF rectF = new RectF();

rectF.left = leftFootStartX - footWidthA;

rectF.top = leftFootStartY + footHeigh - radiusFoot * 2;

rectF.right = rectF.left + radiusFoot * 2;

rectF.bottom = rectF.top + radiusFoot * 2;

path.addArc(rectF, 90, 180);

path.lineTo(rectF.left + radiusFoot + footWidthB, rectF.top);

path.lineTo(rectF.left + radiusFoot + footWidthB, leftFootStartY);

path.lineTo(leftFootStartX, leftFootStartY);

canvas.drawPath(path, mPaint);

//      右脚

float rightFootStartX = bodyRect.left + radius + offset * 2;

float rightFootStartY = leftFootStartY;

path.reset();

path.moveTo(rightFootStartX, rightFootStartY);

path.lineTo(rightFootStartX, rightFootStartY + footHeigh);

path.lineTo(rightFootStartX + footWidthA - radiusFoot, rightFootStartY + footHeigh);

rectF.left = rightFootStartX + footWidthA - radiusFoot * 2;

rectF.top = rightFootStartY + footHeigh - radiusFoot * 2;

rectF.right = rectF.left + radiusFoot * 2;

rectF.bottom = rectF.top + radiusFoot * 2;

path.addArc(rectF, 90, -180);

path.lineTo(rectF.right - radiusFoot - footWidthB, rectF.top);

path.lineTo(rectF.right - radiusFoot - footWidthB, rightFootStartY);

path.lineTo(rightFootStartX, rightFootStartY);

canvas.drawPath(path, mPaint);

}

画手

1453308648445292.png

这里是双手放在后背的样子

手我用的是一个等腰直角三角形来实现，斜边就是吊带到裤子，通过sin(45度)就可以算出顶点的坐标。这个时候还是有个圆角，刚开始我实现的时候是像上面那些通过path.addArc加上圆角，但是这边计算好之后和原来的衔接一直有问题，在调了半天之后，偶然发现mPaint.setPathEffect(new CornerPathEffect(radiusHand));这个方法，可以使path的拐角用圆角来过渡，一下子就简单到爆了，果然科学技术是第一生产力。drawHands(canvas);//手

private void drawHands(Canvas canvas) {

mPaint.setStrokeWidth(mStrokeWidth);

mPaint.setStyle(Paint.Style.FILL);

mPaint.setColor(colorBody);

//        左手

Path path = new Path();

float hypotenuse = bodyRect.bottom - radius - handsHeight;

float radiusHand = hypotenuse / 6;

mPaint.setPathEffect(new CornerPathEffect(radiusHand));

path.moveTo(bodyRect.left, handsHeight);

path.lineTo(bodyRect.left - hypotenuse / 2, handsHeight + hypotenuse / 2);

path.lineTo(bodyRect.left, bodyRect.bottom - radius);

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);

mPaint.setColor(colorBody);

path.moveTo(bodyRect.right, handsHeight);

path.lineTo(bodyRect.right + hypotenuse / 2, handsHeight + hypotenuse / 2);

path.lineTo(bodyRect.right, bodyRect.bottom - radius);

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);

path.reset();

path.moveTo(bodyRect.right, handsHeight + hypotenuse / 2 - mStrokeWidth);

path.lineTo(bodyRect.right + mStrokeWidth * 2, handsHeight + hypotenuse / 2 + mStrokeWidth * 2);

path.lineTo(bodyRect.right, handsHeight + hypotenuse / 2 + mStrokeWidth);

canvas.drawPath(path, mPaint);

}

画眼睛,嘴巴

1453308714121461.png

三个字，圆圆圆

反正就是各种画圆，或者弧形，嘴巴部分偷懒也就一条小弧一笔带过了，哈哈drawEyesMouth(canvas);//眼睛,嘴巴

private void drawEyesMouth(Canvas canvas) {

float eyesOffset = radius * 0.1f;//眼睛中心处于上半圆直径 往上的高度偏移

mPaint.setStrokeWidth(mStrokeWidth * 5);

//        计算眼镜带弧行的半径 分两段，以便眼睛中间有隔开的效果

float radiusGlassesRibbon = (float) (radius / Math.sin(Math.PI / 20));

RectF rect = new RectF();

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;

initPaint();

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);

}

脚下的阴影

这是最后一步了，直接画一个非常扁的椭圆放在脚下面就可以了

1453308765601412.png

不科学啊，长这么胖，为毛影子这么瘦(别在意这些细节)drawFeetShadow(canvas);//脚下的阴影

private void drawFeetShadow(Canvas canvas) {

mPaint.setColor(getResources().getColor(android.R.color.darker_gray));

canvas.drawOval(bodyRect.left + bodyWidth * 0.15f, bodyRect.bottom - offset + footHeigh,

bodyRect.right - bodyWidth * 0.15f, bodyRect.bottom - offset + footHeigh + mStrokeWidth * 1.3f, mPaint);

}

在onDraw方法，依次调用上述的各种方法，画完收工。@Override

protected void onDraw(Canvas canvas) {

initParams();

initPaint();

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();

}

然后效果就变成了这样。

1453308906544093.gif

看起来还有点小酷炫

希望大家喜欢 ,上述有任何问题或者表述不清楚的，欢迎评论交流。完整源码 github

weixin_39860280
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值