雨滴美化社区吧 关注:318贴子:544
  • 8回复贴,共1

【技术教程】如何制作Dock

只看楼主收藏回复

转自论坛会员 心de轨迹 的教程:http://bbs.rainmeter.cn/thread-51382-1-1.html
----------------------------------------------------------------------------
Dock就是快捷方式的集合。所以想学做Dock就要先学会做快捷方式。
常用的快捷方式有3种---Image,Button,String。Image是使用图标作为外观,
Button也一样,不过不是单独的一个图标,而是像TLB覆盖图的图标,由3个图标构成,
分别为正常效果(第1图),鼠标悬停效果(第3图)和鼠标按下效果(第2图)。
String则是以文字为外观的。接下来我们举个例子来具体认识一下各个快捷方式。

Button使用的图标
1.Image
[M1] [M1]只是个名称 任意
Meter=Image 表示该Meter为Image
ImageName=1.png 1.png为使用的图标名称
X=10 快捷方式的横坐标 缺省为0
Y=10 快捷方式的纵坐标 缺省为0
W=60 图标的宽度 缺省为图标原始宽度
H=60 图标的高度 缺省为图标原始高度
LeftMouseUpAction=!Execute ["C:\"] 点击图标后运行的命令
ImageRotate=xxx 图片倾斜度
表示运行命令的代码除了LeftMouseUpAction之外,
有LeftMouseDownAction,RightMouseDownAction,RightMouseUpAction
,LeftMouseDoubleClickAction,RightMouseDoubleClickAction,MouseOverAction,MouseLeaveAction等等。
还有测量值到达、超过、低于设定值时自动执行命令的代码。比如IfEqualAction等等。这些以后再向大家讲解。
有一点需要大家注意的是,在上面的这个快捷方式里绝对不能使用MouseDownAction系列的代码。
因为这样会造成皮肤无法拖动,请一定要注意。
2.Button
[M2]
Meter=Button 表示该Meter为Button
ButtonImage=1.png 相当于Image里的ImageName
X=10 和Image一样 不过需要注意的是用W和H无法限制图标的大小
Y=10
LeftMouseUpAction=!Execute ["C:\"] 点击执行命令
在这里和大家探讨下Button和Image的区别。Button的图标做起来有点麻烦,从这个角度来说,
Button不如Image方便。但有弊也有利。首先,如果你要做出一个鼠标悬停放大的效果的话,用Image需要编写2条代码,
使用MouseOverAction和MouseLeaveAction进行相互切换。而使用Button的话只需要1段代码即可实现。
而且,Button的MouseOverAction反应速度非常快,而Image相对而言就要慢很多了。
3.String
[M1]
Meter=String 表示该Meter为String
X=120
Y=5
StringAlign=Left 对齐方式 Left为左对齐 Right为右对齐 Center为居中
FontSize=9 字体大小
FontFace=微软雅黑 字体
StringStyle=BOLD Bold为粗体 Italic为斜体 BoldTalic为粗斜体 缺省为Normal
FontColor=255,255,255 文字颜色
StringEffect=SHADOW 使用文字阴影
FontEffectColor=0,0,0,200 阴影颜色 不使用阴影可将这两条代码删除
Text=xxx 显示的文字
AntiAlias=1 反锯齿(平滑字体)
LeftMouseUpAction=!Execute ["C:\"] 点击执行命令
Angle=xxx 字体倾斜度
楼下继续


1楼2013-04-03 00:34回复
    以上向大家说明了3种简单的快捷方式制作。在一个皮肤配置文件中添加多个快捷方式就成了一个Dock。
    虽然说起来简单,但在实际操作的时候还有一些需要注意的地方。
    首先是是各个图标间的距离。在编写Dock的时候经常要用到一个字母---R。比如:
    [M1]
    Meter=Image
    ImageName=1.png
    X=10
    Y=10
    [M2]
    Meter=Image
    ImageName=2.png
    X=80r
    Y=r
    此处注意2点。第一,上面的快捷方式名称为M1了,其他的快捷方式就不能再命名为M1了。
    否则RM会不识别下面的M1.第二,M2的坐标为80r,r。这个R是用来绑定前一个代码的坐标的。M1的坐标为10,10,所以M2的坐标为80+10=90,0+10=10.用这个方法写坐标的好处在于如果想要整体移动坐标时,只需要更改第一个坐标就可以了。
    其次,就是存放变量了。想象一下,如果要更改快捷方式的路径的话,要一条条的找,很麻烦。
    如果设置变量,再将路径指向变量就方便多了。比如:
    [Variables]
    S1=C:\
    S2=D:\
    [M1]
    Meter=Image
    ImageName=1.png
    X=10
    Y=10
    LeftMouseUpAction=!Execute ["#S1#"]
    [M2]
    Meter=Image
    ImageName=2.png
    X=80r
    Y=r
    LeftMouseUpAction=!Execute ["#S2#"]
    这样的话M1就指向S1的路径,即C盘,M2指向S2的路径,即D盘。有再多路径也可以轻松的更改。
    只要在[Variables]标题下的代码以yy=xxx的格式编写,都可以在下面的代码中用#yy#的格式调用。
    楼下继续


    2楼2013-04-03 00:36
    回复
      第三,一排图标,没有名称,难免会弄错,所以给Dock的各个快捷方式加个名称是必要的。
      当然,用String格式编写的皮肤除外。添加文字一般有3种方法。
      一种是直接添加文本在图标旁边。比如:
      [M1]
      Meter=Image
      ImageName=1.png
      X=10
      Y=10
      LeftMouseUpAction=!Execute ["#S1#"]
      [Text1]
      Meter=String
      X=r
      Y=40r
      StringAlign=Left
      FontSize=9
      FontFace=微软雅黑
      FontColor=255,255,255
      Text=Computer
      AntiAlias=1
      这样在原来图标的下面就会出现Computer的字样。
      如果你觉得这样不好看,那可以设置为鼠标悬停显示,鼠标离开隐藏。方法如下:
      [M1]
      Meter=Image
      ImageName=1.png
      X=10
      Y=10
      MouseOverAction=!Execute [!RainmeterShowMeter Text1] 鼠标悬停显示文本
      MouseLeaveAction=!Execute [!RainmeterHideMeter Text1] 鼠标离开隐藏文本
      LeftMouseUpAction=!Execute ["#S1#"]
      [Text1]
      Meter=String
      X=r
      Y=40r
      StringAlign=Left
      FontSize=9
      FontFace=微软雅黑
      FontColor=255,255,255
      Text=Computer
      AntiAlias=1
      Hidden=1 默认隐藏
      这个代码很重要,活用这个代码就可以制作出RD的文件夹展开效果。
      (貌似人称阿拉丁效果,记不清楚了,我太out了)不过只用RM做还是很麻烦的,建议使用StandaLoneStack2
      制作会省去很多时间。
      如果觉得这个麻烦,那就试试第三种办法。
      [M1]
      Meter=Image
      ImageName=1.png
      X=10
      Y=10
      LeftMouseUpAction=!Execute ["#S1#"]
      ToolTipText=Computer
      这样把鼠标放到图标上,就会出现一个类似提示框的东西,上面写着Computer。不过实在是不好看,嫌麻烦又不太在意外观的朋友可以试试。
      第四,想给Dock加背景的朋友要注意,由于写在后面的代码会显示在前端,所以背景代码一定要写在快捷方式之前,否则背景图片会挡住图标,对使用造成影响。
      楼下继续


      3楼2013-04-03 00:36
      回复
        最后再扩展一下,用RM也能做出RD的热点效果。即鼠标移动到某个区域显示Dock,离开区域隐藏Dock。方法如下:
        Meter=Button Image也可以 但是为了提高反应速度将其设置为Button
        SolidColor=255,255,255,255
        X=0
        Y=0
        W=200
        H=40
        MouseOverAction=!Execute[!RainmeterShowMeter M1][!RainmeterShowMeter M2][!RainmeterShowMeter M3]MouseLeaveAction=!Execute [!RainmeterHideMeter M1][!RainmeterHideMeter M2][!RainmeterHideMeter M3]
        [M1]
        Meter=Image
        ImageName=1.png
        X=10
        Y=10
        LeftMouseUpAction=!Execute ["#S1#"]
        Hidden=1
        [M2]
        Meter=Image
        ImageName=2.png
        X=60r
        Y=r
        LeftMouseUpAction=!Execute ["#S2#"]
        Hidden=1
        [M3]
        Meter=Image
        ImageName=3.png
        X=60r
        Y=r
        LeftMouseUpAction=!Execute ["#S3#"]
        Hidden=1
        然后把它保存,启动皮肤。你会看到一块白色的横条,把它移动到合适的位置,再次编辑皮肤。
        将标题下的代码SolidColor=255,255,255,255中的最后一个255改为1,即SolidColor=255,255,255,1 保存,刷新。
        这样一来,白色的横条就消失了。再次将鼠标移动到原来白条的区域,Dock就会显示出来。


        4楼2013-04-03 00:37
        回复
          橙子在贴吧出教程 难得一见啊


          IP属地:湖南5楼2013-04-03 01:31
          收起回复
            橙子果果发的贴,帮顶。


            IP属地:广东来自手机贴吧7楼2013-04-03 12:03
            回复
              有没有办法做这样的
              [A]
              [B] ↑再加个上下滚动
              [C] ↓
              [D]


              IP属地:广东8楼2021-07-06 16:08
              回复