iconToImage

来自于：开发者

go

概述

iconfont或SVG转图片保存，根据px单位转成适合物理分辨率的图片，支持png和jpg，并增加了背景和文字功能。 应用场景：模块里需要传入图片或其他需要和屏幕分辨率适配的地方，这样只需要用一张图片来适配各种分辨率

go

执行转换并保存

go({params},callback(ret))

params

fontFile:

  • 类型：字符串
  • 默认值：无
  • 描述：字体文件路径，支持ttf格式，相对路径格式，如”../../css/iconfont.ttf”

upFile:

  • 类型：字符串
  • 默认值：无
  • 描述：更新描述文件保存路径，图片不需要每次都去转换保存，只有发生了变化才更新，绝对路径格式，如”box://image/iconToImageUp.json”

fontList:

  • 类型：数组
  • 默认值：无
  • 描述：iconfont图片数组,如没有请写 fontList:[],

  • 内部字段：

    1. [{
    2.   up:1,                            //更新标记,数字,有更新+1
    3.   name:"xxx.png",                  //文件名字,字符串,保持唯一,后缀"png"和"jpg","jpg"不能实现透明
    4.   iconX:0xe213,                    //字体在文件中的Unicode编码,数字
    5.   fontSize:30,                     //图标大小,px单位
    6.   width:35,                        //图片宽,px单位
    7.   height:35,                       //图片高,px单位
    8.   verticalalign:"alphabetic",      //(可选项)垂直对齐方式,字符串(默认middle,错误值会设置成alphabetic),top,hanging=靠顶,middle=居中(默认),bottom,ideographic,alphabetic=靠底,靠顶和靠底各参数之间有细小差别,参考canvas.textBaseline属性,介绍网址https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/textBaseline
    9.   roundRect:0,                     //(可选项)背景圆角矩形百分比,数字(默认0),按照宽来计算,0=无圆角,50=正方形的话就是圆
    10.   backgroundcolor:"",              //(可选项)背景颜色,字符串(默认"")""或"transparent"透明背景,可使用各种css颜色表示法
    11.   color:"DeepSkyBlue",             //(可选项)图标颜色,字符串(默认"#000000")
    12.   path:"box://image/map/",         //保存相对路径,字符串,绝对路径格式,支持"fs://","cache://","box://",不能使用"widget://"这个是只读
    13.   text:"",                         //(可选项)要显示的文字(默认"")当写了该值,那么textSize必须赋值
    14.   textSize:10,                     //当有了text这个值必选,文字字体大小
    15.   textV:"",                        //(可选项)文字垂直对齐方式(默认"alphabetic"),参数同verticalalign
    16.   textcolor:"#000000",             //(可选项)文字颜色(默认"#000000"),可使用各种css颜色表示法
    17.   PaddingSize:0                    //(可选项)填充大小(默认0),不大于height的一半,这个和css中的Padding是相同概念
    18. }]

svgList:

  • 类型：数组
  • 默认值：无
  • 描述：svg图片数组,如没有请写 svgList:[],

  • 内部字段：

    1. [{
    2.   up:1,                            //更新标记,数字,有更新+1
    3.   name:"xxx.png",                  //文件名字,字符串,保持唯一,后缀"png"和"jpg","jpg"不能实现透明
    4.   Size:35,                         //图标大小,px单位
    5.   width:50,                        //图片宽,px单位
    6.   height:50,                       //图片高,px单位
    7.   verticalalign:"",                //(可选项)垂直对齐方式,字符串(默认middle,错误值会设置成alphabetic),top,hanging=靠顶,middle=居中(默认),bottom,ideographic,alphabetic=靠底,靠顶和靠底各参数之间有细小差别,参考canvas.textBaseline属性,介绍网址https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/textBaseline
    8.   roundRect:13,                    //(可选项)背景圆角矩形百分比,数字(默认0),按照宽来计算,0=无圆角,50=正方形的话就是圆
    9.   backgroundcolor:"",              //(可选项)背景颜色,字符串(默认"")""或"transparent"透明背景,可使用各种css颜色表示法
    10.   path:"box://image/map/",         //保存相对路径,字符串,绝对路径格式,支持"fs://","cache://","box://",不能使用"widget://"这个是只读
    11.   text:"",                         //(可选项)要显示的文字(默认"")当写了该值,那么textSize必须赋值
    12.   textSize:10,                     //当有了text这个值必选,文字字体大小
    13.   textV:"alphabetic",              //(可选项)文字垂直对齐方式(默认"alphabetic"),参数同verticalalign
    14.   textcolor:"#FF9933",             //(可选项)文字颜色(默认"#000000"),可使用各种css颜色表示法
    15.   PaddingSize:3,                   //(可选项)填充大小(默认0),不大于height的一半,这个和css中的Padding是相同概念
    16.   svgFile:"widget://image/xxx.svg",//(和svgdata任选一样)svg图片路径,格式为绝对路径,不能有中文,测试的时候如果有中文在传给真机时文件内容会被修改,注意一个svg文件中只能有一个图片,有些svg文件是把几张图片打包在一起的
    17.   svgdata:'<?xml version="1.0"...' //(和svgFile任选一样)直接写svg数据,用单引号引起来,因为数据中有双引号,直接写数据可以避免冗余的文件
    18. }]

    callback(ret)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     status:true,                //操作成功状态值
  3.     totalNum:0,                 //传入数量
  4.     needNum:0,                  //需要处理的数量
  5.     succNum:0,                  //成功处理的数量
  6.     msg:"",                     //回传的信息
  7.     time:0                      //用时毫秒
  8. }

