文章分类 -  raphael-svg绘图

摘要:这一篇文章中我们主要了解一下拖拽和缩放的功能。 1.拖拽的功能 拖拽事实上只是div+鼠标的操作。 原理:1.需要两个嵌套的div 2.需要拖拽的一个div永远保持在最上面。 3.当鼠标按下的时候,记录当前鼠标所在屏幕的位置 4.当鼠标按下并移动的时候,计算移动的距离,并且将div绝对定位。 5.当 阅读全文
posted @ 2017-01-06 13:52 梅花香自苦寒来_rainy 阅读(80) 评论(0) 推荐(0)
摘要:Paper.text(x, y, text);绘制的文字为文本文字,非矢量 Paper.print(x, y, string, font, [size], [origin], [letter_spacing]) 绘制的适量字体 ,需要注意的是该文本的标准是 cufon。 Paper.text(x, 阅读全文
posted @ 2017-01-06 11:45 梅花香自苦寒来_rainy 阅读(413) 评论(0) 推荐(0)
摘要:从前面文章中,介绍了svg的用途,这篇文章将讲解svg开发方法。 因为项目是要求绘制重庆的路网信息图,并统计路网数据,进行动画展示,所以使用原生的svg会产生大量代码,过渡渲染,进而降低界面打开的速度,因而我们选择了raphael 拉斐尔javascript库作为我们的开发插件,所以下面我们学习的s 阅读全文
posted @ 2017-01-05 17:33 梅花香自苦寒来_rainy 阅读(1369) 评论(0) 推荐(0)
摘要:前一篇文章简述了svg是什么,svg与其他图像的对比,也讲述了svg与canva的对比,下面,我们将着重了解一下,我们为什么要学习svg,svg能为我们做什么? 参考资料:http://www.ibm.com/developerworks/cn/web/wa-scalable/ svg的应用: 1. 阅读全文
posted @ 2017-01-05 16:39 梅花香自苦寒来_rainy 阅读(1014) 评论(0) 推荐(0)
摘要:1.参考资料 教学篇:http://www.jianshu.com/p/ad139e13bbd0 应用篇中文地址:http://dishuostec.sinaapp.com/javascript/raphael/ 应用篇英文地址:http://www.irunmywebsite.com/raphae 阅读全文
posted @ 2017-01-05 15:54 梅花香自苦寒来_rainy 阅读(131) 评论(0) 推荐(0)