您的位置:首页 > 产品设计 > UI/UE

Duilib中Scrollbar的设置问题

2015-06-29 15:22 435 查看
如果切得图片只有前三个按钮的,如图

。此时没有rail和bk属性。设置了rail属性的话,滚动条中间就会出现横线

,如果把rail属性屏蔽掉的话,就会去掉中间的横线问题。


image中的corner属性是指图片安装scale9方式绘制(scale9含义往下边看)

通过设置corner可以保证圆角的正常显示

Scale9的含义

它是使用网格将图像划分为9个区域,如图2所示,我用数字1-9标出了对应的区域,其中标红色的区域是不需要缩放的,而标蓝色的区域则是需要缩放的区域。



图2 对图片使用Scale9技术进行缩放

当这张图片被放大,依据Scale9的定义,区域1,3,7,9需要保持原有的尺寸(通过对比左侧和右侧的图像可以发现这一点),而其它区域则需要依据一定的规则改变自己的尺寸:
区域2,当图片放大,本区域宽度增加,高度保持不变 
区域4,当图片放大,本区域高度增加,宽度保持不变 
区域5,当图片放大,本区域宽度和高度都增加 
区域6,当图片放大,本区域高度增加,宽度保持不变(规则与区域4一致) 
区域8,当图片放大,本区域宽度增加,高度保持不变(规则与区域2一致) 

对于区域5,我们在做外观设计的时候要重点注意,这个区域不要放置复杂图形,对于单色或简单渐变色而言,一定程度的放大是可以接受的,但如果是复杂图形,那么放大所产生的失真是非常明显的(当然如果是矢量图形,就不会有这个问题,但矢量图形对于CPU有较大的计算消耗,通常在性能敏感型的Flex应用中我们尽量使用位图皮肤)。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  scrollbar