SVG <path> 转 Android Canva

作者: 程树欣 | 来源:发表于2016-08-04 12:27 被阅读1772次

    SVG <path>中定义了若干指令【详见MDN
    M x,y 移动指令,映射Path中的 moveTo
    L x,y 画直线指令,映射Path中的lineTo
    H x 画水平线指令,映射Path中的lineTo,不过要使用上一个坐标的y
    V y 画垂直线指令,映射Path中的lineTo,不过要使用上一个坐标的x

    C x1,y1,x2,y2,x,y 三次贝塞尔曲线指令, 映射Path中的cubicTo
    S x2,y2,x,y 跟在C指令后面使用,用C指令的结束点做控制点,映射cubicTo
    Q x1,y1,x,y 二次贝塞尔曲线指令,映射quadTo
    T x,y 跟在Q指令后面使用,使用Q的x,y做控制点,映射quadTo
    Z path关闭指令,映射close

    • A 指令,用来画弧,还没有搞明白怎么处理
    • 在SVG中指令大写为绝对坐标,小写为相对坐标,但在android Path中似乎是没有分别的

    分享一个工具类SvgPathToAndroidPath

    /**
     * Created by Shuxin on 2016/8/3.
     */
    public class SvgPathToAndroidPath {
        private int svgPathLenght = 0;
        private String svgPath = null;
        private int mIndex;
        private List<Integer> cmdPositions = new ArrayList<>();
        /**
         * M x,y
         * L x,y
         * H x
         * V y
         * C x1,y1,x2,y2,x,y
         * Q x1,y1,x,y
         * S x2,y2,x,y
         * T x,y
         * */
        public Path parser(String svgPath) {
            this.svgPath = svgPath;
            svgPathLenght = svgPath.length();
            mIndex = 0;
            Path lPath = new Path();
            lPath.setFillType(Path.FillType.WINDING);
            //记录最后一个操作点
            PointF lastPoint = new PointF();
            findCommand();
            for (int i = 0; i < cmdPositions.size(); i++) {
                Integer index = cmdPositions.get(i);
                switch (svgPath.charAt(index)) {
                    case 'm':
                    case 'M': {
                        String ps[] = findPoints(i);
                        lastPoint.set(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]));
                        lPath.moveTo(lastPoint.x, lastPoint.y);
                    }
                    break;
                    case 'l':
                    case 'L': {
                        String ps[] = findPoints(i);
                        lastPoint.set(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]));
                        lPath.lineTo(lastPoint.x, lastPoint.y);
                    }
                    break;
                    case 'h':
                    case 'H': {//基于上个坐标在水平方向上划线,因此y轴不变
                        String ps[] = findPoints(i);
                        lastPoint.set(Float.parseFloat(ps[0]), lastPoint.y);
                        lPath.lineTo(lastPoint.x, lastPoint.y);
                    }
                    break;
                    case 'v':
                    case 'V': {//基于上个坐标在水平方向上划线,因此x轴不变
                        String ps[] = findPoints(i);
                        lastPoint.set(lastPoint.x, Float.parseFloat(ps[0]));
                        lPath.lineTo(lastPoint.x, lastPoint.y);
                    }
                    break;
                    case 'c':
                    case 'C': {//3次贝塞尔曲线
                        String ps[] = findPoints(i);
                        lastPoint.set(Float.parseFloat(ps[4]), Float.parseFloat(ps[5]));
                        lPath.cubicTo(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]), Float.parseFloat(ps[2]), Float.parseFloat(ps[3]), Float.parseFloat(ps[4]), Float.parseFloat(ps[5]));
                    }
                    break;
                    case 's':
                    case 'S': {//一般S会跟在C或是S命令后面使用,用前一个点做起始控制点
                        String ps[] = findPoints(i);
                        lPath.cubicTo(lastPoint.x,lastPoint.y,Float.parseFloat(ps[0]), Float.parseFloat(ps[1]), Float.parseFloat(ps[2]), Float.parseFloat(ps[3]));
                        lastPoint.set(Float.parseFloat(ps[2]), Float.parseFloat(ps[3]));
                    }
                    break;
                    case 'q':
                    case 'Q': {//二次贝塞尔曲线
                        String ps[] = findPoints(i);
                        lastPoint.set(Float.parseFloat(ps[2]), Float.parseFloat(ps[3]));
                        lPath.quadTo(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]), Float.parseFloat(ps[2]), Float.parseFloat(ps[3]));
                    }
                    break;
                    case 't':
                    case 'T': {//T命令会跟在Q后面使用,用Q的结束点做起始点
                        String ps[] = findPoints(i);
                        lPath.quadTo(lastPoint.x,lastPoint.y,Float.parseFloat(ps[0]), Float.parseFloat(ps[1]));
                        lastPoint.set(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]));
                    }
                    break;
                    case 'a':
                    case 'A':{//画弧
                    }
                    break;
                    case 'z':
                    case 'Z': {//结束
                        lPath.close();
                    }
                    break;
                }
            }
            return lPath;
        }
    
        private String[] findPoints(int cmdIndexInPosition) {
            int cmdIndex = cmdPositions.get(cmdIndexInPosition);
            String pointString = svgPath.substring(cmdIndex + 1, cmdPositions.get(cmdIndexInPosition + 1));
            return pointString.split(",");
        }
    
        private void findCommand() {
            cmdPositions.clear();
            while (mIndex < svgPathLenght) {
                char c = svgPath.charAt(mIndex);
                if ('A' <= c && c <= 'Z') {
                    cmdPositions.add(mIndex);
                }else if ('a' <= c && c <= 'z') {
                    cmdPositions.add(mIndex);
                }
                ++mIndex;
            }
        }
    }
    

    代码已分享到github

    相关文章

      网友评论

        本文标题:SVG <path> 转 Android Canva

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