var qcanvas = new Qcanvas({
    	id: 'qcanvas',
	    width: 300,
	    height: 200,
    });

    var greenRect = qcanvas.rect({
        start: [0, 0],
        width: 200,
        height: 200,
        drag: false,
        borderColor: 'green',
        fillColor: 'green',
        mousemove: function() {
            // console.log(qcanvas.dragAim);

            // if(qcanvas.dragAim !== null && qcanvas.dragAim.id == this.id){
            // 	console.log()
            // }
        },
    })

    var redRect = qcanvas.rect({
        start: [100, 100],
        width: 50,
        height: 50,
        borderColor: 'red',
        fillColor: 'red',
        // degree:30
        // drag:false
    })







    var blueRect = qcanvas.rect({
        start: [120, 140],
        width: 50,
        height: 50,
        borderColor: 'blue',
        fillColor: 'blue',
        degree: 30
        // drag:false
    })









    //layer元素
    var layer = qcanvas.layer();

    layer.push(redRect, blueRect);

    // layer.push(blueRect);


    layer.raise(redRect);




    qcanvas.load({
        "person": "../img/spirit1.png",
    }, function() {

        var spiritSource = qcanvas.getSourceByName("person");

        var s = qcanvas.spirit({
            img: spiritSource,
            row: 1,
            column: 8,
            framesIndex: [0, 0],
            tStart: [0, 120],
            tWidth: 40,
            tHeight: 64,
            isLoop: true,
            during: 1,
            mouseup: function() {
                console.log(this);
                console.log('触发mouseup事件');
            }
        })

        var t = qcanvas.text({
            start: s.tStart,
            text: '我是来自layer容器里spirit',
            color: '#000',
            pointerEvent: 'none'
        })



        layer.push(t);
        layer.push(s);

    })




    qcanvas.text({
        start: [200, 20],
        text: 'greenRect上移一层',
        color: "yellow",
        drag: false,
        mouseup: function() {
            qcanvas.raise(greenRect);
        }
    })

    qcanvas.text({
        start: [200, 40],
        text: 'greenRect下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.lower(greenRect);
        }
    })

    qcanvas.text({
        start: [200, 60],
        text: 'redRect上移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            layer.raise(redRect);
        }
    })
    qcanvas.text({
        start: [200, 80],
        text: 'redRect下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            layer.lower(redRect);
        }
    })

    qcanvas.text({
        start: [200, 100],
        text: 'layer下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.lower(layer);
        }
    })

    qcanvas.text({
        start: [200, 120],
        text: 'layer上移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.raise(layer);
        }
    })