用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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/496361.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

技术力量 | 社会计算与计算社会: 智慧社会的基础与必然

技术力量 | 社会计算与计算社会: 智慧社会的基础与必然

来源&#xff1a;智慧城市决策参考摘要&#xff1a;基于社会计算&#xff0c;智慧社会可充分利用开放流动的大数据资源, 综合协调人、地、事、物和组织等各种要素, 形成信息对称、权利对等、扁平化组织的社会结构, 推动传统社会管理模式向分布式、集约化、信息化、智能化、全响…
阅读更多...
php关闭当前页_php如何直接关闭页面注销SESSION

php关闭当前页_php如何直接关闭页面注销SESSION

php如何直接关闭页面注销SESSION发布时间&#xff1a;2020-07-09 09:03:06来源&#xff1a;亿速云阅读&#xff1a;100作者&#xff1a;Leah这篇文章将为大家详细讲解有关php如何直接关闭页面注销SESSION&#xff0c;文章内容质量较高&#xff0c;因此小编分享给大家做个参考&a…
阅读更多...
ELF格式文件符号表全解析及readelf命令使用方法

ELF格式文件符号表全解析及readelf命令使用方法

From&#xff1a;http://blog.csdn.net/yasi_xi/article/details/45197583 readelf命令&#xff1a;http://man.linuxde.net/readelf ELF文件格式解析&#xff1a;https://www.2cto.com/kf/201605/511370.html ELF文件格式解析&#xff1a;http://blog.csdn.net/earbao/arti…
阅读更多...
Spring Data JPA 从入门到精通~QueryByExampleExecutor的使用

Spring Data JPA 从入门到精通~QueryByExampleExecutor的使用

QueryByExampleExecutor 的使用 按示例查询&#xff08;QBE&#xff09;是一种用户友好的查询技术&#xff0c;具有简单的接口&#xff0c;它允许动态查询创建&#xff0c;并且不需要编写包含字段名称的查询。从 UML 图中&#xff0c;可以看出继承 JpaRepository 接口后&#…
阅读更多...
老赵书托（1）：写在前面

老赵书托（1）：写在前面

最近我思考和总结地越来越多&#xff0c;感觉也是时候把自己许多年来的经验进行一番总结和整理。谈基础与能力的时候&#xff0c;我把人脑比喻为“存储器”&#xff0c;里面存放了“知识”和“能力”等信息。而思考和总结便可以看作对这些信息的索引进行整理&#xff0c;好比数…
阅读更多...
谷歌大脑提出对智能体进行「正向-反向」强化学习训练，加速训练过程

谷歌大脑提出对智能体进行「正向-反向」强化学习训练，加速训练过程

原文来源&#xff1a;arXiv作者&#xff1a;Ashley D. Edwards、Laura Downs、James C. Davidson「雷克世界」编译&#xff1a;嗯~是阿童木呀、KABUDA、EVA在强化学习问题中&#xff0c;关于任务目标的制定&#xff0c;往往需要开发人员花费很多的精力&#xff0c;在本文中&…
阅读更多...
php 元_PHP 享元模式 - 304158的个人空间 - OSCHINA - 中文开源技术交流社区

php 元_PHP 享元模式 - 304158的个人空间 - OSCHINA - 中文开源技术交流社区

