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画连线箭头,line线加粗

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

VML 学习笔记

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

IE8下的VML显示问题解决方案

最近在维护一个使用VML画曲线的网站,在不同的IE下浏览效果不一样,特别是在IE8下,出现莫名其妙的样式显示问题: 1.曲线不可见!在IE9或IE7下,曲线正常绘制,但是在IE8下,不见坐标轴和曲线...
  • dyllove98
  • dyllove98
  • 2013年05月20日 19:38
  • 1559

VML、SVG、Canvas简介

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

基于VML与HTML5 Canva实现的跨浏览器饼图与折线图

一个简单的JS图表库演示源代码,因为太懒,没毅力,源码给有缘者得之或者有用吧! 1. 支持IE6+以上版本,支持Chrome, 支持FireFox 2. 动画加载机制 3. tooltip支持 4. ...
  • jia20003
  • jia20003
  • 2013年09月16日 21:14
  • 10309

ECharts 3.0底层zrender 3.x源码分析1-总体架构

zrender是一个轻量级的Canvas类库,作为百度Echarts 3.0的底层基础。截至目前查看的zrender源码和文档,包括官网文档都还停留在2.x时代,我打算用一个系列介绍下zrender ...
  • future_todo
  • future_todo
  • 2017年01月11日 10:41
  • 5696

GML、SVG、VML三者的关系与区别比较

GML是表示实体空间信息和属性的标准,但它不支持直接显示图形。VML和SVG是在表示图形信息并加入图形显示信息,而SVG综合VML优点推出,是国际标准,比VML更具优点及前景。 1 GML (Geo...
  • luqin1988
  • luqin1988
  • 2013年01月17日 16:35
  • 2082

VML学习(一)

1、什么是VML 请百度 2.、VML有何用处 请百度 3、简单例子 IE下: 第一个VML范例 v\:* { Behavior: url(#default#VML)...
  • lonestar555
  • lonestar555
  • 2013年10月11日 17:45
  • 581

vml 画图注意

html> html xmlns:v="urn:schemas-microsoft-com:vml"> head lang="en">     meta charset="UTF-8">   ...
  • zjl199303
  • zjl199303
  • 2017年04月20日 14:31
  • 164

GML、SVG、VML的比较

GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下。  GML(Geography Mar...
  • wangyinzi0618
  • wangyinzi0618
  • 2013年10月22日 21:13
  • 670
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vml
举报原因:
原因补充:

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