图片做成几何形状 〖学习VML图片填充及画图〗

gaoss33

图片做几何形状,实际上就是将图片放到各种形状的容器里.
容器分两种:
一种是VML现成的,有矩形,圆角矩形,圆(椭圆)等,如上图那个圆角矩形风景。
另一种是自己用VML画出来的图形,如上图那个我画的人头像.

这里讲的是最简单而实用的几种.

[ 本帖最后由 gaoss33 于 2009-10-27 22:57 编辑 ]

gaoss33

先学习圆角矩形的制作

代码:

<DIV style=\"position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden\">

<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />

<v:Roundrect style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
</v:RoundRect>

</DIV>

代码分析:

<DIV style=\"position:relative; top:0px; left: 0px; width:660px; height:120px; overflow: hidden\">
............

</DIV>

这是定位和定显示大小代码.很重要.
1.因为很多VML代码里都是用CSS绝对定位的,在论坛里会满天飞,所以就必须用这个CSS相对定位代码来固定显示范围(width:500px; height:200px;)
2.用该代码做成效果后,靠top: 0px;(离顶距离) left: 0px;离左边距离)来调节放到帖子里的位置.这个距离数值还可以用负数.

<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />

这是指定空间在使用VML代码,没有他许多VML指令不能实现.该代码不用更改的,原样放上就行了.
永远把<DIV.....>和他放在最上面,在他们下面就可以编写VML代码了.别忘了收尾</DIV>

gaoss33

VML代码分析:

<v:Roundrect style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
</v:RoundRect>

RoundRect
是圆角矩形的标签.
style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\"
矩形的定位和大小.
stroked=\"t\"
有无边框,t有,f无.
strokecolor
描述边框的颜色 ＊默认黑色(black)
filled=\"t\"
有无背景,t有,f无.
fillcolor
背景颜色(填充色),默认白色(white)
strokeweight
边框的厚度
arcsize=\"0.15\"
四角的弧度,值0-0.5,0.5最大,默认值0.05.

＊ 默认就是指不写这个属性时的显示.

gaoss33

将图片填进这个框内:

代码:

<DIV style=\"position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden\">

<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />

<v:Roundrect style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
<v:fill src=\"http://up1.googletounion.com/data/bbs/10/96/1096/a/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\" type=\"frame\" opacity=\"1\"/>
</v:RoundRect>

</DIV>

红色代码为填充代码.

fill
填充标签.
type=\"frame\"
填充模式.
opacity
设置图片的透明度,值0.0-1.0,0全透明,1全不透明.

几点重要说明:
● 图片不设尺寸的,是按主标签设定的宽和高来显示.
所以必须考虑在设定容器的宽高比例时,要和图片的原始宽高比例基本一致.不然图像会变形.
● 这个图在这里实际上就是背景图,可以放字画等上去,
具体操作放在<v:Roundrect .....>和</v:RoundRect>中间,紧挨</v:RoundRect>上面.

将主标签RoundRect 换成 oval (圆)的效果:

val style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\"> val>

其他数据全没动.不要忘记收尾也要换.
当宽高不同的时候就是椭圆.
还有矩形标签: Rect

去掉边框(stroked=\"f\")的效果:

val style=\"position: absolute; top: 62px; left: 280px; width:100px; height:100px;\" stroked=\"f\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">

[ 本帖最后由 gaoss33 于 2009-10-27 20:35 编辑 ]

gaoss33

这是我画的一个图形:

代码:

<DIV style=\"position:relative; top:20px; left:0px; width:560px; height:210px; overflow: hidden\">
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace />

<v:shape style=\"position: absolute; top: 0px; left: 80px; width:230px; height:160px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"2px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 x e\"/>
</v:shape>

</DIV>

解释几个新的代码:
shape
多边形标签
coordsize 坐标的结束点,在右下角.
左上角为0,0 (coordorigin=\"0 0\"没写,默认).
coordsize=\"100 100\" 可理解为向右,向下各分成100等份的坐标.
path
描述多边形的形状.就是自己用坐标点画的多边形.

将图片放进去:

代码:

<DIV style=\"position:relative; top:20px; left:0px; width:560px; height:210px; overflow: hidden\">
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace />

<v:shape style=\"position: absolute; top: 0px; left: 80px; width:230px; height:160px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"2px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 x e\"/>
<v:fill src=\"http://bbs.e-yu.cn/attachments/month_0910/0910262234e397b0b2d6c645ff.gif\" type=\"frame\" opacity=\"1\"/>
</v:shape>

</DIV>

去掉边框效果(stroked=\"f\"):

gaoss33

这个多边形其实就是通过坐标点画出的图形:
v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 x e\"
mxe 是折线的格式，每两个数字组成一个坐标点(X Y)，数字间空一格,每组间用逗号隔开。 l 前面的20 40表示起始点坐标，以下按顺时针方向将图形走向的坐标点依此写出。

说到现在还不知道怎么画吧,
下面我用VML画一张示意图,对照看这些点就很清楚了:

起始点 ★

v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 x e\"
将代码从起始点开始顺时针对照一下坐标点,你会理解得更清楚些.

coordsize=\"100 100\"

coordorigin=\"0 0\"

图形出来后,填进图片,图片就变成你设计的形状了,还可以加上阴影,立体.
要注意的是,实际显示尺寸是按主标签里设定的宽高 (width:230px; height:160px;) 显示的.所以这个形状还会随宽高的变化而变化.方形可以变矩形，圆形可以变椭圆形.

懂了这些就可以自己动手了.找一张坐标纸(文具店有卖的),画图,坐标点写进代码......
coordsize=\"100 100\"可以将他定得更细点,如coordsize=\"1000 1000\",这样画出的图就会更细腻漂亮了. 不过那个坐标点数字就长得吓人了,但对电脑而言长短还是一样的.

[ 本帖最后由 gaoss33 于 2009-10-27 20:36 编辑 ]

gaoss33

用上面图形做一张效果:

[ 本帖最后由 gaoss33 于 2009-10-27 20:37 编辑 ]

gaoss33

● 起始点

v=\"m 10 26 l 12 8,22 4,40 2,80 10,90 30,86 60,66 90,56 92,58 100,
14 100,28 92,24 92,12 93,8 90,12 80,8 78,10 76,8 74,9 72,11 68,
2 65,1 63,12 46,13 43,7 38,13 37,18 23 x e\"

coordsize=\"100 100\"

coordorigin=\"0 0\"

[ 本帖最后由 gaoss33 于 2009-10-27 20:37 编辑 ]

傲雪纷飞

有水平哦，谢谢gaoss33~学习了~

gaoss33

val style=\"position: absolute; top: 100px; left: 100px; width:180px; height:360px;\" stroked=\"t\" strokecolor=\"#9999ff\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"1px\" arcsize=\"0.15\"> val>