关于vml group的大小和coordsize的关系

原创 2004年07月18日 00:44:00

论坛终于开通了,提问关于vml


vml默认的原点在左上角,怎样变成左下角;
怎样动态在绘图区内显示坐标值?

 

--------------------------------------

<%@ page contentType="text/html; charset=gb2312"%>
<%@ include file="/DataIni/DataOpen.jsp"%>
<%@ include file="/ScriptLib/Init.jsp"%>
<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
<link rel="stylesheet" type="text/css" href="/StyleLib/Default_Style_Sheet.css">
</head>

<body onload="drawLinesX(4500);drawLinesY(13);">
<%@ include file="/TemplateLib/Head.jsp"%>
<script>
function drawLinesX(iMaxX)
{
 iCount=0;//画横坐标
 var iTextPoint=1;
 for(var iIndex=1;iIndex<=10;iIndex++)
 {
  var iPositionY=2750-iIndex*245;
  var strTo=iMaxX+" "+iPositionY;
  var newLine=document.createElement("<v:line from='200 "+iPositionY+"' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");
  GroupID.insertBefore(newLine);
  if(iCount%2!=0)
  {
   var newStroke=document.createElement("<v:stroke color='#C0C0C0'>");
   newLine.insertBefore(newStroke); 
   var newShape=document.createElement("<v:shape style='position:absolute;left:-350;top:"+(iPositionY-50)+";width:1000px;height:200px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");
   GroupID.insertBefore(newShape);
   var newText=document.createElement("<v:textbox id='T"+iTextPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
   newShape.insertBefore(newText);
   newText.innerText=iTextPoint;
   iTextPoint++;
  }
  else
  {
   var newStroke=document.createElement("<v:stroke dashstyle='dot' color='#000000'/>");
   newLine.insertBefore(newStroke);
  }
  iCount++;
 }
}
function drawLinesY(iMaxY)
{
 var iTextPoint=1;
 for(var iIndex=1;iIndex<=iMaxY;iIndex++)
 {
  var iPositionY=170+iIndex*300;
  var newLine=document.createElement("<v:line from='"+iPositionY+" 2700' to='"+iPositionY+" 2750' style='position:absolute;z-index:8'></v:line>");
  GroupID.insertBefore(newLine);
  var newStroke=document.createElement("<v:stroke color='black'>");
  newLine.insertBefore(newStroke);
  var newShape=document.createElement("<v:shape style='position:absolute;left:"+(iPositionY-50)+";top:2750;width:200px;height:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");
  GroupID.insertBefore(newShape);
  var newText=document.createElement("<v:textbox id='ty"+iTextPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
  newShape.insertBefore(newText);
  newText.innerHTML=iTextPoint;
  iTextPoint++;
 }
}
function drawBar(iUnit,iIndex)
{
 var iHeight=iUnit*245-50;
 var iPositionX=2750-iUnit*245;
 var iPositionY=170+iIndex*300;
 var newShape=document.createElement("<v:rect style='position:absolute;left:"+iPositionY+";top:"+iPositionX+";width:190px;height:"+iHeight+"px;z-index:9' coordsize='21600,21600' fillcolor='#EEEEEE'></v:rect>");
 GroupID.insertBefore(newShape);
}
function drawBars()
{
 
 for(iIndex=1;iIndex<13;iIndex++)
 {
  drawBar(Math.random()*10,iIndex);
 }
}
</script>
<v:group ID="GroupID" style="width:700px;height:500px" coordsize="4900,3500">
<v:line from="200,100" to="200,2700" style="z-index:1;position:absolute" strokeweight="1pt">
<v:stroke StartArrow="classic" dashstyle="Single"/>
</v:line>
<v:line from="200,2700" to="4500,2700" style="z-index:1;position:absolute" strokeweight="1pt">
<v:stroke EndArrow="classic" dashstyle="Single"/>
</v:line>
<v:rect style="width:4600px;height:2900px" coordsize="21600,21600" fillcolor="#FFFFFF" strokecolor="#000000">
<v:shadow on="True" type="single" color="silver" offset="4pt,3pt"></v:shadow>
</v:rect>
<v:shape style="position:absolute;left:-350;top:2650;width:1000px;height:200px;z-index:8" coordsize="21600,21600" fillcolor="#FFFFFF">
<v:textbox id="TextID" inset="3pt,0pt,3pt,0pt" align="center" style="font-size:9pt;v-text-anchor:bottom-center-baseline">0</v:textbox>
</v:shape>
</v:group>
<br>
<input type="button" value="生成曲线" onclick="drawBars();">
<%//@ include file="/TemplateLib/Chart.jsp"%>
<%@ include file="/TemplateLib/Tail.jsp"%>
<%@ include file="/DataIni/DataClose.jsp"%>
</body>

</html>

------------------------------------------------------------

Shape对象与VML坐标系
    Shape是VML最基本的对象,利用它可以画出所有你想要的图形。在VML中,使用的坐标并不是Document的坐标,它有自己的坐标系,这样一来,动态改变它的坐标,就可以实现放大、缩小、旋转等功能了。shape的 CoordSize 属性就是用来定义坐标的,它有两个参数,<v:shape CoordSize="2800,2800" />, 这里的2800,2800 是横纵坐标被分成了2800个点,并不是HTML里面默认像素。如果没有设置圆点,VML默认是 0,0 (左上角),当然你也可以使用 CoordOrig 属性设置VML的圆点坐标。

<v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" />

    注意:定义的坐标只是相对的,真正显示的图形大小还需要 style="width:500;height:500" 来定义!

    上面的定义后,你可用的坐标是 x(-1400到1400) y(-1400到1400) ,这样的坐标就像数学里面的坐标了,把画版分成了四个块。

 

    在解决实际问题的时候,我发现,IE会自动把可见的VML图象放在相对的(0,0)位置,意思是说,上面两张图如果没有增加两个辅助的坐标,在IE上显示出来是并列的两个正方形。
    shape中最主要的属性是Path,它是个功能强大的画笔,语法很简单,由几个字母组成,下面详细讲述:
m x,y:MoveTo把画笔移动到 (x,y);
l x,y:LineTo从当前点到(x,y)画一条线;可以给连续的几个点,VML会连续画出来直到遇到 x 命令。
x:Close结束一条线;
e:End结束画图
    shape的其他常用属性:
FillColor:填充颜色,使用HTML中规定的颜色;例如:fillcolor=red
Filled:是否要填充图形,如果图形不是封闭的,也会自动封闭图形进行填充。当Filled="true"(默认),fillcolor才有效果;
StrokeColor:线的颜色;
StrokeWeight:线的宽度;
Title:当鼠标移动到该图形上的时候,显示的文字,和HTML里面的alt、tilte一样;
Type:指定该图形属于那个ShapeType,ShapeType可以为VML制定模版,将在以后加以描述;
    前面的这些属性,FillColor、Filled可以在<v:Fill />中使用,StrokeColor、StrokeWeight可以在<v:Stroke />中使用。也可以在 Shape 或者 继承Shape的对象中使用它。
    在下面几节,将详细介绍 Shape 延伸出来的一些具体对象,诸如 Rect、RoundRect、Oval、Line等对象。

-----------------------------------------------------------

不要再贴美洲豹的教程了

 

 

VML画连线箭头,line线加粗

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

[HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上...
  • luqin1988
  • luqin1988
  • 2013年04月17日 16:02
  • 4584

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
  • 5628

js 实现 使用VML打造可改变大小的圆框

  • 2010年03月30日 14:49
  • 324B
  • 下载

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

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

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

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

linux查看文件/目录 大小(du)、权限(ls ll),用户及组(user/group)增、删、改 (chmod/chown/chgrp)

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※du查看文件/目录大小※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ 1.使用du命令查看文件/目录大小,例: ①要...
  • bao19901210
  • bao19901210
  • 2016年07月17日 16:15
  • 2728

vfio 从group->device_list 中查找device,并通过匿名node和fd建立关系

在qemu中hw/vfio/common.c的vfio_get_device int vfio_get_device(VFIOGroup *group, const char *name,    ...
  • tiantao2012
  • tiantao2012
  • 2017年04月07日 10:07
  • 293

group by语句,聚合函数与其他语句(关系,执行过程)

(本文一切基于SQL SERVER 2008 R2)   先来看一个语句执行过程发生的错误提示: 消息 8120,级别 16,状态 1,第 2 行 选择列表中的列 'SC.C...
  • heiantianshi1
  • heiantianshi1
  • 2011年11月08日 19:53
  • 4147

MFC窗口大小变化:OnSIze、OnSizing和OnGetMinMaxInfo区别与关系

----------------------------------------------------------------------------------------------------...
  • to_Baidu
  • to_Baidu
  • 2017年03月05日 22:45
  • 752
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于vml group的大小和coordsize的关系
举报原因:
原因补充:

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