啥是佩奇？打造Android界佩奇

作者: 付十一v | 来源:发表于2019-01-24 22:28 被阅读4次

啥是佩奇？打造Android界佩奇
2019-01-18
《啥是佩奇》凭什么刷屏？佩奇指的是什么？导演这么说
啥是佩奇？爹是猪，娘是猪，儿子还是猪，一窝猪！
啥是佩奇？嗯，就是那个小猪佩奇...
2019-01-18
2019-01-18
啥是佩奇贩卖穷人的情感还是消费贫穷
什么是佩奇？
啥是佩奇

一、前言

前段时间被“啥是佩奇”短片感动了一把，在网络上也掀起了一阵热潮，老爷子用自己的焊铁技术为孩子打造了别样的佩奇，今天用我那浅薄的知识打造Android佩奇。

pig奇

二、思路:

1、将佩奇分为鼻子，眼睛，嘴巴等相应的部位；
2、根据各个部位判断使用贝塞尔曲线还是运用canvas直接绘制图形。因为后面需要实现绘制的动态效果，则这里绘制图形时使用path绘制。
3、使用贝塞尔曲线绘制佩奇整个身体，耳朵和嘴巴，确定曲线的开始点和控制点；
4、使用PathMeasure的getLength,getSegment等方法实现每个部位的动态绘制。

三、知识点PathMeasure

PathMeasure（Path path，boolean forceClosed）：表示创建与指定路径对象（已创建和指定）关联的PathMeasure对象。

参数
path：已绘制路径；
forceClosed：如果为true，表示路径为闭合状态，即使路径未明确关闭，路径也将被视为“已关闭”。
方法
getLength（）：获取path的总长度，如果没有路径就返回0；
getSegment（float startD， float stopD，Path dst，boolean startWithMoveTo）：传入起始位置startD和结束位置stopD，在dst中返回startD和stopD中间的路径。如果startWithMoveTo为true，则使用moveTo开始片段。
setPath（Path path， boolean forceClosed）：将path与PathMeasure 进行关联。

上述为本文所使用的方法，PathMeasure其他详细方法可参照官方文档PathMeasure。

四、实现

1、初始化画笔，佩奇出了眼睛和眼珠的颜色不同外，其他部位都用粉红色画笔绘制，这里定义了三种画笔；

 private void initPaint() {
        mPaint = new Paint();
        mPaint.setColor(Color.parseColor("#FF69B4"));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(6);
        mPaint.setAntiAlias(true);

        mEyePaint = new Paint();
        mEyePaint.setColor(Color.parseColor("#F0F8FF"));
        mEyePaint.setAntiAlias(true);

        mEyeBallPaint = new Paint();
        mEyeBallPaint.setColor(Color.BLACK);
        mEyeBallPaint.setAntiAlias(true);
    }

2、绘制佩奇外壳，佩奇身体呈弧形状，则需要运用到二阶和三阶贝塞尔曲线，利用贝塞尔曲线的数学公式大致确定出绘制起始位置，控制点和结束点。

private void drawShell(Canvas canvas) {
        Path shellPath = new Path();
        shellPath.moveTo(200, 100 - mRadius);
//三阶贝塞尔曲线，设置两个控制点。
        shellPath.cubicTo(800, 100 - mRadius, 1000, 600, 600, 700);
        shellPath.cubicTo(300, 700, 300, 280, 350, 250);
//两阶贝塞尔曲线，设置一个控制点。
        shellPath.quadTo(200, 210, 200, 100 + mRadius);

        drawAll(canvas,shellPath);

    }

3、依据各个位置点绘制出曲线后，PathMeasure和曲线路径进行关联，依据PathMeasure的getSegment方法，随着停止位置的不断增加，获取到的路径片段也在不停的增长，也就实现了路径绘制的动态效果。

 private void drawAll(Canvas canvas, Path path) {
        Path dst = new Path();
//创建新的带有已绘制好的路径的PathMeasure
        mPathMeasure = new PathMeasure(path, false);
//获取路径的总长度
        mLength = mPathMeasure.getLength();
//获取起始位置到停止位置中的片段
        mPathMeasure.getSegment(0, mStop, dst, true);
//开始绘制
        canvas.drawPath(dst, mPaint);
//停止位置不断增加，路径就会不断绘制
        if (mStop < mLength) {
            mStop += mLength / 400;
            invalidate();
        }
    }

4、使用相同的手法先绘制出耳朵，鼻子和嘴巴的路径，然后按照上述PathMeasure的过程依次获取片段实现，详细代码见六。