[教程] Styler教你撸桌面第二期，魂淡淡们快来交作业！

[复制链接]

胃痛君

该用户从未签到

93 主题	233 好友	4万积分

第二章

你的身体可比你的嘴巴诚实多了(﹁﹁)

积分: 45111

发表于 2013-8-17 17:37:47 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要登录才可以下载或查看，没有账号？╱人◕‿‿◕人╲订下契约（注册新用户）

本帖最后由胃痛君于 2013-8-19 09:34 编辑

大家好我是版主胃痛君，本次的教程有我准备

有了我们上次的教程代码的基础，本次我们的教程重点是在教大家如何在图片上面设置时钟和，以及为了尽量做到美化时钟，教大家如何旋转角度=v=

如果无法播放，请点击此处在新窗口打开

第一期作业传送门┏ (゜ω゜)=☞这里
准备工作

工具：Rainmeter（建议使用2.5 Final或3.0 Beta，部分代码老版本写法可能不同）
主程序下载地址：http://rainmeter.cn/cms/

本节主要内容有：
1、基础时钟代码
2、美化时钟设置
3、按照图片需求如何设置时钟旋转

下面开始进入正题

基础时钟代码
一般最基础的时钟编写代码是和系统统一的部件，所以不需要手动设置，以下是时钟最基础的代码

[MeasureClock]                         时钟部件
Measure=Time                         部件=时钟
;24:                                        24时制
Format=%H:%M                      板式=小时：分钟
;12:                                                 12时制
;Format=%I:%M                         板式=小时：分钟

下面是年月日的代码

[MeasureDate]
Measure=Time
Format="%d"
Substitute="01":"01","02":"02","03":"03","04":"04","05":"05","06":"06","07":"07","08":"08","09":"09","10":"10","11":"11","12":"12","13":"13","14":"14","15":"15","16":"16","17":"17","18":"18","19":"19","20":"20","21":"21","22":"22","23":"23","24":"24","25":"25","26":"26","27":"27","28":"28","29":"29","30":"30","31":"31"

[MeasureMonth]
Measure=Time
Format="%b"
Substitute="Jan":"Jan","Feb":"Feb","Mar":"Mar","Apr":"Apr","May":"May","Jun":"Jun","Jul":"Jul","Aug":"Aug","Sep":"Sep","Oct":"Oct","Nov":"Nov","Dec":"Dec"

美化时钟设置

[Time]                                     时钟部件
Meter=STRING                         部件类型是一个【STRING】类型的组件，即字符串组件
MeasureName=                      部件名称，后面空出，可以进行自定义
X=5                                        这里的XY的左边定义在我们第一节的坐标定义已经有具体的注释
                                                                                                            参看第一课第二节组合挂件
Y=4                                        还可以通过添加【W】、【H】属性来直接对图片组件进行按比例缩放。

这里【W】、【H】即为显示在屏幕上的实际宽度、高度，留空表示为原寸。

StringStyle=NORMAL                部件风格
StringAlign=LEFT                      部件排列=居左
FontColor=25,25,25,220             字体颜色←可以进行自定义，打开软件复制
FontFace=#FontName#                字体显示=字体名称
         (如果希望时钟可以美化，可以进行自定义，在安装的皮肤目录下新建Font放入所需要的字体加入)
FontSize=42                            字体大小
AntiAlias=1                               在这里AntiAlias是抗锯齿，=1就是对图像进行抗锯齿处理，防止图像失真
Hidden=0                               无隐藏值

最后两行可根据自己的需要进行改动

背景的美化
[BACKGROUND]                               背景Meter=IMAGE
ImageName=bg.png                     图片名称=写图片路径
X=0
Y=0
H=65
W=178
AntiAlias=1
Hidden=0

下面我们来讲如何将空间旋转以贴合皮肤起到美化作用，下面给大家一个图片

在我们设计某些皮肤插件的时候，可能需要对其中的组件进行旋转操作，比如我们要将一个STRING旋转某个角度来贴合背景，或者将一个IMAGE旋转某个角度来贴合相框。有的人可能会直接用图像编辑软件来旋转，然后再放入皮肤中，但是像有些包含了Measure值的STRING的文本内容是会变化的，我们就只能通过Rainmeter内置的参数来调整旋转。

具体说旋转前，我们要加一个概念，旋转原点。之前我们有讲到另外三个原点：屏幕原点、皮肤原点、组件原点【注：这里要区分这么多概念并不是要显得很高深，而是为了大家在能够完全理解之前有个明确划分】。下面我依旧用一张图片来区分这四大原点。

