Android教你如何用程序“手绘”女友

96
MartinBZDQSM
2016.09.08 15:00* 字数 1318

先上图:


nancy.gif

**
点子来自于一次情人节的礼物思考,想着能不能不俗套的去送花发红包之类的,再加上妹子也是做技术的,所以就想着搞了一个这个。
**
**
这个效果的原理是基于PathView的,可是PathView并不能满足我的需求,于是乎我就开始下手自己修改了。
**
**
下面我会一边分析PathView的实现过程,一边描述我是如何修改的(GIF图很多小心流量)。如果你不想看的话项目地址在这
https://github.com/MartinBZDQSM/PathDraw
**

动画效果

如果你了解PathView的动画的话,你就知道它的动画分为两种情况
1.getPathAnimator 并行效果
2.getSequentialPathAnimator 顺序效果
如果你想知道它的实现原理建议查看PathView当中的两个静态内部类AnimatorBuilder和AnimatorSetBuilder。
但是当我使用AnimatorSetBuilder 进行顺序绘制的时候我发现效果其实并不好,为什么不好哪里不好呢?看它的源码:

     /**
         * Sets the duration of the animation. Since the AnimatorSet sets the duration for each
         * Animator, we have to divide it by the number of paths.
         *
         * @param duration - The duration of the animation.
         * @return AnimatorSetBuilder.
         */
        public AnimatorSetBuilder duration(final int duration) {
            this.duration = duration / paths.size();
            return this;
        }

