博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

小SHOW一把,3D中的自由裁剪 ----- 界面库求合作!

Posted on 2011-04-22 09:58  一桶浆糊  阅读(303)  评论(0编辑  收藏  举报

先看图(背景是桌面,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