屏幕原点：位于屏幕左上角的一个基准点。皮肤在Rainmeter程序界面上的X、Y即为相对此点的位置。
皮肤原点：当前皮肤组件的基准点，用于整个皮肤在屏幕上的定位。组件中的X、Y即为相对此点的位置。
组件原点：当前组件左上角的定位点，用于组件在皮肤中的定位。
旋转原点：旋转之前位于组件左上角的定位点，旋转时作为定点。旋转后会随组件重新与组件原点对其，因此并不一定与组件原点重合。

下面就是旋转需要用到的代码内容了

对于图片的旋转，我们采用的是Imagerotate=角度。对于文字的旋转，我们采用的是Angle=弧度。

下面来具体讲解两种旋转的实现方法。

图片旋转

Rainmeter在对待图片旋转的时候是这样子处理的：

1、找到图片左上角的基准点，即图片本身的(0,0)点，作为旋转原点。
2、以该点为旋转中心，按照给定角度值旋转图片，角度值为正则顺时针，角度值为负则逆时针。
3、重新为该图片指定一个组件原点，该组件原点按以下原则构成：
A、用水平、竖直两组平行线从四周靠近图片，形成最小矩形将图片恰好全部包含【包括透明部分】。
B、取左侧与上侧直线交点为组件原点。
4、按照新的组件原点重新定位。

由此看来，旋转并不只是沿着原有的组件原点旋转而已，大家在给旋转之后的图片定位时一定要注意组件原点与图片本身的位置关系，否则相当容易错位。

文字旋转

Rainmeter在处理文字时与图片不太一样，涉及到了皮肤的可见范围的概念。

并非所有写入代码的组件都可以完全显示出来的，只有在可见范围内的组件才可以显示出来。由于目前只有IMAGE和STRING两种组件学习到了，那这里就假定只有这两种组件来对可见范围下一个定义。
用水平、竖直两根直线从右侧和下册靠近皮肤，与过皮肤原点的横竖两条直线形成最小矩形将位于两直线右下方组件恰好全部包含。该矩形即为可见范围。只有位于可见范围内的组件才能在屏幕上显示出来。
【注：由于文字对可见范围的影响较为复杂不利于皮肤的设计，大家在考虑到可见范围时应当尽量避免将文字放在可见范围边界上】

1、找到图片左上角的基准点即组件原点，作为旋转原点。对于文字而言，组件原点与旋转原点等价，两点没有相对位移。
2、以该点为旋转中心，按照给定弧度值旋转文字，弧度值为正则顺时针，弧度值为负则逆时针。【注：弧度值=π×角度值÷180°，π≈3.14159265】
3、原有组件原点不变。

综上所述，文字与图片旋转有3大区别：
1、旋转角度采用的弧度制而非角度制。
2、组件原点与文字本身并没有发生位移。
3、由于文字本身对可见范围的影响较为复杂，因此要尽量包含在其他组件的可见范围内。而图片只要在可见范围左侧与上侧两条边右下的所有部分均能显示出来而不用担心超出范围。

在我们前面排列带有Measure值的STRING时候，大家有没有想过一个问题：假如我想在这个STRING两边用两个IMAGE夹住这个STRING，就像※XXXXXXXX※这种结构，但是由于这个STRING的长度会随Measure的变化而变化导致右侧的IMAGE不便于定位。有的童鞋可能会说多留一些空出来不就完了么，但是对于一些强迫症来说一点空格都不能忍啊。于是就有了相对位置这个概念。

相对位置分为两种r和R，使用方法为在X、Y值后面加上r或R，如X=100r、Y=-10R。注意这里的r和R并非距离单位，而是一种标示，指这里的X、Y是相对于上一个组件的相对位置。

区别于我们常用的写法，【X=100 Y=100】表示当前组件位于皮肤原点的右侧100px、下侧100px处，而【X=100r Y=100r】表示当前组件位于上一组件【注：代码中的上一段所表示的组件】的组件原点右侧100px、下侧100px处。即当前组件的位置会随着上一组件中的X、Y变化而变化，而不是与皮肤原点绑定。

但是如果我们想要当前组件紧接着上一组件就需要用到R而不是r。每一个组件都会有一个矩形的区域作为组件的边界，对于图片而言就是上下左右四条边框，对于文字而言则是原文字【注：指旋转之前的文字】的上下左右四条边框。相对的，如果左上角那个点组件原点对应的是r，右下角那个点则是对应的R。意即，如果我在某一组件中写道【X=100R Y=100R】，那么这个组件位于上一组件边界右下角那个点右侧100px、下侧100px处。