SVG-Android开源库——SVG生成Vector资源文件的编辑预览工具

Vector矢量图在Android项目中的应用越来越广泛,但是如果你想用Android Studio自带的工具将SVG图片转化成Vector资源文件却是相当麻烦,首先能支持的SVG规范较少,其次操作流程麻烦。而另一种方式就是通过http://inloop.github.io/svg2android/ 这个网站转换,虽然支持的SVG规范较多,但是访问速度较慢且操作起来相当麻烦,最重要的是没有预览功能。这里,给大家安利SVG-Android框架下的几个小工具,可以辅助开发者更加便捷地使用SVG图片。

这几款工具,都是基于SVG-Android核心库开发,相比于其它几种方式具有以下几种特性:

  • 支持更多的SVG规范,具体可以参考:SVG-Android支持规范文档

  • 支持处理svg格式和svgz格式的矢量图片

  • 独立的Java轻量级小程序,支持离线运行

  • 源码公开,如果有问题和建议,欢迎随时联系,尽快更新处理


一、SVG2Vector批量工具

首先,源码地址:https://github.com/MegatronKing/SVG-Android/tree/master/svg-vector-cli

其次,下载地址:http://download.csdn.net/detail/megatronkings/9732864

示例1

java -jar svg2vector-cli-1.0.0.jar -d D:\svg -o D:\vector

表示批量将svg目录下面的svg或者svgz格式的图片转换成Android使用的vector资源文件并输出到vector目录下

示例2

java -jar svg2vector-cli-1.0.0.jar -f D:\svg\test.svg -o D:\vector\test.xml

表示将单个名为test.svg的svg格式图片转换成Android使用的vector资源文件为test.xml

更多命令:

  • [-d] 指定需转换的目标svg文件夹,用于批量处理
  • [-f] 指定需转换的单个目标svg文件,用于单独处理
  • [-o] 指定生成vector资源文件的输出目录
  • [-w] 指定生成vector资源文件的宽度
  • [-h] 指定生成vector资源文件的高度

一、SVG2Vector编辑预览工具

这是一款Java Applet可视化小程序,支持快速处理svg或者svgz格式图片生成vector的转换,并且支持编辑以及预览生成的vector资源文件图片。

首先,源码地址:https://github.com/MegatronKing/SVG-Android/tree/master/svg-vector-applet

其次,下载地址:http://download.csdn.net/detail/megatronkings/9732869

使用步骤:

1、启动工具

java -jar svg2vector-applet-1.0.0.jar

这里写图片描述

2、拖动svg、svgz、vector文件到应用或者点击文件按钮选择指定文件

3、如果打开的是svg或者svgz文件,将会自动生成vector代码,并可在右侧预览图片内容

这里写图片描述

4、如果对图片样式属性不满意,可以修改一下

5、点击“文件->保存”,或者快捷键Ctrl+S 保存最终的vector文件


本博客不定期持续更新,欢迎关注和交流:

http://blog.csdn.net/megatronkings

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 Koa2 中使用 svg-captcha 生成验证码可以按照以下步骤进行: 1. 安装 svg-captcha 和 koa-svgrouter 模块 ```bash npm install svg-captcha koa-svgrouter --save ``` 2. 在 Koa2 应用中引入相关模块 ```javascript const Koa = require('koa'); const Router = require('koa-router'); const svgrouter = require('koa-svgrouter'); const svgCaptcha = require('svg-captcha'); const app = new Koa(); const router = new Router(); ``` 3. 设置路由,生成验证码 ```javascript router.get('/captcha', async (ctx, next) => { const captcha = svgCaptcha.create(); ctx.session.captcha = captcha.text; ctx.type = 'svg'; ctx.body = captcha.data; }); ``` 4. 添加 SVG 路由 ```javascript app.use(svgrouter('/captcha/:id', { useSession: true, sessionName: 'captcha' })); ``` 5. 在需要使用验证码的地方,可以通过如下代码获取验证码图片 ```html <img src="/captcha/1" /> ``` 注意,上述代码中的数字 1 是路由参数,可以自行设置。 6. 验证验证码 在需要验证验证码的地方,可以通过如下代码获取用户输入的验证码,并与之前生成的验证码进行比较。 ```javascript const userCaptcha = ctx.request.body.captcha; if (userCaptcha.toLowerCase() === ctx.session.captcha.toLowerCase()) { // 验证码输入正确 } else { // 验证码输入错误 } ``` 以上就是使用 svg-captcha 生成验证码的基本步骤。需要注意的是,在生成验证码和验证验证码时都需要使用到 Koa2 的 session 功能,因此需要在应用中添加相关中间件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值