晨风交流论坛_CMP_CChat_Flash_音乐_视频_播放器_live直播_聊天室

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 24638|回复: 15

[教程] 【xywh】CMP位置宽高参数详解

[复制链接]
发表于 2009-12-13 23:28:29 | 显示全部楼层 |阅读模式
官方QQ群:102348392 | 捐赠CMP
xywh为CMP的核心参数,明白其原理对制作皮肤,使用插件等等都很有帮助

CMP用参数xywh来指定某个可视对象在其父可视对象中的位置宽高

顾名思义,x和y表示横坐标和纵坐标,w和h则表示宽度和高度
形象的说,这些对象都是一个个长方形,如某个窗口、某个按钮等

我们所涉及到的长度单位都统一用像素px,数值都用整数,下面进行详细说明:

https://github.com/cenfun/cmp/tree/master/help/xywh/xywh.gif

一,认识2个对象

可视对象
即能见的对象,能见不是说必须显示出来,而是指它可以显示也可以隐藏,下面都简称【对象】
我们可以简单的将其看成一个【长方形】

父可视对象
对象的上级(parent),本身也是可视对象,像一个容器,包含了一个或多个子对象,下面也称【父容器】
如顶级容器就是播放器舞台,它包含了窗口和插件
如窗口容器,它包含了按钮,进度条,文本区等

长方形
我们可以把这2个对象都看成长方形,即父容器长方形包含着对象长方形
长方形就会有宽度(width)和高度(height)
还有上、下、左、右4条边,以及水平中心线和垂直中心线,共6条边线
边线的交叉就会形成4个顶点,4个边中心点,以及1个水平垂直中心点,共9个点

对应于9中对齐方式:
左上,中上,右上
左中,中中,右中
左下,中下,右下

我们引入2个特殊参数C和R,来表示这9种不同方式的坐标:
(x,y), (xC,y), (xR,y)
(x,yC),(xC,yC),(xR,yC)
(x,yR),(xC,yR),(xR,yR)
同时还可以引入P参数(或者用%)来表示百分比

二,指定位置

上面的坐标(x, y)是用来描述一个点(point)在其平面坐标系上的位置(position)
其实就是点到两个轴线之间的距离的组合,即水平方向距离为x,垂直方向距离为y

那么我们怎样指定某个对象在其父容器中的位置呢?

这里我们只需要在对象上取一点
然后指定这个点到父容器垂直方向一条边线之间的距离x
以及指定这个点到父容器水平方向一条边线之间的距离y
这样(x,y)即可表示其位置

可是我们应该在对象上取哪个点?以及在父容器水平和垂直方向取哪两条边线呢?

这里我们规定:

对象和父容器都取相同的对齐方式

总结的几句口诀:

上下左右,边对边,边距相减都取正
中对中,线距相减,左上为负右下正

也就是,如果对象取左上顶点来定位,那么父容器就取左边和上边来测距
反之也成立,如果想要对象以父容器右边和下边对齐,那么对象就取右下顶点
如果想要对象以父容器右边和水平中线对齐,那么对象就取右边中点
...
这样我们就有9种不同的方式
其实,这是水平和垂直方向各有的3种方式任意组合而成
下面我们先来认识一下水平方向的3种方式
也就是对象在左右移动,左右定位,都取垂直方向的边线进行测距

1,水平居左对齐,默认方式
取对象左边到父容器左边之间的距离,假设为30像素,那么
x = 30

2,水平居中对齐,引入居中参数C(center)
取对象垂直中线到父容器垂直中线之间的距离,假设为40像素,那么
xC = 40C
x可以小于0,负值表示偏左,否则偏右

3,水平居右对齐,因为与默认向左相反,所以引入反向参数R(reverse)
取对象右边到父容器右边之间的距离,假设为110像素,那么
xR = 110R

同理,在垂直方向也是类似方法
也就是对象在上下移动,上下定位,都取水平方向的边线进行测距

1,垂直居上对齐,默认方式
取对象上边到父容器上边之间的距离,假设为30像素,那么
y = 30

