先看图(背景是桌面,3D老虎的脑袋被我武松砍下了半边^_^):
裁剪形状可以自由定义,这个裁剪路径的XML定义暂时记下来,省得以后不记得了:
clip :m (.2,# .2) b (0,.2)(.2,0)(.5,.2) b (# .2,.2)(# 0,# .2)(# .2,# .2) b (# .2,# 0)(.2,# 0)(.2,# .2);
裁剪路径系列的定义规则是这样的:一个路径包含一系列操作,每个操作的格式如下:
operator [position1 [position2 position3]]
其中,operator 表示操作符,可以是如下单个字母:
- M 表示 MoveTo,必须带一个位置参数
- L 表示 LineTo,必须带一个位置参数
- B 表示 BezierTo,必须带三个位置参数
- C 表示关闭路径,不带位置参数
position 表示位置参数,二维坐标,用来指示在X/Y方向上的位置,两个值为一组,例如 12,5 表示一个位置。
位置参数的值并非绝对坐标,而是相对值,默认相对偏移的参考点是区域的左上角,但数字前可以加 # 符号改变这个参考点到对立的方向,例如, 2,3 表示相对左上角的坐标,#2,3 表示相对右上角坐标,2,#3 表示相对左下角坐标,#2,#3表示相对右下角坐标。
除了作为整数,位置坐标值还可以使用百分比,表示值是区域的宽度和长度的比例值,例如 2,50% 表示相对左上角偏移,偏移点水平方向是2像素,垂直方向是高度的一半。百分比也可以用浮点数表示,例如 2,50% 跟 2,0.5 是同一个效果。
除了通过路径进行自由裁剪,还内置了固定的裁剪方案,图中整个窗口是圆角矩形,则可以通过简写方式指定 clip:roundrect,则直接定义了圆角矩形,圆角默认半径是 10 个像素,如果像指定新的半径,例如半径为20,则写成 clip:roundrect 20。
在3D中做通用自由裁剪还真不好搞。
==================== 传说中的分隔线 ====================
最新演示效果——CoverFlow
最原始的版本,XML描述搞定,相框里的图片来自2D控件,中间有个图片还是一个GIF动画。丑陋的图片 + 丑陋的镜子。
电视墙效果:
改善了镜面反射效果的 CoverFlow,这是透明窗口哦
已实现了鼠标点击切换动画
场景中可包含FLASH动画:
场景中可包含视频播放器:
==================== 传说中的分隔线 ====================
合作启事 :
由于时间和精力限制,个人无力做技术以外的事情,希望找到具备一定实力、标准稳定的合作者(个人免谈),共同发展UI库,或者一起开发基于此库的桌面/互联网应用。
有意者请发邮件到 yuhanstudio@gmail.com