/*** 享元模式* 共享子系统* 抽象子系统实现接口* 根据key储存对应的子系统实例*//*** Interface ServiceIO* 共享子系统抽象接口*/interface ServiceIO {public function GetServiceName();}/*** Class WebService* 子系统 实例*/class WebService implements ServiceIO {priv…
阅读更多...
Linux二进制实用工具Binutils工具集解析()

Linux二进制实用工具Binutils工具集解析()

From&#xff1a;http://blog.csdn.net/zqixiao_09/article/details/50783007 GNU Binutils&#xff1a;http://www.gnu.org/software/binutils/ GNU Binutils详解&#xff1a;http://www.crifan.com/files/doc/docbook/binutils_intro/release/html/binutils_intro.html 交叉…
阅读更多...
Spring Data JPA 从入门到精通~JpaSpecificationExecutor的使用方法

Spring Data JPA 从入门到精通~JpaSpecificationExecutor的使用方法

JpaSpecificationExecutor 源码和 API 我们也可以通过 idea 工具详细看其用法和实现类&#xff0c;JpaSpecificationExecutor 是 Repository 要继承的接口&#xff0c;而 SimpleJpaRepository 是其默认实现。而通过源码来看其提供的 API 比较简单、明了&#xff0c;有如下几个方…
阅读更多...
Error loading native library: libnjni9.so.的解决办法

Error loading native library: libnjni9.so.的解决办法

Error loading native library: libnjni9.so.的解决办法 $ netcaError loading native library: libnjni9.so.java.lang.UnsatisfiedLinkError: jniGetOracleHomeat oracle.net.common.NetGetEnv.getOracleHome(NetGetEnv.java)at oracle.net.ca.CmdlineArgs.setOraArgs(Cmdlin…
阅读更多...
谷歌人工智能野心：从“下围棋”开始走向商用赚钱

谷歌人工智能野心：从“下围棋”开始走向商用赚钱

来源&#xff1a;腾讯科技作为人工智能研发的领先企业&#xff0c;谷歌已经开始从技术研发走向了产品商用&#xff0c;创造营收成为一个新目标。谷歌在人工智能领域进行研发的时间比较长&#xff0c;陆续收购了优秀的专业公司。鉴于此&#xff0c;谷歌获得了先发优势&#xff0…
阅读更多...
浅谈弹性页面布局

浅谈弹性页面布局

今天在博客园看了冰极峰先生的《弹性流体布局》文章&#xff0c;他具体的讲解了弹性布局是用到min-width这个属性,但这个属性在IE6下不受支持,因此加入了老外的一个JS脚本,这个脚本让IE6也能支持最小,最大宽度(高度)四个属性.弹性布局其实最难的还不是布局&#xff0c;而是里面…
阅读更多...
Spring Data JPA 从入门到精通~Criteria概念的简单介绍

Spring Data JPA 从入门到精通~Criteria概念的简单介绍

&#xff08;1&#xff09;Root<T> root 代表了可以查询和操作的实体对象的根&#xff0c;如果将实体对象比喻成表名&#xff0c;那 root 里面就是这张表里面的字段&#xff0c;这不过是 JPQL 的实体字段而已。通过里面的 Path<Y> get(String attributeName)&…
阅读更多...
微信php实例代码_php微信公众平台示例代码分析（二）

微信php实例代码_php微信公众平台示例代码分析（二）

一、摘要微信公众平台提供了一个简单的php示例代码&#xff0c;在做进一步开发之前&#xff0c;我们有必要将其详细了解一下。二、获取代码三、分析代码完整代码如下&#xff1a;/*** wechat php test*///define your tokendefine("TOKEN", "weixin");$wec…
阅读更多...
Linux异步之信号(signal)机制分析

Linux异步之信号(signal)机制分析

From&#xff1a;http://www.cnblogs.com/hoys/archive/2012/08/19/2646377.html From&#xff1a;http://kenby.iteye.com/blog/1173862 Linux下的信号详解及捕捉信号&#xff1a;http://www.jb51.net/article/90695.htm linux信号详解&#xff1a;http://blog.csdn.net/f…
阅读更多...
DeepMind集成AI智能体架构「MERLIN」：基于目标导向智能体中的无监督预测记忆

DeepMind集成AI智能体架构「MERLIN」：基于目标导向智能体中的无监督预测记忆

来源&#xff1a;arXiv摘要&#xff1a;在自然界中&#xff0c;动物往往会执行目标导向的行为&#xff0c;尽管它们的传感器的范围有限。作者&#xff1a;Greg Wayne、 Chia-Chun Hung、David Amos、Mehdi Mirza、Arun Ahuja、Agnieszka Grabska-Barwinska、Jack Rae、Piotr Mi…
阅读更多...
Spring Data JPA 从入门到精通~JpaSpecificationExecutor示例

Spring Data JPA 从入门到精通~JpaSpecificationExecutor示例

新建两个实体 Entity(name "UserInfoEntity") Table(name "user_info", schema "test") public class UserInfoEntity implements Serializable {IdColumn(name "id", nullable false)private Integer id;Column(name "f…
阅读更多...
手机反编译java源码,Android反编译(一)之反编译JAVA源码

手机反编译java源码,Android反编译(一)之反编译JAVA源码

Android反编译(一)之反编译JAVA源码[目录]1、工具2、反编译步骤步骤1&#xff1a;把apk文件后缀名改为.zip步骤2&#xff1a;解压zip包得到classes.dex步骤3&#xff1a;将Dex反编译为Jar包(工具&#xff1a;dex2jar)命令: CMD>dex2jar.bat classes.dex步骤4&#xff1a;用j…
阅读更多...
一文详解计算机视觉的广泛应用：网络压缩、视觉问答、可视化、风格迁移等

一文详解计算机视觉的广泛应用：网络压缩、视觉问答、可视化、风格迁移等

作者 | 张皓&#xff08;南京大学&#xff09;来源&#xff1a;人工智能头条丨公众号引言深度学习目前已成为发展最快、最令人兴奋的机器学习领域之一&#xff0c;许多卓有建树的论文已经发表&#xff0c;而且已有很多高质量的开源深度学习框架可供使用。然而&#xff0c;论文通…
阅读更多...
[转]暴牛！全国女生录用老公统一考试试卷

[转]暴牛！全国女生录用老公统一考试试卷

全国女生录老公统一考试试卷①本试卷为全国女生招录老公统一考试试卷&#xff0c;各省(自治区、直辖市&#xff0c;计划单列市&#xff0c;不含港、澳、台地区)均须使用此卷&#xff0c;不得自行命题。②由于法律未规定同性婚姻合法&#xff0c;故报名参加考试者均须为男性。若…
阅读更多...
最新文章

Copyright @ 2022~2023