用VML画图(一些基本的矢量图)(转)
用VML画图(一些基本的矢量图)
注：其中所有的left:top:都是针对图左上角的，比如圆，他的左上角应该是以圆为中心的矩形的左上角
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(背景图片)等二级标记。二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可。
转载于:https://www.cnblogs.com/jole/archive/2009/05/03/1448050.html
用VML画图(一些基本的矢量图)(转)相关推荐
- 像素和分辨率的理解、位图矢量图的区别
转载:显示分辨率和图像分辨率差别_qq932827310的博客-CSDN博客_显示分辨率和图像分辨率的区别 显示器的分辨率是指显示器的屏幕的像素组成的数量(指液晶显示器),如21.5英寸的显示器的分辨 ...
- PS学习记录-矢量图和位图
目录 概念说明 矢量图 位图 常见的格式类型 矢量图文件格式举例: 位图(标量图)文件格式举例: 两种图片的适用范围 两种图片的核心差异 1.缩放保真 2.色彩不同 3.格式 4.常用绘图工具 5.占 ...
- Visio画图导出PDF矢量图并裁剪，只需有visio就行，简单好操作
Visio画图导出PDF矢量图并裁剪,只需有visio就行,简单好操作 Visio是专业画图软件 Visio软件里面导出PDF文件, 然后进去PDF裁剪网站 上传需要裁剪的PDF, 点"up ...
- html矢量图 SVG VML 介绍
观看者:想了解html矢量图知识的同学 目标:了解html矢量图知识,svg和vml 兼容方案. 实现方式:代码及相关文字解释. 最近web项目需要一些流程图的支持,于是研究了一下这部分东西,觉得很好 ...
- 论文画图-如何用Matlab做矢量图？PPT转PDF方法？
论文画图 Q:如何用Matlab做矢量图? A:介绍一种方法:在Matlab画好图后,在Figure里面另存为emf格式,粘贴到PPT中,然后转成PDF插入论文,可以保证是矢量图. Step 1: 在 ...
- 计算机网络多媒体图像矢量图,13多媒体信息处理——图像处理(一)
信息技术基础 教案(十三) 教学主题 适用年级 教 材 分 析 学 习 目 标 多媒体信息处理--图像处理(一) 高一年级 教学课时 1 课时 图像处理是多媒体素材采集和应用中的一个重要组成部分,要想 ...
- 使用ABAP绘制可伸缩矢量图
Jerry去年的文章 动手使用ABAP Channel开发一些小工具,提升日常工作效率 里曾经介绍过一些用ABAP实现的可供娱乐的小程序,比如用古老的HPGL接口在SAPGUI里绘图: 关于如何用SA ...
- 科研论文绘图：ppt， word，latex，python matplotlib绘图 ，矢量图，高清图，放大不失真
目录 1. 用PPT绘图,保存为高清图片,不推荐使用,方法链接 2. 用PPT绘图,保存为emf矢量图,适合插入word,方法链接 3. 用PPT画图,保存为eps文件,适合插入latex,方法链接 ...
- MATLAB绘制雷达图并导出矢量图到Visio编辑(论文用图)
MATLAB绘制雷达图并导出矢量图到Visio编辑(论文用图) 前言: matlab绘制雷达图 雷达图(Radar Chart)又被叫做蜘蛛网图(Spider Chart),适用于显示三个或更多的 ...
最新文章
- 水利水电工程管理与实务电子版习题_水利水电工程管理与实务复习题集.pdf
- ＜力扣＞-----利用哈希表来判断是否存在重复元素
- wxWidgets：wxSashEvent类用法
- script标签中的async和defer
- Android Studio 下使用git -- 个人，本地版本控制
- python迭代器好处_python迭代器
- 95-150-080-源码-Sink-StreamingFileSinkBucketingSink
- 创建查看mysql8.0数据库_创建和选择数据库
- 05 - 雷达的发展与应用
- html5 调速 视频播放器,7款很棒的 HTML5 视频播放器
- 使用Windows Live Writer WLW向Joomla网站发帖
- 戴维斯分校 计算机硕士,加州大学戴维斯分校计算机研究生录取条件是什么?
- tomcat 配置域名和ssl证书
- centos7 安装/卸载wps 无法启动 字体缺失(亲测有效)
- WPF中使用Winform控件
- Windows下载安装Cytoscape3.8.2
- 直播、点播系统开发项目总结（本地视频、抓包视频、直播推流、网络直播、平台搭建等相关问题点记录）
- EJBCA证书平台-管理员及用户使用指南
- java内省的意思,java内省机制 + 内省是什么 + 内省实现方式 + 和反射的区别
- mysql ASCII '\0' appeared in statement
热门文章
- LeetCode 2070. 每一个查询的最大美丽值（离线查询+排序+优先队列）
- MapReduce既是编程模型又是计算框架
- LeetCode 1642. 可以到达的最远建筑（二分查找 / 优先队列贪心）
- LeetCode MySQL 1322. 广告效果
- LeetCode 973. 最接近原点的 K 个点（排序/优先队列/快排）
- LeetCode 1334. 阈值距离内邻居最少的城市（最短路径Dijkstra）
- C++ Primer 第11章 泛型算法 学习总结
- 美国在理论计算机科学的研究重视,清华麻省理工香港中文联建理论计算机科学研究中心...
- mysql snowflake_雪花算法-snowflake
- python冒泡算法_python_冒泡算法