html5 svg组态图,绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起,让Canvas可享用到现有丰富的SVG素材,并不失SVG矢量无级缩放的特点。
《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果,但你也可以直接拖拽SVG格式的图片进行显示,只不过普通图片的格式数据为data:image/png类型,而SVG格式的数据类型为data:image/svg+xml的类型,下图为该HT for Web拓扑图拖拽入SVG格式图片的运行效果:
以下一段小例子,展示了加载一个SVG图片后,分为七个基本进行缩放绘制的效果,可看出Canvas绘制SVG可保持其矢量不失真的特性
function draw(){
var img = new Image();
img.src = 'chart.svg';
document.body.appendChild(img);
img.onload = function(){
var canvas = document.getElementById('canvas');
var g = canvas.getContext('2d');
var width = img.clientWidth * 1.5;
var height = img.clientHeight * 1.5;
var x = 2;
var y = 2;
for(var i=0; i<7; i++){
g.drawImage(img, x, y, width, height);
x += width + 2;
width /= 2;
height /= 2;
}
};
}
提到Canvas和SVG的融合,我们将采用HT for Web的矢量功能展示一个手机电池充电进度的实例,整个手机电池的静态部分我们通过加载一个简单的SVG素材实现,而充电动态变化的部分,我们采用一个渐进色的HT矩形元素来描述,该矩形的长度通过HT矢量数据动态绑定功能,根据充电进度的百分比换算成长度信息,最后通过定时器模拟数据变化达到动态充电的效果:
ht.Default.setImage('battery', {
width: 64,
height: 64,
comps: [
{
type: 'rect',
rect: {
func: function(data){
return [5, 25, 50*data.a('percent'), 16]
}
},
background: 'red',
gradient: 'spread.vertical'
},
{
type: 'image',
name: 'battery.svg',
relative: true,
rect: [0, 0, 1, 1]
}
]
});
var node = new ht.Node();
node.setPosition(80, 150);
node.setImage('battery');
node.s('image.stretch', 'uniform');
node.a('percent', 0);
dataModel.add(node);
graphView.setEditable(true);
setInterval(function(){
percent = node.a('percent') + 0.02;
if(percent > 1){
percent = 0;
}
node.a('percent', percent);
}, 16);
SVG绘制到Canvas还有一种特殊的应用场景,就是将HTML元素通过SVG的foreignObject特性描述在SVG中,然后Canvas绘制SVG时,即可把foreignObject描述的HTML内容绘制到Canvas上,可参见https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas 的实例,其中采用了Blob的方式设置img的src作为URL是比较怪异的技术点,但从上文提到其实我们可以将整个SVG内容转换成data:image/svg+xml;的base64内容即可作为src的url传入,因此我对该例子做了改造,采用btoa(data)把svg内容转换成base64的方式设置img.src,这样方式更容易理解,例子代码和效果如下:http://v.youku.com/v_show/id_XODg0MTU4NjEy.html
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = 。。。;
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
img.src = 'data:image/svg+xml;base64,' + btoa(data);
}
html5 svg组态图,绘制SVG内容到Canvas的HTML5应用相关推荐
- canvas 元素绑定事件_绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...
- 基于html5的矢量图绘制方法研究,HTML5程序设计-绘制可伸缩矢量图形SVG.pdf
HTML5基础教程(第2版) 授课教师: 职务: 第7章 绘制可伸缩矢量图形(SVG ) 课程描述 SVG是Scalable Vector Graphics的缩写,即可伸缩矢量 图形,它使用XML格式 ...
- 基于html5的矢量图绘制方法研究,基于HTML5和WebGL的三维地形可视化方法研究
摘要: 近年来地理信息的需求急速增长,越来越多的GIS应用走向网页化.移动化.WebGIS应用也在逐渐从二维层面向三维层面发展,三维地形可视化是三维GIS的基础,基于Web的三维地形可视化也成为新的研 ...
- 基于html5的矢量图绘制方法研究,基于HTML5Canvas技术的在线图像处理方法的研究...
摘要: 本文主要对基于HTML5Canvas技术的在线图像处理方法进行探讨和研究. 随着网页技术的飞速发展,在线的应用程序越来越受到用户的欢迎,很多业余摄影爱好者开始采用在线的图像处理软件来对照片进行 ...
- Javascript 思维导图 绘制基础内容(值得一看)
来源于:http://www.cnblogs.com/coco1s/p/3953653.html javascript变量 javascript运算符 javascript数组 javascript流 ...
- Android使用SVG矢量图打造酷炫动效!
一个真正酷炫的动效往往让人虎躯一震,话不多说,咱们先瞅瞅效果: 如果你想看 GAStudio Github主页,请戳这里: 如果你想看 GAStudio更多技术文章,请戳这里: QQ技术交流群:277 ...
- Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果
一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...
- 怎么用MindManager将导图导出为HTML5交互式导图
Mindmanager思维导图软件有着友好的用户界面以及丰富的思维导图制作功能.再搭配与Microsoft 软件的无缝集成功能,使得这款思维导图软件越来越受到职场人士的喜爱. 不仅是作为制作思维导图的 ...
- 疯狂html5+css3+javascript讲义 pdf_成为一名优秀的HTML5前端工程师需要掌握哪些技能?...
在招聘网站上搜索可以发现,优秀的HTML5前端工程师薪资轻松可以过万,成为企业争抢的对象,那么想成为一名优秀的HTML5前端工程师需要学习哪些内容呢? 一般来说,HTML5学习内容主要有以下三大板块: ...
最新文章
- M1芯片搞数据科学好使吗?5种基准测试给你答案
- java b kb mb gb 转换_java 上传文件大小转换为 GB/MB/KB/B
- NOI 2015 滞后赛解题报告
- 通过js让页面中的元素上下居中的写法
- 1022 D进制的A+B (20 分)(c语言)
- Java设计模式之策略设计模式
- grep -q用于if逻辑判断
- 1.5 编程基础之循环控制 35 求出e的值
- (第十二章)创建数据表索引
- Vue3学习之第三节:setup()中使用计算属性
- 推荐 7 个神级 Java 开源项目
- 面试资料-计算机网络
- MySQL特异功能之:Impossible WHERE noticed after reading const tables
- python判断火车票座位_用Python实现火车票查询(含票价版)
- 剑指offer: 数组中数字出现的次数(曾在滴滴校招面试中遇到过)、leetcode消失的数字
- html5 3d场景设计,基于 HTML5 WebGL 的加油站 3D 可视化监控
- activemq使用详解
- 推荐系统详解(三)近邻推荐
- 摄影测量航带设计程序
- 大型交易系统之高并发
热门文章
- WeihanLi.Npoi 导出支持自定义列内容啦
- Abp v0.18.0 新版本: MVC Module 启动模板
- ASP.NET Core 通过 Microsoft.DotNet.Watcher.Tools 实现热部署
- 收起.NET程序的dll来
- 美好生活从撸好代码开始
- [译]RabbitMQ教程C#版 - 远程过程调用(RPC)
- .Net Core 全局配置读取管理方法 ConfigurationManager
- 个性化配置你的SQL Server on Linux
- 微软Project Springfield团队的F#使用心得
- 【Envi风暴】ENVI中求两幅遥感影像的相关性(相关系数)