2,垂直居中对齐,同样引入居中参数C(center)
取对象水平中线到父容器水平中线之间的距离,假设为20像素,那么
yC = 20C
y可以小于0,负值表示偏上,否则偏下

3,垂直居下对齐,因为与默认向上相反,同样引入反向参数R(reverse)
取对象下边到父容器下边之间的距离,假设为70像素,那么
yR = 70R


最后将x和y各有的三种方式,取其中一种进行组合,即可完成9种方式的对齐



三,指定宽高

也就是对象长方形的宽度(width)以及高度(height)

1,最直接的就是固定宽高,如宽120像素,高80像素:
(w, h) = (120, 80)

2,如果想要和父容器一样宽高,或者一半宽高等,即百分比宽高,这里引入百分比参数P(percent)(或者用%来表示)
如窗口满屏,或视频满窗口:
(w, h) = (100P, 100P)
如总是和父容器一半的宽度和高度:
(w, h) = (50P, 50P)

3,如果想要对象的宽高相对于父容器的宽高,总是在上下或左右有一段边距,这里引入边距参数B(border)
如左右自动拉伸的进度条,设置其宽度总是比所在窗口的宽度在两边少10个像素:
w = 10B
如上下自动拉伸列表,其高度相对于所在窗口高度,总是上下两边留有10像素的边距:
h = 10B
注意,即便对象位置有偏移,对其宽高都不会有影响

以上三种形式可以单独应用于宽或者高,宽高形式可以任意组合
也就是宽固定时,高可以是百分比,或者宽百分比时,高可以用边距



四,组合xywh参数

这样将位置(x,y)以及宽高(w,h)组合起来,并用英文逗号(,)隔开,即参数:

xywh = "x, y, w, h"

之所以取名为xywh也是为了方便记忆,不易颠倒顺序


常见的一些例子:

xywh="0, 0, 100P, 100P"      宽高和父容器一样,如窗口满屏,视频满窗口
xywh="0C, 0C, 400, 300"      固定宽400像素,高300像素,位置绝对居中(水平垂直都居中),无偏移
xywh="100C, 0C, 400, 300"    位置绝对居中,但中心向右偏移100像素
xywh="0C, -100C, 400, 300"   位置绝对居中,但中心向上偏移100像素
xywh="0C, 0C, 5B, 10"        两边留5个像素,高10像素,如播放进度条
xywh="5R, 0, 30, 15"         宽30像素高15像素,位置右上角,距右5像素,如关闭按钮

xywh生成和测试页:
https://github.com/cenfun/cmp/tree/master/help/xywh/xywh.htm


相关描述:

x:  横坐标,水平方向
y:  纵坐标,垂直方向
w:  width 宽度
h:  height 高度
C:  center 居中
R:  reverse 反向,相反
P:  percent 百分比,也可以使用%
B:  border 边距,边界
px: pixel 像素,点
发表于 2009-12-13 23:52:43 | 显示全部楼层
沙发!老大辛苦了!
发表于 2009-12-14 00:03:06 | 显示全部楼层
太专业了!新手们慢慢啃吧!
发表于 2009-12-14 01:31:51 | 显示全部楼层
老大辛苦了
发表于 2011-1-23 22:50:41 | 显示全部楼层
谢谢老大,有点懂了
但屏幕上两点间的距离这么测量啊?
发表于 2011-1-24 00:02:03 | 显示全部楼层
原来是这意思
发表于 2011-1-24 09:53:58 | 显示全部楼层
谢谢老大
发表于 2011-9-25 02:07:25 | 显示全部楼层
看不懂我
发表于 2012-2-15 00:03:21 | 显示全部楼层
又来学习了
发表于 2012-2-15 14:04:27 | 显示全部楼层
多看就会懂

QQ|客服QQ44023478|Archiver|手机版|小黑屋|晨风交流论坛 ( 粤ICP备05008793号 )

GMT+8, 2019-1-17 06:44 , Processed in 0.057951 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表