- 浏览: 264798 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
chenshi011:
无意中,看到LZ博客感觉多门语言都精通啊,尤其还做GIS啊,敢 ...
WorldWind学习笔记[一] -
supperman:
不能用~!
windows下Nginx启动、关闭、重启bat工具 -
join_lin:
攒。。
spket.config.xml -
awaterway:
可以用,多谢
IntelliJ IDEA 9.0 注册机/注册码/keygen/破解版 -
qq3553174:
你好,我刚刚接触仿真地图。请问如果要将世界风嵌入AIR程序中如 ...
WorldWind学习笔记[一]
注:其中所有的left:top:都是针对图左上角的,比如圆,他的左上角应该是以圆为中心的矩形的左上角
1.line(直线)
a.示例:
b.专用属性:from 起点坐标;
to 终点坐标
2.Oval(圆)
a.示例:
</html>b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定
3.rect(矩形)
a.示例:
b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例:
b.专用属性:arcsize 描述圆矩形四角的弧度值,0-0.5,默认值0.05
c.其他说明:其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例:
b.专用属性:startangle 圆弧的起点缺口,取值范围-360-360,默认值-180;
endangle 圆弧的终点缺口,取值范围-360-360,默认值null(0)
c.其他说明:其高宽主要由style中的width和height决定
6.polyline(多边形)
a.示例:
b.专用属性:points 各折点坐标,上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点
7.curve(曲线)
b.专用属性:from 起点
to 终点
control1 曲线的第一个曲度
control2 曲线的第二个曲度
c.其他说明:control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例:
b.专用属性:path 路径(m 起点、 l 画直线、 c 画曲线、x 曲线自动闭合、 e 结束)
coordsize 比例(实际宽:width*100/coordsize第一个值;实际高:height*100/coordsize第二个值)
type 引用模板的名称
9.shapetype(模板)
a.示例:
b.其他说明:shapetype是专门用来定义形状摸版的(不可见),而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形(可见)。
10.background(背景)
a.示例:
11.group(容器)
a.示例:
b.其他说明:当使用group后,容器内图形的left、top、width、height等值都是相对group的值。
五、二级标记
二级标记可以看作是对有限的属性进行扩展,就像CSS和HTML的关系一样,利用它我们可以做出更漂亮的图画出来,如上边background(背景)中就使用了fill二级标记,下边我们再来看下如何利用二级标记画一条带箭头的直线:
例子中的stroke即为二级标记,它可以用来设置边框样式,除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、 textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性,我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单,直接嵌套于图形标签中即可。
1.line(直线)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/> </body> </html>
b.专用属性:from 起点坐标;
to 终点坐标
2.Oval(圆)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>创建一个宽400高400边框为红色填充为绿色的圆</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/> </body>
</html>b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定
3.rect(矩形)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>创建一个宽100高100的矩形</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/> </body> </html>
b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>创建一个圆角矩形</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/> </body> </html>
b.专用属性:arcsize 描述圆矩形四角的弧度值,0-0.5,默认值0.05
c.其他说明:其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>创建一个圆弧</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/> </body> </html>
b.专用属性:startangle 圆弧的起点缺口,取值范围-360-360,默认值-180;
endangle 圆弧的终点缺口,取值范围-360-360,默认值null(0)
c.其他说明:其高宽主要由style中的width和height决定
6.polyline(多边形)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>创建一个多边形</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/> </body> </html>
b.专用属性:points 各折点坐标,上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点
7.curve(曲线)
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>创建一条曲线</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/> </body> </html>
b.专用属性:from 起点
to 终点
control1 曲线的第一个曲度
control2 曲线的第二个曲度
c.其他说明:control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>创建任意曲线</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/> <v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/> <v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/> <v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/> <v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/> </body> </html>
b.专用属性:path 路径(m 起点、 l 画直线、 c 画曲线、x 曲线自动闭合、 e 结束)
coordsize 比例(实际宽:width*100/coordsize第一个值;实际高:height*100/coordsize第二个值)
type 引用模板的名称
9.shapetype(模板)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>模板使用示例</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow"> <v:Path v="m0,0 l30,-30,60,0,0,0 e"/> </v:ShapeType> <v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/> <v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/> <v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/> </body> </html>
b.其他说明:shapetype是专门用来定义形状摸版的(不可见),而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形(可见)。
10.background(背景)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>背景示例</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:background fillcolor="white"> <v:fill angle=50 type='gradient' color2="yellow"/> </v:background> </body> </html>
11.group(容器)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>容器示例</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100"> <v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/> <v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/> <v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/> <v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/> </v:group> <v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100"> <v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/> <v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/> <v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/> <v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/> </v:group> <v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100"> <v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/> <v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/> <v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/> <v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/> </v:group> </body> </html>
b.其他说明:当使用group后,容器内图形的left、top、width、height等值都是相对group的值。
五、二级标记
二级标记可以看作是对有限的属性进行扩展,就像CSS和HTML的关系一样,利用它我们可以做出更漂亮的图画出来,如上边background(背景)中就使用了fill二级标记,下边我们再来看下如何利用二级标记画一条带箭头的直线:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>二级标记示例</title> <style> v\:* { behavior: url(#default#VML);} </style> </head> <body> <v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px"> <v:Stroke dashstyle="shortdot" endarrow='classic'/> </v:line> </body> </html>
例子中的stroke即为二级标记,它可以用来设置边框样式,除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、 textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性,我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单,直接嵌套于图形标签中即可。
发表评论
-
nodejs http请求
2015-09-29 20:52 834var http = require('http'),qs = ... -
HashMap
2014-01-25 23:03 714function HashMap() { /** ... -
nodejs 文件系统(fs) 之读写文件
2014-01-25 23:01 1119var fs = require("fs" ... -
让破ie6支持png
2013-11-06 18:30 837用原生js来让破ie6支持png var arVers ... -
Nodejs Note
2013-10-31 19:23 0npm install -g express ... -
nodejs中使用velocity
2013-10-24 21:09 2912学习nodejs框架发现都是jade,不复杂,也不想学,如果会 ... -
Windows和CentOS下安装node和NPM和express
2013-10-18 12:28 2030第一步:下载node.exe官方Windows版程序: ... -
jQuery的小知识
2012-10-21 22:10 956//单击弹框 $(document).ready(func ... -
JavaScript动态添加CSS
2011-12-19 00:28 788function addCssByStyle(cssStrin ... -
js中escape,encodeURI,encodeURIComponent三个函数的区别
2010-06-19 22:57 939js对文字进行编码涉及3个函数:escape,encodeUR ... -
JsDoc Toolkit制作 javascript 文档用
2010-03-25 19:55 1660下载 使用: java -jar jsrun.jar app ... -
JavaScript点在多边内
2010-01-20 18:58 978//定义点的结构体 function point(){ ... -
贪吃蛇游戏
2009-12-09 18:57 935<!DOCTYPE html PUBLIC " ... -
Ajax不用XMLRequest的Ajax使用方法
2009-11-17 16:36 1175<iframe> </iframe> -
最短路径A*算法实现(Javascript)
2009-11-14 00:00 1628<html><head><tit ... -
JavaScript跨域问题
2009-11-08 23:31 959JavaScript用得越来越多了,有的在head里添加< ... -
学习JavaScript闭包
2009-11-05 17:52 779闭包(closure)是Javascript语言的一个难点,也 ... -
JavaScript中function
2009-11-04 20:41 1624/* *1.函数定义 * 函数定义最常用的方法 ... -
全面理解javascript的caller,callee,call,apply概念
2009-05-03 13:16 927在提到上述的概念之前,首先想说说javascript中函数 ...
相关推荐
VML 画图 统计图、 柱状图、 饼图、 折线图
在web页面通过vml画图,如显示cpu使用率,内存使用率等等,动态绘制曲线和图形
VML画图,VML手册
基于VML与SVG的矢量图形构架.pdf
vml在线画图用例,含Flashvml2及Flashvml3的用例。 什么是vml? VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的,在我认为, VML其实是...
将输出在页面上的vml图 导出到excel 中的矢量图 可在excel中编辑
NULL 博文链接:https://jxdwuao.iteye.com/blog/487942
在线VML画图工具flashvml2&2
vml类的js,方便使用vml实现画图 js源代码,可以在任何平台上使用,简单,方便
VML语言学习资料,VML语言学习画图,可以详细的学习
使用vml技术在网页上画图,经典基础教材。
用vml画饼状图用vml画饼状图用vml画饼状图用vml画饼状图
利用VML标记语言画图、动画制作,一些相关代码的实例
vml,vml画图,呵呵,vml报表vml,vml画图,呵呵,vml报表vml,vml画图,呵呵,vml报表vml,vml画图,呵呵,vml报表vml,vml画图,呵呵,vml报表vml,vml画图,呵呵,vml报表
VML图像画版,用VML画图,生成VML代码
vml画图 实现VML画圆、画线、画矩形的操作 封转的挺好啊
学习VML的好材料 程序中只有2个HTM文件,是个学习VML的好材料!
VML的基本概念,Shape对象与VML坐标系,Line,Polyline(线)对象,Rect,RoundRect(矩形)对象,Oval(圆)对象,Image(图像)对象,Group容器,ShapeType给VML制作模版,VML编程技巧,VML典型例子 等等
vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml...