Henry Blog

Javaer

0%

CVP认证学习笔记--(何小成)007--节点的锚点和坐标

发表于 更新于 分类于 阅读次数： 评论：

概念

本节内容讲了cocos中一个比较重要的概念——锚点，锚点按照我的理解，就是这个图形的中心点，而图形中所有的控件的位置，都是根据这个锚点位置的偏移量。在Cocos中，图层的锚点是图层的左下角，而Node的锚点，则是在Node的正中心，这也就解释了之前做Menu的时候，很多人遇到的那个问题，把menuItem添加到Menu中位置不正确的原因。也就是说，在Cocos中，一个Node或图层的位置，是根据它的Anchor（锚点）和Position（位置）共同决定的。

作业

课程内容并不难，重点是要理解锚点和位置的关系，课程作业是要完成一个11：58的时间显示，做完之后我觉得不如就把它做成一个电子钟的，于是网上搜下了cocos中定时任务的使用，应该后面几节就会讲到了，这里就先用下了，每秒刷新画面，形成一个电子钟。电子中的数字显示有两层，底层有一层透明度稍淡一点的，上面那层是深一点颜色的，底层的数字锚点为0.5 0.5，也就是默认的锚点，上面颜色深的锚点是0.7 0.3，也是我一点点试出来的看起来比较舒服的一个位置。通过锚点设置，两层图形形成了一个阴影效果。所有的数字是我用一个二维数组提前设置好的一个时钟显示格式，绘制的时候根据二维数组的标识进行绘制。，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
/**
 * Created by Henry on 16/4/16.
 */
var cellSpace = 3;
var rectWidth = 10;
var rectHeight = 10;
var Layer0201 = cc.Layer.extend({
    normalColor: cc.color(245, 245, 245, 50),
    numColor: cc.color(152, 245, 255, 255),
    numColor2: cc.color(152, 245, 255, 80),
    initX: 0,
    ctor: function (num, initX, initY) {
        this._super();
        var size = cc.winSize;
        this.initX = initX;
        var rects = [];
        var rectNum = num == -1 ? 4 : 8;
        // 添加显示时间方块
        for (var row = 0; row < 8; row++) {
            rects[row] = [];
            for (var col = 0; col < rectNum; col++) {
                rects[row][col] = new cc.LayerColor(this.normalColor, rectWidth, rectHeight);
                rects[row][col].setPosition(initX + col * (cellSpace + rectWidth), initY + row * (cellSpace + rectHeight));
                rects[row][col].ignoreAnchorPointForPosition(false);
                rects[row][col].setAnchorPoint(0.5, 0.5);
                this.addChild(rects[row][col]);
            }
        }
        // 获取要现实的数字的阵型
        var numArr = getNum(num);
        for (var row = 0; row < 8; row++) {
            for (var col = 0; col < rectNum; col++) {
                if (numArr[row][col] == 1) {
                    // 改变数字显示单元格的颜色
                    rects[7 - row][col] = new cc.LayerColor(this.numColor2, rectWidth, rectHeight);
                    rects[7 - row][col].setPosition(initX + col * (cellSpace + rectWidth), initY + (7 - row) * (cellSpace + rectHeight));
                    rects[7 - row][col].ignoreAnchorPointForPosition(false);
                    rects[7 - row][col].setAnchorPoint(0.5, 0.5);
                    this.addChild(rects[7 - row][col]);
                }
            }
        }
        for (var row = 0; row < 8; row++) {
            for (var col = 0; col < rectNum; col++) {
                if (numArr[row][col] == 1) {
                    // 改变数字显示单元格的颜色
                    rects[7 - row][col] = new cc.LayerColor(this.numColor, rectWidth, rectHeight);
                    rects[7 - row][col].setPosition(initX + col * (cellSpace + rectWidth), initY + (7 - row) * (cellSpace + rectHeight));
                    rects[7 - row][col].ignoreAnchorPointForPosition(false);
                    rects[7 - row][col].setAnchorPoint(0.8, 0.2);
                    this.addChild(rects[7 - row][col]);
                }
            }
        }

        return true;
    },
    getPositionX: function () {
        return this.initX;
    }
});