看完以上代码你就会知道PathView的作者计算出来的动画时间是你设置的平均时间,也就是说不管我这条path的路径到底有多长,所有path的执行时间都是一样的。那我画一个点和画一条直线的时间都是一样的是不是有点扯?所以我在这里增加了平均时间的计算,根据计算path的长度在总长度中的占比,然后单个设置时间,进行顺序轮播,我也试过使用AnimatorSet单独设置Animator的时间,但是好像并没有效果,所以我用比较蠢点方法进行了实现,大致修改的代码如下:

        /**
         * Default constructor.
         *
         * @param pathView The view that must be animated.
         */
        public AnimatorSetBuilder(final PathDrawingView pathView) {
            paths = pathView.mPaths;
            if (pathViewAnimatorListener == null) {
                pathViewAnimatorListener = new PathViewAnimatorListener();
            }
            for (PathLayer.SvgPath path : paths) {
                path.setAnimationStepListener(pathView);
                ObjectAnimator animation = ObjectAnimator.ofFloat(path, "length", 0.0f, path.getLength());
                totalLenth = totalLenth + path.getLength();
                animators.add(animation);
            }
            for (int i = 0; i < paths.size(); i++) {
                long animationDuration = (long) (paths.get(i).getLength() * duration / totalLenth);
                Animator animator = animators.get(i);
                animator.setStartDelay(delay);
                animator.setDuration(animationDuration);
                animator.addListener(pathViewAnimatorListener);
            }
        }
        /**
         * Starts the animation.
         */
        public void start() {
            resetAllPaths();
            for (Animator animator : animators) {
                animator.cancel();
            }
            index = 0;
            startAnimatorByIndex();
        }

        public void startAnimatorByIndex() {
            if (index >= paths.size()) {
                return;
            }
            Animator animator = animators.get(index);
            animator.start();
        }

        /**
         * Sets the length of all the paths to 0.
         */
        private void resetAllPaths() {
            for (PathLayer.SvgPath path : paths) {
                path.setLength(0);
            }
        }

        /**
         * Called when the animation start.
         */
        public interface ListenerStart {
            /**
             * Called when the path animation start.
             */
            void onAnimationStart();
        }

        /**
         * Called when the animation end.
         */
        public interface ListenerEnd {
            /**
             * Called when the path animation end.
             */
            void onAnimationEnd();
        }

        /**
         * Animation listener to be able to provide callbacks for the caller.
         */
        private class PathViewAnimatorListener implements Animator.AnimatorListener {

            @Override
            public void onAnimationStart(Animator animation) {
                if (index < paths.size() - 1) {
                    paths.get(index).isMeasure = true;
                    PathDrawingView.isDrawing = true;
                    if (index == 0 && listenerStart != null)
                        listenerStart.onAnimationStart();
                }

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (index >= paths.size() - 1) {
                    PathDrawingView.isDrawing = false;
                    if (animationEnd != null)
                        animationEnd.onAnimationEnd();
                } else {
                    if (index < paths.size() - 1) {
                        paths.get(index).isMeasure = false;
                        index++;
                        startAnimatorByIndex();
                    }
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        }

画笔动态跟踪

PathView中线条渐变是通过截取path当中的片段做成的,看码:

     /**
         * Sets the length of the path.
         *
         * @param length The length to be set.
         */
        public void setLength(float length) {
            path.reset();
            measure.getSegment(0.0f, length, path, true);
            path.rLineTo(0.0f, 0.0f);

            if (animationStepListener != null) {
                animationStepListener.onAnimationStep();
            }
        }

既然动画的原理是通过改变截取的长度做到的,那么只要能获取到截取长度最后的那个点是不是就可以充当轨迹了?所以这里只需要添加一个锚点,每当截取长度变化的时候,锚点也跟着改变,看代码:

    public void setLength(float length) {
            path.reset();
            measure.getSegment(0.0f, length, path, true);
            measure.getPosTan(length, point, null);//跟踪锚点
            path.rLineTo(0.0f, 0.0f);
            if (animationStepListener != null) {
                animationStepListener.onAnimationStep();
            }
        }

笔尖移动的原理,需要提前计算好笔尖在画笔图片中的坐标,然后对照着锚点进行移动就行了。
Tips:这里我的画笔图片还没有针对画布宽高进行缩放,所以在不同分辨率的情况下画笔显示的大小可能是不一致的。

我认知的Fill

PathView中对于Path的Paint选的是Stroke属性,而如果需要进行填充,则需要所有的线条绘制完成之后才能进行填充或者默认填充。看PathView的源码:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if(mTempBitmap==null || (mTempBitmap.getWidth()!=canvas.getWidth()||mTempBitmap.getHeight()!=canvas.getHeight()) )
        {
            mTempBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
            mTempCanvas = new Canvas(mTempBitmap);
        }

        mTempBitmap.eraseColor(0);
        synchronized (mSvgLock) {
            mTempCanvas.save();
            mTempCanvas.translate(getPaddingLeft(), getPaddingTop());
            fill(mTempCanvas);//直接进行填充
            final int count = paths.size();
            for (int i = 0; i < count; i++) {
                final SvgUtils.SvgPath svgPath = paths.get(i);
                final Path path = svgPath.path;
                final Paint paint1 = naturalColors ? svgPath.paint : paint;
                mTempCanvas.drawPath(path, paint1);
            }

            fillAfter(mTempCanvas);//线条绘制完成之后 在进行填充

            mTempCanvas.restore();

            applySolidColor(mTempBitmap);

            canvas.drawBitmap(mTempBitmap,0,0,null);
        }
    }

其实这里选Stroke属性还是Fill属性都是看svg的情况而定,针对于我自己做的这个svg图,我对比了三种属性的不同效果,看图:

STROKE.png

看了上图我们可以发现,如果我们使用的svg不是由单线条组成的,会感觉特别怪异,而Fill和Fill And Stroke则显示的较为舒服。更贴近svg在浏览器显示出来的效果。
那么问题来了! 如果我们使用Fill 属性或者Fill And Stroke属性,在线条绘制过程中会把所截取的Path的起点和重点连接起来形成一个闭合区域。我把这种情况叫做“绘制过度”(瞎取的),看图:

Paste_Image.png

为什么会导致这种情况看我画的这张图你就会明白了;

Paste_Image.png

在path往回绘制的时候,paint并不知道接下来会如何填充,所以就直接连接了迂回点和终点。

那么如何消除Fill属性带来的影响呢?刚开始我想了大致两个思路并进行了尝试:

  1. 多保留一份Paths,在绘制的时候Clip原path路径。
  2. 多保留一份Paths,使用PorterDuffXfermode,当绘制的时候显示被绘制的path遮挡的部分。

我先实现了思路1,看我如何实现的:

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int sc = canvas.save(Canvas.ALL_SAVE_FLAG);
        synchronized (mSvgLock) {
            int count = mPaths.size();
            for (int i = 0; i < count; i++) {
                int pc = canvas.save(Canvas.ALL_SAVE_FLAG);
                //需要备用一个完整的path路径,来修复pathPaint的Fill造成绘制过度
                Path path = pathLayer.mDrawer.get(i);//这个pathLayer 指的就是Pathview中的SvgUtils
                canvas.clipPath(path);
                PathLayer.SvgPath svgPath = mPaths.get(i);
                canvas.drawPath(svgPath.path, pathPaint);
                canvas.restoreToCount(pc);
            }
        }
        canvas.restoreToCount(sc);
        for (PathLayer.SvgPath svgPath : mPaths) {
            if (isDrawing && svgPath.isMeasure) {//过滤初始为0的点
                canvas.drawBitmap(paintLayer, svgPath.point[0] - nibPointf.x, svgPath.point[1] - nibPointf.y, null);
            }
        }
    }

