html5svg在线编辑器,SVG to Canvas在线转换工具

https://github.com/samsha/svg2canvas

58fcdbcec4cfcdbecf13437c1793995e.png

canvg.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中的展示效果,如下:

64a3d884b1402b4b17924e7f7078f2bb.png

使用生成的代码

将右侧文本框中的代码保存到js文件(比如SVGIcons.js),并在HTML中引入这个js,之后你就可以直接使用svg文件名作为节点图标了

node.image = 'DataCenter.svg';

示例代码

Hello Qunee for HTML5

var graph = new Q.Graph('canvas');

var node = graph.createNode("SVG");

node.image = 'DataCenter.svg';

运行效果

03166fdf433366ac10a73471e8ba6a72.png]]>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/563386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python3 上传文件到目标机器_通过python模块实现服务器和本地机器之间快速拷贝文件...

在实际的开发过程中,很多时候我们都不直接在本机上开发,一般都在远程服务器上开发并运行程序。比如三胖在实际开发中就会使用到很多台服务器:我有一台笔记本电脑,通过 ssh 连接着很多台服务器,我需要经常在不同的服务器…

android 拼图课程设计,拼图游戏设计_课程设计报告.docx

IlIlIlIl学号16082202032016-2017学年 第一学期《Windows程序设计》课程设计报告题目:拼图游戏设计专业:班级:姓名:指导教师:成绩:学院二0—六年十一月十五日TOC \o "1-5" \h \z \o "Current Document" 仁设计目的与要求31. 111 目白勺????…

android 能调用gcc_如何在命令行下使用Android NDK交叉编译工具

我们知道,在Linux下可以使用gcc来把一份C代码编译成为Linux上的可执行程序, 如:$ gcc -o main.out main.c而Android平台提供了NDK工具包来交叉编译可以运行于Android系统中的应用程序, 它需要我们编写 Android.mk来配置编译选项和编译目标, 那么, 能否也像gcc那样直接在命令行下…

鸿蒙系统有那些上市,鸿蒙上市整套系统究竟意味着什么

大家期待的鸿蒙系统已经上市,首先鸿蒙系统从自家的生态产品适配,大家熟知的华为笔记本,华为手机,华为平板,华为手表等,相比目前市场上的操作系统,IOS,安卓,微软Windows&a…

c# 时间格式化为英文_C# DateTime日期格式化

1. 分类DateTime调用ToString()传入的参数可分为制式和自定义两种:1) 制式:系统自带的,转入特定的单个字符就可转换为系统已设定好的格式。2) 自定义:自由组合日期代码(y、M、d、h、m、s、f)来展示丰富的日期格式。2. 制式类型说明…

html多个单元格合并单元格内容,excel怎样快速把多个单元格内容合并 合并多个单元格内容的设置方法...

excel是我们常用的办公软件,有时我们需要把多个单元个的内容合并到一个单元格里,那么excel怎样快速把多个单元格内容合并?下面小编带来合并多个单元格内容的设置方法,希望对大家有所帮助。合并多个单元格内容的设置方法&#xff1…

XP的用户账户使用了HTML界面,XP系统点击用户账户显示参数无效怎么办?WinXp下点击用户账户提示参数无效解决方案...

XP系统开机后,我们通常需要点击用户账户,然后输入账号密码后才能真正进入系统。不过,最近却有一些原因分析:WinXP用户帐户的主界面是一个基于HTML界面的程序,例如“用户帐户”中的“更改用户登录和注销的方式”等菜单&…

mysql5.5客户端_MySQL 5.5/5.6——概述 MySQL 客户端程序