var Scene0201 = cc.Scene.extend({
    size: cc.winSize,
    ctor: function () {
        this._super();
        var layer = new cc.Layer();
        this.addChild(layer);
        layer.setTag(1);
        // 每秒刷新
        this.refresh();
        this.schedule(this.refresh, 1);
        this.scheduleUpdate();
        return true;
    },
    refresh: function () {
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var seconds = now.getSeconds();
        var hour1 = hour.toString().length > 1 ? hour.toString().charAt(0) : 0;
        var hour2 = hour.toString().length > 1 ? hour.toString().charAt(1) : hour;
        var minute1 = minute.toString().length > 1 ? minute.toString().charAt(0) : 0;
        var minute2 = minute.toString().length > 1 ? minute.toString().charAt(1) : minute;
        var second1 = seconds.toString().length > 1 ? seconds.toString().charAt(0) : 0;
        var second2 = seconds.toString().length > 1 ? seconds.toString().charAt(1) : seconds;
        layer = this.getChildByTag(1);
        layer.removeAllChildren();
        // 添加4个数字和一个冒号
        var initX = 20;
        var initY = this.size.height / 2;
        var num1 = new Layer0201(Number(hour1), initX, initY);
        var num2 = new Layer0201(Number(hour2), num1.getPositionX() + cellSpace * 7 + rectWidth * 8 + 10, initY);
        var num3 = new Layer0201(-1, num2.getPositionX() + cellSpace * 7 + rectWidth * 8 + 10, initY);
        var num4 = new Layer0201(Number(minute1), num3.getPositionX() + cellSpace * 3 + rectWidth * 4 + 10, initY);
        var num5 = new Layer0201(Number(minute2), num4.getPositionX() + cellSpace * 7 + rectWidth * 8 + 10, initY);
        var num6 = new Layer0201(-1, num5.getPositionX() + cellSpace * 7 + rectWidth * 8 + 10, initY);
        var num7 = new Layer0201(Number(second1), num6.getPositionX() + cellSpace * 3 + rectWidth * 4 + 10, initY);
        var num8 = new Layer0201(Number(second2), num7.getPositionX() + cellSpace * 7 + rectWidth * 8 + 10, initY);
        layer.width = num8.getPositionX() + cellSpace * 7 + rectWidth * 8;
        layer.height = cellSpace * 7 + rectWidth * 8;
        layer.setPositionX((this.size.width - layer.width) / 2);
        layer.addChild(num1);
        layer.addChild(num2);
        layer.addChild(num3);
        layer.addChild(num4);
        layer.addChild(num5);
        layer.addChild(num6);
        layer.addChild(num7);
        layer.addChild(num8);
    }
});

// 本节作业：
// 锚点也叫对齐点，是Position对齐的坐标，如果0,0则用这个node的左下角对齐position
// 如果是1,1则用node的右上角对齐
// 0.5,0.5则用node的中心来对齐
// 作业：
// 使用锚点实现 11:58 这个时间的显示，注意要画很多的矩形呦
// 至于这个时间怎么能变 我们后面讲
// 两个冒号 也是矩形

// 预先设置好数组的显示,以01区分
var getNum = function (num) {
    switch (num) {
        case -1:// 冒号
            return [
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0]
            ];
        case 0:
            return [
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 1, 0, 0, 0, 1, 0],
                [0, 1, 0, 1, 0, 0, 1, 0],
                [0, 1, 0, 0, 1, 0, 1, 0],
                [0, 1, 0, 0, 0, 1, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 1, 1, 1, 1, 0, 0]
            ];
        case 1:
            return [
                [0, 0, 0, 1, 1, 0, 0, 0],
                [0, 0, 1, 1, 1, 0, 0, 0],
                [0, 0, 0, 1, 1, 0, 0, 0],
                [0, 0, 0, 1, 1, 0, 0, 0],
                [0, 0, 0, 1, 1, 0, 0, 0],
                [0, 0, 0, 1, 1, 0, 0, 0],
                [0, 0, 0, 1, 1, 0, 0, 0],
                [0, 0, 1, 1, 1, 1, 0, 0]
            ];
        case 2:
            return [
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 1, 0, 0],
                [0, 0, 0, 0, 1, 0, 0, 0],
                [0, 0, 0, 1, 0, 0, 0, 0],
                [0, 0, 1, 0, 0, 0, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 1, 1, 1, 1, 1, 0]
            ];
        case 3:
            return [
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 1, 1, 1, 1, 0, 0]
            ];
        case 4:
            return [
                [0, 0, 0, 0, 1, 0, 1, 0],
                [0, 0, 0, 1, 0, 0, 1, 0],
                [0, 0, 1, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 1, 1, 1, 1, 1, 1],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 0]
            ];
        case 5:
            return [
                [0, 1, 1, 1, 1, 1, 1, 0],
                [0, 1, 0, 0, 0, 0, 0, 0],
                [0, 1, 0, 0, 0, 0, 0, 0],
                [0, 1, 1, 1, 1, 1, 0, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 1, 1, 1, 1, 1, 0, 0]
            ];
        case 6:
            return [
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 0, 0],
                [0, 1, 1, 1, 1, 1, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 1, 1, 1, 1, 0, 0]
            ];
        case 7:
            return [
                [0, 0, 1, 1, 1, 1, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 0, 0, 0, 0, 1, 0, 0],
                [0, 0, 0, 0, 1, 0, 0, 0],
                [0, 0, 0, 1, 0, 0, 0, 0],
                [0, 0, 1, 0, 0, 0, 0, 0],
                [0, 1, 0, 0, 0, 0, 0, 0]
            ];
        case 8:
            return [
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 1, 1, 1, 1, 0, 0]
            ];
        case 9:
            return [
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 1, 1, 1, 1, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 0],
                [0, 1, 0, 0, 0, 0, 1, 0],
                [0, 0, 1, 1, 1, 1, 0, 0]
            ];
    }
}

最后运行效果

http://www.cocoscvp.com/usercode/2016_04_16/6858edf544c179b468a707b8c67cb7a96e83540e/

大爷赏点儿呗.

欢迎关注我的其它发布渠道