雪碧图制作-mapbox本地化

雪碧图制作-mapbox本地化

1. 雪碧图制作

插件:spritezero-cli

1.1. 安装

安装前最好先进行矢量地图tippecanoe扩展的安装

1.1.1. nodejs安装

sudo apt-get install nodejs
sudo apt-get install npm

1.1.2. spritezero-cli安装

#下载
wget https://github.com/mapbox/spritezero-cli/archive/v2.1.0.tar.gz
#解压
tar -xzf v2.1.0.tar.gz
#一定要使用全局代理运行
#一定要使用全局代理运行
#一定要使用全局代理运行
cd spritezero-cli-2.1.0/
apt-get install nodejs-legacy
npm install
npm install -g @mapbox/spritezero-cli

1.2. 使用

spritezero [output filename] [input directory]

  --retina      shorthand for --ratio=2
  --ratio=[n]   pixel ratio
  --unique      map identical images to multiple names

将整个目录的SVG文件转为一张PNG雪碧图和一份JSON样式表

  • example
//一级样式
spritezero ttt input/
//retina样式
spritezero --retina ttt@2x input/

将整个input目录中的所有svg文件转换为ttt.png的雪碧图和ttt.json的样式表

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,332评论 3 119
  • 2.CSS Sprite(CSS 精灵), 也称作 雪碧图;如华为官网右侧提示栏: 图标字体是个比较大的技术讨论点...
    萧强阅读 8,214评论 1 16
  • 哇,不得不说,真的来对地方了,景色超好,空气超清新。 还是离学校不是很远,也就是15公里左右的样子。 还是骑自行车...
    青柚哒阅读 2,044评论 2 4
  • 常用那几种浏览器测试?有哪些内核(Layout Engine)?(Q1) 浏览器:IE,Chrome,FireFo...
    gtt21阅读 816评论 0 2
  • 1. 周三课上有个即时的小组活动,要求找出一个内容冒犯的广告,并在电脑上向大家展示。大家都知道,任何体验前缀加上「...
    周小C阅读 442评论 0 1

友情链接更多精彩内容