本文内容 mysqlmysqladminmysqlcheckmysqldumpmysqlimportmysqlshowmysqlslap参考资料mysqlmysql 是一个可以输入行的 SQL 外壳,输入行可以编辑。它支持交互和非交互。当使用交互式,查询结果以一个 ASCII 表格式来显示。当使用非交互时(例如,…

mysql timestamp类型比较_MySQL timestamp 类型比较的测试

TIMESTAMP 类型字段与 CHAR 比较:BEGIN#Routine body goes here...DECLARE rdToday CHAR(10) DEFAULT CURDATE();DECLARE rdBegin CHAR(19) DEFAULT CONCAT(rdToday, 00:00:00);DECLARE rdEnd CHAR(19) DEFAULT CONCAT(rdToday, 23:59:59);SELECT mdc_ordertime FROM mz_drugre…

按网络中计算机所处的,按照网络中计算机所处的地位划分,计算机网络包括

按照网络中计算机所处的地位划分,计算机网络包括更多相关问题与横道计划相比,网络计划具有的主要特点有()等。A.网络计划能够明确表达各项工作之间的逻辑关系某新建项目包含多个单项工程,则该项目新增固定资产的计算应以()为对象。A.建设项目…

第一次使用mysql_第一次使用mysql,求帮忙

我用的是navicate,怎么把里面的数据库备份出来放到另外一个服务器里面啊,那个里面也装的是navicate回复讨论(解决方案)没用过navicate,它是一个图形化工具,应该有导入导出的按钮,找找看。没用过navicate,它是一个图形化…

计算机专业的求职信英文作文,计算机专业本科英文求职信范文

计算机专业本科英文求职信范文2017-07-24Dear leaders:Hello!First of all I would like to thank you through my自荐信busy, give me a chance to show themselves.I am a 2004 session of computer science graduates, in纵跨the threshold of the school and the community…

mac 如何配置mysql_MAC下安装与配置MySQL

一 下载MySQL访问MySQL的官网http://www.mysql.com/downloads/ 然后在页面中会看到“MySQL Community Server”下方有一个“download”点击。进入MySQL的下载界面(http://www.mysql.com/downloads/mysql/),如果你是用的Mac OS来访问的话那么就会默认为你选好了Mac O…

计算机专硕专业课难度,计算机考研:20考研的408难度如何?

原标题:计算机考研:20考研的408难度如何?2020年对于计算机考研来说风云突变的一年,去年夏天“专业课改考”一度成为计算机考研小伙伴们之间的热词。不少院校或改变、或增加专业课科目,借此提高专业课难度,增…

windows mysql4.1安装_Windows下,MySql的安装及配置(Install and Config of MySQL in Windows)...

电脑重新换了系统,需要安装MySQL。以前用MySQL的时候,从来没有详细配置过,这次从网上找了些资料,好好的配置了一下MySQL。发现以前见表的时候不能存储中文字段需要各处改的问题,其实在初始配置的时候都能解决掉的。OK&…

barrons ap计算机科学,巴朗ap心理学barrons ap psychology, 5th edition-201-240.pdf

巴朗ap心理学barrons ap psychology, 5th edition-201-240.pdf (C)Arousaltheorydescribesmotivationbyreferringtostagesinourresponsestostress(thegeneraladaptationsyndrome).Achievementmotivationisnotusedtodescribemotivationduetostress.(D)Apersonwithalowoptimumlev…

mysql数据超10亿条,大型主键:超过10亿行MySQL + InnoDB?

I was wondering if InnoDB would be the best way to format the table? The table contains one field, primary key, and the table will get 816k rows a day (est.). This will get very large very quick! Im working on a file storage way (would this be faster)? T…

河南大学计算机与信息工程学院张磊,张磊-食品与生物工程学院

【学术简介】学习经历:2008年9月-2013年6月,江苏大学,机械制造与自动化专业,博士学位。教学及研究经历:2013年7月-至今,江苏大学教师。【主讲课程】硕士研究生:《食品物理学》本科生&#xff1a…

21种mysql_让MySQL飞起来!别小看这21种写SQL的好习惯

前言每一个好习惯都是一笔财富,本文分SQL后悔药、SQL性能优化、SQL规范优雅三个方向,分享写SQL的21个好习惯,谢谢阅读,加油哈~​一、SQL后悔药1、操作delete或者update语句,加个limit在执行删除或者更新语句&#xff0…

vue create()获取ref_vue-next+typescript 初体验

无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服。Vue 2 可是因为 ts 的缘故被喷的很惨,来看看 Vue 3 如何吧。值得注意的是&#xff0c…