cec/demo-web/sprite_img.html at master · hongru/cec · GitHub

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<!--kissy seed for browser -->
<script src="http://g.tbcdn.cn/kissy/k/1.3.2/seed.js"></script>
<style>
canvas {
    display: block;
    border: 1px solid #ccc;
    margin: 0 auto;
}
</style>
</head>

<body>
<canvas id="canvas" width="800" height="600"></canvas>

<script>
    var S = KISSY;
    if (S.Config.debug) {
        S.config({
            packages:[
                {
                    name:"cec",
                    path:'../src/cec/',
                    charset:"utf-8",
                    ignorePackageNameInUri:true
                }
            ]
        });
    }

    S.use('cec/ticker/,cec/sprite/rectsprite', function (S, Ticker, RectSprite) {
        var stage = new RectSprite('canvas');

        var rect = new RectSprite({
            x: 200,
            y: 100,
            width: 200,
            height: 200,
            backgroundImage: 'http://a.tbcdn.cn/s/kissy/logo.png',
            //backgroundPosition: [-50, 0]
        })
        .setFillColor('#333')
        .appendTo(stage)
        .on('img:ready', function (img) {
            this.ready = true;
            this.setDim(img.width, img.height);
        }).on('render:before', function () {
            if (this.ready) {
                this.rotate('+1');
                this.ss = this.ss || '-0.01';
                if (/\+/.test(this.ss) && this.scaleX >= 2) this.ss = '-0.01';
                if (/\-/.test(this.ss) && this.scaleX <= 0.5) {this.ss = '+0.01';}

                this.setScale(this.ss, this.ss);
            }

        })


        Ticker.singleton.on('tick', function (dt) {
            stage.clear();
            stage.render(dt);
        });
    });
</script>
</body>
</html>