厦门网站建设官网,招聘做牙技工的网站,linux虚拟机网站建设,徐州百度搜索优化https://github.com/samsha/svg2canvascanvg.js是的确实有人在做这样的事#xff0c;canvg.js 就是一个将SVG转换成Canvas的工具库#xff0c;甚至有些SVG的动画效果也能得到实现#xff0c;但是canvg.js存在很多问题#xff1a;不可避免的SVG兼容问题SVG是一种很复杂的矢量…https://github.com/samsha/svg2canvascanvg.js是的确实有人在做这样的事canvg.js 就是一个将SVG转换成Canvas的工具库甚至有些SVG的动画效果也能得到实现但是canvg.js存在很多问题不可避免的SVG兼容问题SVG是一种很复杂的矢量图形语言完全转换到Canvas相当于写一个独立的SVG查看器即使是Adobe的SVG Viewer也会存在兼容问题更何况一个小小的js工具库canvg.js无法生成Canvas绘制代码canvg.js确实能将SVG绘制到Canvas上但是无法生成绘制代码就意味着需要引入这个类库且动态解析SVG这里存在额外的性能开销加上canvg.js本身并不完善代码封装性还是功能上都存在缺陷在生产环境中引入会带来问题professorcloud网上搜索svg to canvas可以找到这个http://www.professorcloud.com/svg-to-canvas/可以将SVG转换成Canvas并输出javascript代码符合制作矢量图标的需要Qunee早期的内置icon都是这样制作的但是这个工具并不完善不支持渐变不支持纹理大部分的SVG图标无法转换于是我们考虑自己写一个在线工具以方便客户使用我们查看了http://www.professorcloud.com/svg-to-canvas/ 的代码它是在某个老版本的canvg.js基础上修改实现的是写死的代码不方便后期升级和维护我们想到一种更好的方式来实现SVG2Canvas我们想到一种更好的方式实现SVG到Canvas代码的转换在线地址http://demo.qunee.com/svg2canvas/实现思路通过重写HTMLCanvasElement相关的方法来实现基本的思路就是将CanvasRenderingContext2D.prototype中的相关绘制和设置代码重写增加上生产js代码的功能比如对CanvasRenderingContext2D#fill()方法的处理我们可能要重写这个方法CanvasRenderingContext2D.prototype.fill2 function(){this.fill();appendCode(ctx.fill();\n);//生成js代码}当然实际上要比这复杂需要考虑如何重写方法如何将参数对象转换成字符串此外对于复杂的SVG可能会需要创建临时的Canvas对象还涉及到一些正则表达式还要注意作用域的问题花费了些功夫实现了一套不错的工具基本上canvg.js能支持的svg都能很好的转换支持Gradient, 支持Pattern等在线服务好的东西如果只是自己使用未免太浪费了于是我们又花了不少时间将其做出了一个好的界面并公布出来在线地址http://demo.qunee.com/svg2canvas/支持Chrome, Safari浏览器左中右布局分布将svg文件拖拽到左侧虚线框中即可生成Qunee for HTML5中相应的图片注册代码并及时预览到图片在Qunee for HTML5中的展示效果如下使用生成的代码将右侧文本框中的代码保存到js文件(比如SVGIcons.js)并在HTML中引入这个js之后你就可以直接使用svg文件名作为节点图标了node.image DataCenter.svg;示例代码Hello Qunee for HTML5var graph new Q.Graph(canvas);var node graph.createNode(SVG);node.image DataCenter.svg;运行效果]]