示例代码

  1.     var iconToImage = api.require("iconToImage");
  2.     iconToImage.go({
  3.         fontFile:"",
  4.         upFile:"box://image/pretreatImageUp.json",
  5.         fontList:[],
  6.         svgList:[
  7.             {up:1, name:"gj.png", Size:35, width:50, height:50, verticalalign:"top", text:"轨迹", textSize:10, textV:"alphabetic", textcolor:"#FF9933", PaddingSize:3, roundRect:13, backgroundcolor:"rgba(120,120,120,0.3)", path:"box://image/map/", svgdata:'<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="500px" height="500.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M517.28896 679.68S757.76 458.24 750.08 288c-1.28 0-35.50208-207.36-232.79104-211.2S288 262.4 288 262.4s-7.34208 222.72 229.28896 417.28z" fill="#BAD4FF" /><path d="M592.21504 329.38496c0 41.94304-34.00704 75.94496-75.95008 75.94496C474.32192 405.33504 440.32 371.33312 440.32 329.38496c0-41.94304 34.00192-75.94496 75.94496-75.94496s75.95008 34.00192 75.95008 75.94496z" fill="#FFFFFF" /><path d="M517.28896 442.78784c64.43008 0 116.8896-51.1488 116.8896-114.07872 0-62.94016-52.45952-114.07872-116.8896-114.07872-64.42496 0-116.89472 51.13856-116.89472 114.07872 0.00512 62.93504 52.46464 114.07872 116.89472 114.07872z m0-177.2544c32.43008 0 63.80032 31.40608 63.80032 63.84128 0 32.384-31.37024 63.84128-63.80032 63.84128-32.37888 0-63.80032-31.45728-63.80032-63.84128 0-32.43008 31.42144-63.84128 63.80032-63.84128z m-113.13152 344.71424c1.68448 2.41664 3.34336 4.37248 4.69504 5.78048 39.4496 48.10752 79.19104 80.11264 80.91648 81.47968l27.68896 22.19008 27.5712-22.3488c1.72544-1.37216 41.33888-33.76128 80.70656-81.71008 1.34656-1.43872 3.07712-3.44064 4.736-5.90336 56.28928-73.8816 121.14432-175.7952 136.97024-268.4672 3.05152-21.12512 3.1232-33.92 3.1232-35.32288 0.53248-69.248-21.74976-124.0832-72.00256-172.8-48.66048-47.18592-113.0496-73.15968-181.25824-73.15968-67.9424 0-132.16256 25.97376-180.82304 73.15968-50.52928 48.96768-72.98048 104.15104-72.45312 173.9008 0 1.10592 0.08704 13.94688 3.01056 34.05312 16.9728 99.1744 90.83904 208.69632 137.11872 269.14816z m113.13152-493.48096c106.5216 0 203.96032 90.93632 203.19232 197.5552 0 0 0 9.63072-2.31936 25.63584-12.73856 74.65984-78.03904 172.25728-126.27968 235.41248-0.38912 0.75776-1.17248 1.4848-1.54112 1.8688-33.58208 41.21088-73.05216 74.20928-73.05216 74.20928s-39.47008-32.6144-73.04704-73.8304a9.60512 9.60512 0 0 1-1.54624-1.8688c-48.24064-62.7712-113.54112-165.87776-126.2848-240.18944-2.31424-15.95904-2.31424-25.63584-2.31424-25.63584-0.77312-106.61376 96.67584-193.15712 203.19232-193.15712z" fill="#4E8CEE" /><path d="M861.11232 824.61696H140.45696c-54.61504 0-95.80032-38.9888-95.80032-90.68544 0-51.69152 41.18528-90.6752 95.80032-90.6752h126.63296a24.2176 24.2176 0 0 1 0 48.4352H140.45696c-22.81472 0-47.36512 13.21472-47.36512 42.23488 0 27.73504 23.82848 42.24512 47.36512 42.24512h720.65024a24.2176 24.2176 0 0 1 0.00512 48.44544z" fill="#4E8CEE" /><path d="M880.73216 957.73696H231.76192a24.2176 24.2176 0 0 1 0-48.4352h648.96512c22.81472 0 47.37024-13.21984 47.37024-42.24512 0-29.02016-24.55552-42.23488-47.37024-42.23488h-141.98272a24.2176 24.2176 0 0 1 0-48.4352h141.98272c54.62016 0 95.81056 38.98368 95.81056 90.6752 0 51.6864-41.18528 90.6752-95.80544 90.6752z" fill="#4E8CEE" /></svg>' },
  8.             ]
  9.     },function(ret){
  10.         var status = ret.status;
  11.         var totalNum = ret.totalNum;
  12.         var needNum = ret.needNum;
  13.         var succNum = ret.succNum;
  14.         var msg = ret.msg;
  15.         var time = ret.time;
  16.         api.alert({msg:"执行状态:"+status+"\r\n执行时间:"+time+"毫秒\r\n传入:"+totalNum+"个\r\n需要转:"+needNum+"个\r\n成功转:"+succNum+"个\r\n返回信息:"+msg});
  17.     });

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本