终端开发

使用Android Studio开发可独立运行(runnable)混淆过的Jar程序 Android安装包精简系列之资源精简 Android安装包精简系列之图片优化 Android安装包精简系列之为什么要优化精简安装包 Android安装包精简系列(总纲) Android安装包精简系列之图标转字体 gradle相关资料汇总 Android编译常见错误解决 Android编译编译速度提升 终端基于gradle的开源项目运行环境配置指引 制作终端产品演示的gif 一个关于APK Signature Scheme v2签名的神奇bug定位经历 如何随apk一起打包并使用SQLite SDK热更之gradle插件(如何在SDK代码中自动插桩及如何生成补丁包) 关于Android的APK Signature Scheme v2签名相关的资料汇总 封装HttpURLConnection实现的简单的网络请求库 一款基于Java环境的读取应用包名、签名、是否V2签名等基本信息的工具 Android的APK Signature Scheme v2签名及一款基于Java环境的校验工具介绍 如何使用Eclipse开发可执行Jar程序,并生成混淆过的jar程序 Android 相关的学习资料整理(持续更新) macOS(Sierra 10.12)上Android源码(AOSP)的下载、编译与导入到Android Studio Google也看不下去被玩坏的悬浮窗了么? Android开发常用工具资源 SDK热更系列之概述(持续整理编辑中~) SDK热更系列之SDKHotfix待优化点 Android 终端开发相关的一些神图(持续更新) SDK热更系列之Demo项目介绍概述 SDK热更系列之Demo体验方法 SDK热更系列之如何获取应用在当前设备上的so对应的指令集 Gradle Android插件使用的中那些特别注意的点 Experimental Plugin User Guide(From Android Tools Project Site) 基于Android Studio使用gradle构建包含jni以及so的构建实例 基于Instrumentation框架的自动化测试 - Android自动化测试系列(四) Instrumentation框架介绍-Android自动化测试系列(三) 关于终端设备的设备唯一性的那些事之MAC地址 关于终端设备的设备唯一性的那些事之IMEI Android 检查应用是否有root权限 ant常见错误解决方案 Gradle介绍 iMac上Android Studio 相关设置及常见问题 再说adb 再看Android官方文档之分享 再看Android官方文档之Fragment&数据保存 再看Android官方文档之Activity&Intent 再看Android官方文档之ActionBar和兼容性 adb shell input(Android模拟输入)简单总结 再看Android官方文档之建立第一个APP Android开发调试常用工具 ANR(网络资料整理) Java参数引用传递引发的惨案(又一次Java的String的“非对象”特性的踩坑经历) android.view.WindowManager$BadTokenException,Unable to add window Android签名校验机制(数字证书) Robotium二三事-Android自动化测试系列(二) Robotium介绍-Android自动化测试系列(一) Android开发中遇到的那些坑 Eclipse使用中部分经验总结 Android中关于Nativa编译(NDK、JNI)的一些问题 Android简单实现的多线程下载模块 Android内存耗用之VSS/RSS/PSS/USS adb Advanced Command URL编码中的空格(编码以后变为+) Android MD5后 bye数组转化为Hex字符串的坑(记一次为女神排忧解难的经历) Android学习之路 adb Base Command Android Log的那些坑…………

标签

android 46

Android编译常见错误解决 一个关于APK Signature Scheme v2签名的神奇bug定位经历 关于Android的APK Signature Scheme v2签名相关的资料汇总 封装HttpURLConnection实现的简单的网络请求库 一款基于Java环境的读取应用包名、签名、是否V2签名等基本信息的工具 Android的APK Signature Scheme v2签名及一款基于Java环境的校验工具介绍 如何使用Eclipse开发可执行Jar程序,并生成混淆过的jar程序 Android 相关的学习资料整理(持续更新) macOS(Sierra 10.12)上Android源码(AOSP)的下载、编译与导入到Android Studio Android开发常用命令备忘 Google也看不下去被玩坏的悬浮窗了么? Android开发常用工具资源 Android 终端开发相关的一些神图(持续更新) Gradle Android插件使用的中那些特别注意的点 Experimental Plugin User Guide(From Android Tools Project Site) iMac(OS X)搭建私有maven仓库,提供Nexus Responsitory镜像 基于Android Studio使用gradle构建包含jni以及so的构建实例 基于Instrumentation框架的自动化测试 - Android自动化测试系列(四) Instrumentation框架介绍-Android自动化测试系列(三) 关于终端设备的设备唯一性的那些事之MAC地址 关于终端设备的设备唯一性的那些事之IMEI Android 检查应用是否有root权限 iMac(OS X)El Capitan 更新遇到的那些坑 ant常见错误解决方案 Gradle介绍 iMac上Android Studio 相关设置及常见问题 再说adb 再看Android官方文档之分享 再看Android官方文档之Fragment&数据保存 再看Android官方文档之Activity&Intent 再看Android官方文档之ActionBar和兼容性 adb shell input(Android模拟输入)简单总结 再看Android官方文档之建立第一个APP Android开发调试常用工具 ANR(网络资料整理) Java参数引用传递引发的惨案(又一次Java的String的“非对象”特性的踩坑经历) android.view.WindowManager$BadTokenException,Unable to add window Android签名校验机制(数字证书) Eclipse使用中部分经验总结 Android内存耗用之VSS/RSS/PSS/USS adb Advanced Command URL编码中的空格(编码以后变为+) Android MD5后 bye数组转化为Hex字符串的坑(记一次为女神排忧解难的经历) Android学习之路 adb Base Command Android Log的那些坑…………

Canvas上更高效的画SVG

