客户端VML与SVG Web绘图

最新推荐文章于 2020-12-23 21:14:19 发布

indexbobo

最新推荐文章于 2020-12-23 21:14:19 发布

阅读量604

点赞数

分类专栏：多比图形控件流程监视器 GoDiagram设计器 web矢量图工作流设计器文章标签： web 图形 behavior html server function

工作流设计器同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

web矢量图

6 篇文章 0 订阅

订阅专栏

GoDiagram设计器

5 篇文章 0 订阅

订阅专栏

上篇介绍的服务器端绘图，有一个很重要的缺点，就是如果图形有变化，比如要将圆移动到另外一个位置，必须回传到服务器重新绘制。页面回传会造成屏幕闪烁，使用起来很不舒服。

那么有没有不需回传的办法呢？答案就是客户端绘图。ActiveX是一种解决方案，我曾经做过一套电力操作票系统，使用ActiveX画图，可以实现任意需要的交互效果，且无刷新。但是，其安全性是个大问题，即使使用了数字签名很多浏览器也不允许执行，要让客户降低浏览器安全级别允许ActiveX 运行太难了。

值得庆幸的是，目前浏览器开发厂商也在考虑Web绘图的功能，目前使用类似html脚本绘图的有SVG和VML。SVG是一个国际标准，可惜的是如果让IE支持，客户端需要安装一个组件。VML是微软标准，但IE支持就足够了，毕竟目前IE市场份额最大，垄断啊。

言归正传，下面看一下VML绘图。

1．VML绘图入门
新建网站，在Default.aspx源模式下，修改成如下代码：

<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>

</head>

<body>

<div>

<v:Oval fillcolor='red' style='width:100;height:150'/>

<v:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150">

</v:oval>

<v:RoundRect FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>内容</b>

</v:roundrect>

</div>

</form>

</body>

</html>

运行，会看到画了一个红色实心圆（oval是圆）、一个蓝色空心圆和一个圆角矩形。注意代码中我将aspx最上面两行代码删除了，包括那个page，否则图形显示不出来。

从代码看，与html代码没有什么区别，我们只要了解用哪些标签就可以了。下面我们先看一下移动效果。

2．图形移动
下面我们让蓝色空心圆用鼠标点击后，可以跟随鼠标移动。代码如下：

<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>

</head>

var enableMove = false;

function mouseMove()

{

if(enableMove)

{

x.style.posLeft=event.x;

x.style.posTop=event.y;

}

function mouseDown(oEvent)

{

enableMove = true;

document.οnmοusemοve=mouseMove;

}

function mouseUp(oEvent)

{

enableMove = false;

}

</script>

<div>

<v:Oval fillcolor='red' style='width:100;height:150'/>

<v:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150" id="x" οnmοusedοwn="mouseDown(event);">

</v:oval>

<v:RoundRect FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>内容</b>

</v:roundrect>

</div>

</form>

</body>

</html>

注意阴影部分代码。蓝色空心圆我们给了一个id为x，并将mousedown事件设置为函数mouseDown。该函数先将全局变量enableMove置为true，在mouseMove中，如果该变量为true，则x的位置跟随鼠标移动。Body中增加onmouseup事件，即鼠标松开鼠标后将变量置回false。

可以运行看一下效果。

3．常用VML标签
标签                   图形

Line                   直线

Oval                  圆

Rect                  矩形

RoundRect      圆角矩形

Arc                   圆弧

Image              图片

Polyline          多边形

Fill                  填充

Textbox         文本框

4．VML特有属性
属性名                    默认值         值类型/范围           用途

strokeweight        0.75pt=1px           number        描述图形的边框粗度

strokecolor                black                 color          描述图形的边框颜色

stroked                       true                boolean        描述图形是否使用边框

fillcolor                       white                 color          描述图形的背景颜色

filled                            true               boolean        描述图形是否使用背景

print                            true               boolean        描述图形是否允许被打印机打印

coordsize              1000,1000          Vector2D       暗示图形与容器空间的大小比例

coordorigin                  0,0                Vector2D       coordinate at top-left corner of element

wrapcoords                null                   string          outline to use for tight text wrapping

VML支持id、name、class、title、style等html通用属性。

indexbobo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
客户端VML与SVG Web绘图

上篇介绍的服务器端绘图，有一个很重要的缺点，就是如果图形有变化，比如要将圆移动到另外一个位置，必须回传到服务器重新绘制。页面回传会造成屏幕闪烁，使用起来很不舒服。那么有没有不需回传的办法呢？答案就是客户端绘图。ActiveX是一种解决方案，我曾经做过一套电力操作票系统，使用ActiveX画图，可以实现任意需要的交互效果，且无刷新。但是，其安全性是个大问题，即使使用了数字签名很多浏览器
复制链接

扫一扫