啥是佩奇?打造Android界佩奇

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

    一、前言

    前段时间被“啥是佩奇”短片感动了一把,在网络上也掀起了一阵热潮,老爷子用自己的焊铁技术为孩子打造了别样的佩奇,今天用我那浅薄的知识打造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的过程依次获取片段实现,详细代码见六。

    五、总结

    小猪佩奇的绘制需要耐心,其中身体部分涉及到贝塞尔曲线,需要数学来计算,后期需要加强对公式的了解,PathMeasure的方法有很多,在实现绘制路径的动态效果上层出不穷,例如绘制无规则形状的进度条,随手势滑动绘制出随意的线条等等。后续加强对PathMeasure其他方法的使用。

    六、项目地址

    项目地址:https://github.com/fuusy/PigDraw


    欢迎关注我的公众号:小猿说,大家一起交流学习!感谢!


    公众号

    相关文章

      网友评论

        本文标题:啥是佩奇?打造Android界佩奇

        本文链接:https://www.haomeiwen.com/subject/xfdujqtx.html