vml

原创 2004年08月26日 06:38:00
饼图(Pie):Pie图在 VML 是个比较头痛的问题,可能是我的数学不太好的缘故吧!因为 VML 没有提供直接的 Pie (扇形) 语句,现在要画饼图的话只能自己计算坐标了,这要用到一些三角函数的知识。还要注意的是,JavaScript 的三角函都是以弧度为单位。所以,要把角度转换成弧度。
    苹果      香蕉%

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />

    在写这个教程的之前,我还没有亲自画过 Pie 图,以为很简单,一步就可以完成,不过当我真的去画的时候,让我差点一个晚上没有睡觉(目瞪口呆,口水直流)。
    我先研究 http://www.w3.org/TR/NOTE-VML 里面有写关于 path 里面的 ae (AngleEllipseTo) 命令(MSDN里面都没有关于这些命令,3w 全部命令都有)。那个命令确实可以很简单的完成,但它有 6 个参数,最后两个参赛很难理解。因为在一些例子中,这两个数非常大,五六位之多。不得其解,不得不放弃这个命令(一个晚上过去了)。

    CSDN上的网友 emu(ston) 提出的问题,还有他最后完成的 Pie 图,给我了一些启发,他的做法是用 PolyLine 画曲线,这样的方法确实可行,不过如果精度太底,曲线就不平滑了。我发现 path 里面的 ar 命令就是用来画弧线的。问题终于解决了。现在讲讲 ar 命令的使用。
    ar left,top,right,bottom start(x,y) end(x,y) 共六个参数。前面四个参数分别是整圆的左上角和右下角坐标。这样就确定了弧的范围。后面两个参数是弧的开始坐标和结束坐标。在知道角度和半径的时候,最后两个参数是很好求的。下面的代码可以画一个扇形,sa,ea,用来确定起始角度和结束角度,注意,这里用角度,在函数里面我再把角度换算成弧度的。color 是颜色, n 是一些提示信息:

var r=2000; //半径
function createPie(sa,ea,color,n)
{
  var fs=Math.PI*2*(sa/360); //角度转换成弧度
  var fe=Math.PI*2*(ea/360);
  var sx=parseInt(r*Math.sin(fs));
  var sy=parseInt(-r*Math.cos(fs)); //注意这里有个负号,因为VML的坐标第四像限相当于数学中的第一像限
  var ex=parseInt(r*Math.sin(fe));
  var ey=parseInt(-r*Math.cos(fe));
  var strPie="<v:shape title='"+n+"' style='position:absolute;z-index:8;width:"+2*r+";height:"+2*r+"'"
    +" CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"'"
    +"path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />";
  var newPie=document.createElement(strPie);
  group1.insertBefore(newPie);
}

    数据图表到这里就介绍完了,可能还有其他形式的图表,不过有了前面三个例子,其他的我相信大家都能知道该怎么做的。接下来的一节将介绍 VML 一个应用广泛的 矢量地图。

VML实例及两个网站

把下面两个实例复制出来,然后保存成htm格式就OK了。你就可以通过IE访问它,看到效果了。vml相关的两个站点:http://www.vmlmaker.com/gallery/visio/basic_...
  • gzxiaohao
  • gzxiaohao
  • 2005年01月05日 09:33
  • 4049

VML 学习笔记

观看者:有xml,javascript基础的同学 目标:熟练掌握vml 实现方式:代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 VML的全称是Vector Marku...
  • jumtre
  • jumtre
  • 2014年08月06日 10:15
  • 2579

VML使用

最近因gis部分展示需要兼容IE8,特针对leaflet代码进行了兼容IE8的开发工作,绘制展示方面使用了VML 网上大多数使用JavaScript动态添加命名空间的方式为: document.nam...
  • GISsunchangfu
  • GISsunchangfu
  • 2017年08月24日 15:48
  • 546

VML画流程图

就用了两个最基本的元素,一是线,二是框。有很多人问我要源代码,我现在就把它帖出来吧。其实很简单的,可能没有接触过VML的人对此感觉到神秘。html xmlns:v="urn:schemas-micro...
  • doymm2008
  • doymm2008
  • 2010年04月07日 10:40
  • 4044

VML、SVG、Canvas简介

1、VML:        VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是...
  • jcx5083761
  • jcx5083761
  • 2013年10月24日 16:30
  • 4740

VML极道教程(一) VML介绍

本系列文章导航VML极道教程(一) VML介绍 VML极道教程(二) VML入门VML极道教程(三) 标记实战与line线VML极道教程(四) oval圆rect矩型VML极道教程(五) RoundR...
  • hemingwang0902
  • hemingwang0902
  • 2009年06月27日 17:37
  • 5710

IE8中应用VML

解决了我的疑惑,很有帮助 转自 http://hi.baidu.com/jz1108/blog/item/8d16d550649ae3561138c228.html    最近发现使用VML绘制的图形...
  • black_ben
  • black_ben
  • 2010年04月20日 11:50
  • 3406

VML画连线箭头,line线加粗

一、什么是VML VML相当于浏览器的画笔,它可以在浏览器中画出任何你想要的图形:小到直线、圆形、圆弧、曲线、矩形、圆角矩形、多边形;大到一张图画、一个动画、甚至于一个游戏。题中既以标明为简明教程,...
  • yinxianluo
  • yinxianluo
  • 2015年04月28日 13:36
  • 1790

VML标记属性说明

1. VML标记特有的通用属性(非HTML、CSS所有)  属性名 默认值 值类型/范围 ...
  • yzj_000
  • yzj_000
  • 2007年08月15日 15:36
  • 1174

svg 和vml深入了解(路径path&shape)

观看者:有xml,javascript基础的同学 目标:深入了解svg和vml的path属性 实现方式:代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 先看两个例子分别...
  • a569171010
  • a569171010
  • 2012年05月16日 14:08
  • 5072
收藏助手
不良信息举报
您举报文章:vml
举报原因:
原因补充:

(最多只允许输入30个字)