svg webtopo原型(1)基本功能
来源:互联网 发布:java websocket心跳包 编辑:程序博客网 时间:2024/05/22 03:34
考虑到svg也是html5的标准之一,考虑继续抽空把svg的topo原型移植完。
阻力:已经有webtopology开源包了,实现的功能基本类似
参照vml模型的顺序,先实现基本的文本和画线功能。
之前在前期探索中,已经完成了画矩形、画线的探索,包括ie/opera的兼容,中文处理等。因此基本功能还算顺利。
主要实现文本、线条的显示。
以及基本的js操作的简单封装。
兼容ie+asv和opera。
其中ie使用embed,opera动态创建。
注意:在opera上,如果不指定style,默认的线是看不见的。
测试页面1basic.htm
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>图例</title><!-- legengd.html 1.显示文字、线 2.兼容ie和opera.ie用embed(empty.svg,只包含一个组g1), opera用create--></head><script type="text/javascript" language="javascript" src=".\js\svg.js"></script><script></script><body bgcolor="#ffffff"><div id="divsvg"><embed name="svg1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="empty.svg" height=10 width=10 type="image/svg+xml"></div></body><script>var svg;var plat;function show(){ //var svg; //ie使用embed方式预先加载svg svg=initSVG(200,200,1); var svgdoc; svgdoc=getSVGDocument(svg); plat=getrootg(svg,svgdoc); //位置为相对位置 //超出范围会被截掉 //生成一行文本 curentStyle="stroke:black;fill:white"; createText(svgdoc,5,20,"电路带宽图例",curentStyle); //生成一个矩形 curentStyle="stroke:black;fill:green"; createrect(svgdoc,100,100,3,curentStyle); //生成一条线 curentStyle="stroke:black;fill:none;stroke-width:1"; createline(svgdoc,0,0,200,0,curentStyle); curentStyle="stroke:red;fill:none;stroke-width:3"; createline(svgdoc,0,0,0,200,curentStyle); curentStyle="stroke:blue;fill:none;stroke-width:5"; createline(svgdoc,0,0,200,200,curentStyle); curentStyle="stroke:#3366ff;fill:red;stroke-width:5"; createline(svgdoc,100,0,100,200,curentStyle); }</script></html>
空的svg,只包含一个g1,作为底层。同时设置编码,可以支持中文显示
empty.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="g1"></g></svg>
基本封装的svg.js
http://download.csdn.net/detail/luqin1988/5005164
以研究出很多模型,包括跨浏览器移动,缩放,3D,滤镜特效,动画,弹球,绘图,以及多款SVG游戏,如需要请留言。
- svg webtopo原型(1)基本功能
- svg webtopo原型(1)基本功能
- svg webtopo原型2基本功能,缩放
- svg webtopo原型7 设备
- svg webtopo原型8 -拖曳
- svg webtopo原型9- 连线
- svg webtopo原型3 chrome frame
- svg webtopo原型5 基本的事件
- svg webtopo原型4-图片的动态显示
- svg webtopo原型6 事件的鼠标属性
- 基于SVG技术实现WebGIS的基本功能(1)
- 基于SVG技术实现WebGIS的基本功能(2)
- 基于SVG技术实现WebGIS的基本功能
- 浅谈Slick(1)- 基本功能描述
- ArcGISEngine二次开发(1):系统基本功能
- SVG学习笔记(1)
- SVG学习笔记(1)
- RaceWeb介绍(1):基本功能
- Kickstart无人职守安装RHEL5
- Clobbering在wikipedia上的定义
- make里的wildcard和patsubst
- 导出Excel技术总结(1)
- 需要忽略的一些信号
- svg webtopo原型(1)基本功能
- 汉字编码
- chm文件打开提示mk@MSITStore***一种解决方法
- php 下载文件
- url 特殊字符处理
- [转]人生的三十五个好习惯
- 新站如何进行seo优化
- usaco:Broken Necklace
- Myeclipse——Spring 从入门到精通一 Spring简单开发步骤