
svg
文章平均质量分 78
laputa73
学到老
展开
-
svg webtopo原型2基本功能,缩放
接下来要实现缩放功能,就有了很多的曲折,耗费的时间超出预期。理论上讲,svg已经经过了xm标准化,可以和dhtml溶为一体了,实际上还是有一些差距的。ie 的adobe svgviewer就更不用说了,早停止更新了。但是它的功能还是很不错的,怀念啊Opera上不支持ASV插件的部分功能,例如查看源码、缩放等。当然svg本身是支持缩放的,方法不只一种。可以用viewbox,也可以原创 2012-06-21 09:26:05 · 1509 阅读 · 0 评论 -
svg webtopo原型9- 连线
之前漏发了一篇,补上。svg webtopo的基础原型就这些了。剩下就是曲线、线型的渲染、右键这些。有空再研究了。反正离实用还有差距。用作原型基本够用了。SVG不支持zindex,这个真是和canvas一样,后画的会覆盖先画的。土。。。。处理连线的边缘就比较麻烦了。 电路 <!-- legengd.html 1.显示设备和连线-->原创 2012-07-18 10:51:46 · 1380 阅读 · 0 评论 -
svg webtopo原型5 基本的事件
这个例子是测试svg自身的事件。Svg支持js事件。Js可以包含在svg中(hi1),可以被svg外部引用(hi2),也可以包含在父页面中,或者被父页面外部引用。也可以通过onclick事件简单地添加或者修改。需要注意, group上不能直接被点中,只有它的子元素可以被选中5event.htm图例<!-- legengd.html 1.测试动原创 2012-07-03 09:19:01 · 964 阅读 · 0 评论 -
svg webtopo原型7 设备
设备就是goup+img+text有了img的基础,实现设备的基本显示就相对简单了。不过处理设备的移动,又遇到了难题。直接设置group的坐标是不起作用的,可以通过设置grouo内部元素的坐标来实现启动,不过这种方式太笨拙了。Svg直接提供了位移的变形方法,可以实现移动。不过需要注意,这个方法是相对初始位置的坐标移动。4dev.htm设备 <!-原创 2012-07-03 09:30:05 · 1237 阅读 · 0 评论 -
svg webtopo原型6 事件的鼠标属性
这个是测试事件的属性。例如鼠标按钮,点击位置等。Svg中的时间和页面其他元素是等效的,在IE/ASV中,则需要通过关键字evt,支持的属性有区别IE和opera都支持的属性:Event.buttonEvent.xevent.clientX 图例<!-- legengd.html 1.测试动态创建事件 2.测试事件的属性(和ie的事件对原创 2012-07-03 09:23:19 · 1255 阅读 · 0 评论 -
svg webtopo原型4-图片的动态显示
这个例子是测试设备的显示。主要就是用g来包含图片和文本。这块遇到的困难有点超出想象。开始创建的image对象怎么也无法显示。但是生成的源码另存后是可以显示的。百般不解。最后还是通过分析webtopology的源码发现,Image的连接必须写成image.setAttributeNS("http://www.w3.org/1999/xlink","href",imag原创 2012-07-03 09:11:40 · 2600 阅读 · 1 评论 -
svg webtopo原型8 -拖曳
这回是真正的考验了,要实现设备的鼠标拖曳功能。这个功能理论上比较简单,但是为了兼容性,几乎吐血。实现的方法有很多,这里仅列举一种。核心就在于坐标变换,主要有三点注意针对ie的embed,需要注意设置wmode="Transparent"属性,这样可以不影响页面的鼠标事件。再有就是IE/asv不支持offsetX方法,所以需要自行设法计算鼠标点击位置相对设备的坐标。Ie和op原创 2012-07-05 10:07:15 · 2804 阅读 · 1 评论 -
svg webtopo原型(1)基本功能
考虑到svg也是html5的标准之一,考虑继续抽空把svg的topo原型移植完。阻力:已经有webtopology开源包了,实现的功能基本类似 参照vml模型的顺序,先实现基本的文本和画线功能。之前在前期探索中,已经完成了画矩形、画线的探索,包括ie/opera的兼容,中文处理等。因此基本功能还算顺利。主要实现文本、线条的显示。以及基本的js操作的简单封装。兼容ie+a原创 2012-06-21 09:12:51 · 1775 阅读 · 1 评论 -
svg webtopo原型3 chrome frame
在学习canvas的时候发现了canvasXpress,然后了解了chrome frame.给ie8装上了chrome frame.测试一下chrome的情况。试了一下,chrome frame对本地页面无效,对myie无效,只有对服务器端且添加了的页面才有效因此原型的兼容性测试就包含了ie8,opera和chrome frame. 发现chrome在对embed的处理有些原创 2012-06-21 09:34:06 · 1175 阅读 · 0 评论 -
raphael/rgraph介绍
h5火了以后,svg/vml基本很少提了。不过后者在老浏览器兼容方面,还有一些长处。-------------------------------一、raphael是什么??Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础。Raphael 目前支持的浏览器包括: Chrome转载 2017-10-23 09:06:04 · 2989 阅读 · 0 评论