看效果:

nancy.gif

仔细看效果发现其实还是有问题存在的,再线条迂回的地方会把遗漏;

Paste_Image.png

为什么会导致这种情况,其实还是前面讲到过的绘制过度。
于是我尝试了下实现下思路2:

    private PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT);

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int sc = canvas.save(Canvas.ALL_SAVE_FLAG);
        synchronized (mSvgLock) {
            int count = mPaths.size();
            for (int i = 0; i < count; i++) {
                int pc = canvas.save(Canvas.ALL_SAVE_FLAG);
                PathLayer.SvgPath svgPath = mPaths.get(i);
                if (isFill) {
                    //需要备用一个完整的path路径,来修复pathPaint的Fill造成绘制过度
                    Path path = pathLayer.mDrawer.get(i);
                    canvas.clipPath(path);
                    if (isDrawing && svgPath.isMeasure) {
                        canvas.drawPath(path, drawerPaint);
                    }
                }
                canvas.drawPath(svgPath.path, pathPaint);
                canvas.restoreToCount(pc);
            }
        }
        canvas.restoreToCount(sc);
    }

效果如下:

nancy2.gif

关于为什么要使用PorterDuff.Mode.SRC_OUT,其实我是试出来的0.0,本以为这样就完美了,但是我发现当仔细看发现颜色他么怎么变成黑色了(我用的是灰色)!!!然后我尝试了使用一张Bitmap的Canvas来代替view的Canvas再渲染像素点的颜色的时候,发现效果又乱了!!!!真是奇怪,为了研究原因我将 canvas.clipPath(path);去掉,发现了新大陆,看图:

noclip.gif

原来PorterDuff.Mode.SRC_OUT将非覆盖面生成了矩形块,那么新思路就有了:
3.直接截取path的矩形块:

      if (isFill) {
                    //需要备用一个完整的path路径,来修复pathPaint的Fill造成绘制过度
                    Path path = pathLayer.mDrawer.get(i);
                    canvas.clipPath(path);
                    svgPath.path.computeBounds(drawRect, true);
                    canvas.drawRect(drawRect, drawerPaint);
                }

最终效果图就和文章最开始的显示效果一致了,哈哈 几经波折终于出现好效果啦!

如何制作svg

关于如何制作成这样的svg ,你可以考虑看我的文章:《如何将图片生成svg》,使用的是Adobe Illustrator而不是GMIP2

最后,如果你喜欢或者有何意见,不妨Star或者给我提Issuses哦!项目地址

帅.gif

]

android 开源组件
Web note ad 1