VML编程之------shape多边型.shapetype模版.shape与curve曲线《VML极道教程》原著:沐缘华

最新推荐文章于 2022-02-03 14:50:01 发布

VIP文章 GeneralXCK

最新推荐文章于 2022-02-03 14:50:01 发布

阅读量2.8k

点赞数

分类专栏： VML编程文章标签：编程 path behavior 图形 vector css

本文链接：https://blog.csdn.net/GeneralXCK/article/details/5351089

版权

《VML极道教程》原著:沐缘华
1章12节:shape多边型

1:shape多边型 - 专用属性

 
 
 
  
   
    属性名
    默认值
    值类型/范围
    Dhtml访问
    用途
   
   
    path
    m0,0 l e
    command
    path.value
    描述多边形的形状
   
   
    type
    null
    #ShapeTypeName
    
    暗示引用的shapetype模版名称
   
  
 
2:shape多边型 - 与polyline多边型的优劣比较
polyline多边型特点1：增加CSS的rotation平面旋转、以及VML3D角度旋转处理时，旋转角度视图形中心为准
polyline多边型特点2：不支持CSS的width宽度、height高度定义，也不需要在CSS中定义width、height
shape多边型特点1   ：增加CSS的rotation平面旋转、以及VML3D角度旋转处理时，旋转角度视图形起点为准
shape多边型特点2   ：支持CSS的width宽度、height高度定义，不过需要配合coordsize属性。同时必须在CSS中定义width、height才能显示
虽然两者功能很类似，但我仍建议你至少应精通shape多边形的绘制原理，polyline也要理解的差不多。因为多边型是绘制复杂图形的重要工具，虽然FlashVml3.0有提供shape、polyline简单易用可视化绘图工具，但没有可视化的多边形修改工具。因此，了解他们的绘图原理，在今后你想修改他们的形状、开发DVML动画时是有一定帮助的。
2:shape多边型 - 通用属性coordsize使用讲解

 
 
 
  
  
  <HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
  
  
  

<v:shape style="Z-INDEX:1;LEFT:71;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30 e"/>
  
  
  

<v:shape style="Z-INDEX:1;LEFT:171;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30,60,0 e"/>
  
  
  

<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30,60,0,0,0 e"/>
  
  
  

<v:shape style="Z-INDEX:1;LEFT:371;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>
  
  
  

 
  
  
  

<v:shape style="Z-INDEX:1;LEFT:471;WIDTH:50;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>
  
  
  

<v:shape style="Z-INDEX:1;LEFT:571;WIDTH:2000;POSITION:absolute;TOP:225;HEIGHT:2000" coordsize="1000,1000" filled="t" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>
  
  
  

<v:shape style="Z-INDEX:1;LEFT:571;WIDTH:5000;POSITION:absolute;TOP:300;HEIGHT:5000" coordsize="1000,1000" filled="t" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>
  
  
  


 
 
 

 
 
 
  
  
  
  
  
  
 
 
 
显然，我们用了跟polyline多边形同理的校例，都是绘制三角型，不同的是shape多边形支持CSS的width、height，在结合VML的coordsize属性自动调整shape大小的对比度，而这对polyline线是无法实现的。我在解释它的path路径参数规则之前，先详细的说明coordsize的作用
我们先说倒数第三个图形，它width:50;height:100;、coordsize="100,100"，运行效果看出它的图形正好比其他属性是width:100;height:100;、coordsize="100,100"的图形宽度小了一半。
在说倒数第二个图形，它width:2000;height:2000;、coordsize="1000,1000"，运行效果看出它的图形正好比其他属性是width:100;height:100;、coordsize="100,100"的图形宽度、高度均大了1倍。
最后说最后一个图形，它width:5000;height:5000;、coordsize="1000,1000"，运行效果看出它的图形正好比其他属性是width:100;height:100;、coordsize="100,100"的图形宽度、高度均大了5倍。
也许你已小有醒悟，图形如果使用了虚拟空间大小描述coordsize="widthnumber,heightnumber"，那么其CSS的width、height就会根据coordsize来做比例计算，而不是按照以前我们所说的屏幕像素计算了，所以width:100;height:100;、coordsize="100,100"跟width:1000;height:1000;、coordsize="1000,1000"或者跟width:5432;height:5432;、coordsize="5432,5432"效果相同。
也就是为什么倒数第三个图形的width:50;height:100;、coordsize="100,100"它的宽度就正好小一半（2分之1）、倒数第二个width:2000;height:2000;、coordsize="1000,1000"正好大一倍、最后一个width:5000;height:5000;、coordsize="1000,1000"就大了五倍
3:shape多边型 - path参数讲解

 
 
 
  
  
  <HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
  
  
  

<v:shape style="Z-INDEX:1;LEFT:71;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30 e"/>
  
  
  

<v:shape style="Z-INDEX:1;LEFT:171;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30,60,0 e"/>
  
  
  

<v:shap

最低0.47元/天解锁文章

GeneralXCK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VML编程之------shape多边型.shapetype模版.shape与curve曲线《VML极道教程》原著:沐缘华

《VML极道教程》原著:沐缘华1章12节:shape多边型 1:shape多边型 - 专用属性属性名默认值值类型/范围 Dhtml访问用途 path
复制链接

扫一扫

专栏目录

属性名	默认值	值类型/范围	Dhtml访问	用途
path	m0,0 l e	command	path.value	描述多边形的形状
type	null	#ShapeTypeName		暗示引用的shapetype模版名称

VML编程之------shape多边型.shapetype模版.shape与curve曲线《VML极道教程》原著:沐缘华

“相关推荐”对你有帮助么？