记一次svg转化成坐标,用egret方法绘制

第一步:获取svg图片的参数.(用sublime打开或ie浏览器审查元素可看到参数,获取M到Z的参数)

第二步:npm包svg-parse(https://www.npmjs.com/package/svg-parse)可以自己安装也可以使用svg-parse包提供的在线测试网址,

 

 

 结果转化成数组或对象等格式.

我这里转化成数组了

[{props: {relative: false, x: 199.5, y: 357.8}, type: "moveTo"},
{props: {relative: false, x: 164.95, x1: 180.65, y: 357.3, y1: 348}, type: "quadraticTo"},
{props: {relative: false, x: 164.05, x1: 164.45, y: 357.8, y1: 357.55}, type: "quadraticTo"},
{props: {relative: false, x: 150.15, x1: 137.3, y: 402.8, y1: 375.6}, type: "quadraticTo"},
{props: {relative: false, x: 128.75, x1: 110.55, y: 465.8, y1: 421.55}, type: "quadraticTo"},
{props: {relative: false, x: 129.4, x1: 129.05, y: 467.35, y1: 466.55}, type: "quadraticTo"},
{props: {relative: false, x: 181.5, x1: 146.05, y: 474.6, y1: 499.25}, type: "quadraticTo"},
{props: {relative: false, x: 182.05, y: 475.4}, type: "lineTo"},
{props: {relative: false, x: 238.25, x1: 224.8, y: 445.1, y1: 495.85}, type: "quadraticTo"},
{props: {relative: false, x: 277.65, x1: 276.25, y: 400.85, y1: 437.85}, type: "quadraticTo"},
{props: {relative: false, x: 277.7, x1: 277.65, y: 400.05, y1: 400.4}, type: "quadraticTo"},
{props: {relative: false, x: 236.75, x1: 268.75, y: 365.85, y1: 354.4}, type: "quadraticTo"},
{props: {relative: false, x: 236.15, y: 365.3}, type: "lineTo"},
{props: {relative: false, x: 199.5, x1: 219.5, y: 357.8, y1: 342.4}, type: "quadraticTo"},
{props: null, type: "close"}]

　　

egret矢量绘图,贴代码

class Sence extends eui.Component implements  eui.UIComponent {
    public constructor() {
        super();
    }
    protected partAdded(partName:string,instance:any):void {
        super.partAdded(partName,instance);
    }
    private square: eui.Image;
    private squareList: Array<eui.Image> = [];

    private svgData: any = {};
    protected childrenCreated():void {
        super.childrenCreated();
        let svgDataArr = [{props: {relative: false, x: 199.5, y: 357.8}, type: "moveTo"},
            {props: {relative: false, x: 164.95, x1: 180.65, y: 357.3, y1: 348}, type: "quadraticTo"},
            {props: {relative: false, x: 164.05, x1: 164.45, y: 357.8, y1: 357.55}, type: "quadraticTo"},
            {props: {relative: false, x: 150.15, x1: 137.3, y: 402.8, y1: 375.6}, type: "quadraticTo"},
            {props: {relative: false, x: 128.75, x1: 110.55, y: 465.8, y1: 421.55}, type: "quadraticTo"},
            {props: {relative: false, x: 129.4, x1: 129.05, y: 467.35, y1: 466.55}, type: "quadraticTo"},
            {props: {relative: false, x: 181.5, x1: 146.05, y: 474.6, y1: 499.25}, type: "quadraticTo"},
            {props: {relative: false, x: 182.05, y: 475.4}, type: "lineTo"},
            {props: {relative: false, x: 238.25, x1: 224.8, y: 445.1, y1: 495.85}, type: "quadraticTo"},
            {props: {relative: false, x: 277.65, x1: 276.25, y: 400.85, y1: 437.85}, type: "quadraticTo"},
            {props: {relative: false, x: 277.7, x1: 277.65, y: 400.05, y1: 400.4}, type: "quadraticTo"},
            {props: {relative: false, x: 236.75, x1: 268.75, y: 365.85, y1: 354.4}, type: "quadraticTo"},
            {props: {relative: false, x: 236.15, y: 365.3}, type: "lineTo"},
            {props: {relative: false, x: 199.5, x1: 219.5, y: 357.8, y1: 342.4}, type: "quadraticTo"},
            {props: null, type: "close"}];
            this.svgData = svgDataArr;

            this.initGoods();
    }

    private initGoods():void {
    const goodsData = this.svgData; // 存放svg坐标的类
    const lineArea = new egret.Shape();
    lineArea.graphics.beginFill(Number(0xff0000));
    goodsData.forEach((item, index) => {
        
        lineArea.touchEnabled = true;
        this.getGraph(lineArea, item);
        this.addChild(lineArea);
    });
    
    lineArea.graphics.endFill();
    lineArea.touchEnabled = true;
    lineArea.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{
        console.log('yes');
    }, this);
    
}
// 连线成为图形
private getGraph(lineArea: egret.Shape, element):void {
    lineArea.graphics.lineStyle(2, 0xff0000);
    
    // 连线规则
        switch(element.type) {
            case "moveTo":
                lineArea.graphics.moveTo(element.props.x, element.props.y);
                break;
            case "lineTo":
                lineArea.graphics.lineTo(element.props.x, element.props.y);
                break;
            case "quadraticTo":  // 二次贝塞曲线
                lineArea.graphics.curveTo(element.props.x1, element.props.y1, element.props.x, element.props.y);
                break;
        }

}


}