2018年04月13日

因为工作的原因,最近开始接触并且了解微信小程序。在使用canvas的时候,遇到一些需要画线条的场景。前期都比较简单,主要是简单线条也规则的圆弧或者扇形,相对好画;最近开始出现需要画一些曲线,尤其是比较多需要使用贝塞尔曲线来画。最开始因为精度要求不高还可以接受。当最近的业务场景需要高度还原设计稿的时候,再画下去就很复杂了。后来和同事一起研究发现可以通过下面的路径来大大降低绘图难度,这里总结一下:

  • 将设计稿中的线条导出为SVG

  • 将SVG代码使用工具转化为Canvas代码

  • 基于工具生成的Canvas代码整理为最终的代码

接下来结合示例详细介绍一下具体的步骤

拿到图片的SVG

首先我们去google doc自己随便画一个简单的SVG的图片,如下图:

最终我们导出为SVG格式,具体svg的图片资源保存在文章对应开源代码的根目录。

使用工具将SVG代码转为Canvas代码

由于SVG的语法的固定,目前已经又专门的工具可以将SVG的代码转化为Canvas对应的代码了,目前个人使用的是基于 canvg.jshttps://github.com/gabelerner/canvg)开发的在线工具svg2canvas

  • 网址:http://demo.qunee.com/svg2canvas/

  • 截图:

    页面左边是我们拖入的SVG文件,右侧就是生成的SVG的JS 代码,部分代码如下:

      var SVGIcons = {
          "zixie.svg": {
           draw: function(ctx){
              ctx.save();
              ctx.strokeStyle="rgba(0,0,0,0)";
              ctx.miterLimit=4;
              ctx.font="normal normal 400 normal 15px / 21.4286px ''";
              ctx.font="   15px ";
    			
              ……
    			
              ctx.moveTo(258.2251,83.05221);
              ctx.bezierCurveTo(264.7121605,86.9550802,271.30707,90.96817200000001,276.65378,96.334841);
              ctx.fill("evenodd");
              ctx.stroke();
              ctx.restore();
              ctx.restore();
              ctx.restore();
          }
      }}
    

可以看到主体代码已经是绘制Canvas的每一步步骤了。但是里面夹杂了很多文字大小、填充颜色等的设置,而且有些函数,例如saverestore 多处都是重复调用,因此我们并不能直接拿来使用,还需要进行进一步的精简和梳理。

整理优化Canvas代码

整理优化代码主要分为两个步骤:

  • 删除重复和无用代码

  • 结合业务场景调整代码

删除无用代码

这里主要是删除里面大量的字体、颜色等设置、SVG的边框绘制等代码,修改为小程序中的代码,并且在画图前统一设置画笔颜色,同时将里面部分重复代码删除。整理以后的部分代码如下:

Page({
  data: {
    
  },
  onLoad: function () {
    this.draw()
  },
  draw:function(){
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.save();
    ctx.strokeStyle = "blue";  //填充颜色
    ctx.scale(1,1)  //缩放比例
    ctx.beginPath();
    ctx.moveTo(33.609554, 92.2973);
    ctx.bezierCurveTo(25.849306000000002, 77.841322, 21.627914000000004, 57.562917000000006, 29.579143000000002, 43.211664000000006);
   
	 ……		
	     
    ctx.moveTo(258.2251, 83.05221);
    ctx.bezierCurveTo(264.7121605, 86.9550802, 271.30707, 90.96817200000001, 276.65378, 96.334841);
    ctx.stroke();
    ctx.restore();
    ctx.draw()
  }
})

结合业务场景调整代码

这里主要是结合业务场景对SVG的大小、位置、画笔颜色等做调整。由于是事例,因此对于画笔颜色我没有做调整。仅仅调整了整个SVG的位置,让他右移、下移一定范围。

如果使用常规方法我们需要逐个去修改里面的函数参数太过费时,我选择了重新实现他的划线函数,在里面对坐标增加偏移量以后再绘图。示例代码如下:

Page({
  data: {
    indent:50,
    vIndent:200,
    canvasContext:null
  },
  onLoad: function () {
    this.draw()
  },
  draw:function(){
    onst ctx = wx.createCanvasContext('myCanvas')
    this.setData({ canvasContext: ctx})
    ctx.save();
    ctx.strokeStyle = "blue";  //填充颜色
    ctx.scale(1,1)  //缩放比例
    ctx.setLineWidth(10)
    ctx.beginPath();
    this.moveTo(33.609554, 92.2973);
    
    ……
    
    this.bezierCurveTo(264.7121605, 86.9550802, 271.30707, 90.96817200000001, 276.65378, 96.334841);
    ctx.stroke();
    ctx.restore();
    ctx.draw()
  },
  moveTo:function(x,y){
    this.data.canvasContext.moveTo(x + this.data.indent, y + this.data.vIndent);
  }, 
  bezierCurveTo: function (x, y, x1, y1, x2, y2) {
    this.data.canvasContext.bezierCurveTo(
      x  + this.data.indent, y  + this.data.vIndent, 
      x1 + this.data.indent, y1 + this.data.vIndent, 
      x2 + this.data.indent, y2 + this.data.vIndent);
  }, 
})

至此我们就完成了图片到Canvas的转化,最终效果截图如下:

相关资源:

OK,至此我们就实现了在微信小程序中使用SVG资源。文章中涉及到的所有代码已经开源到github,相关链接如下:



PS:我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=10zhijuy24v4f

赞赏

取消
微信扫一扫,赞赏子勰
扫码支持
屌丝程序猿,鸡血攻城狮!努力学技术,潜心做精品!