Cocos---监听、触摸事件、坐标系转换

监听、触摸事件、坐标系转换#

Creator的系统事件#

分为“节点系统事件”和“全局系统事件”。
节点系统事件：触发在节点上，包括鼠标事件和触摸事件。
全局系统事件：包括键盘和重力传感事件。
需要通过监听的方法来实现。

监听的注册#

1. 节点.on(节点系统事件的枚举类型或事件名， function（event）{}，target）；

2. 节点.on(节点系统事件的枚举类型或事件名， this.函数名，target）；函数名（event）{}

（1）使用枚举类型来注册
node.on(cc.Node.EventType.MOUSE_DOWN, function (event) {
console.log('Mouse down');
}, this);
（2）使用事件名来注册
node.on('mousedown', function (event) {
console.log('Mouse down');
}, this);

Target：绑定响应函数的调用者。#

This---谁点击，函数中this指的是谁。等价于函数上加bind（this）。
某节点---在函数中的this指的是某节点，而不是发生点击的节点。

例子#

red和white在属性列表中定义，脚本节点
this.red.on('mousedown',function(){
            console.log("red");
            console.log(this);
        },this);//this----指向当前这个类，如果脚本挂在某个节点上，this.node相当于指向这个节点
        // 等价于下面的写法
        this.red.on('mousedown',function(){
            console.log("redred");
            console.log(this);
        }.bind(this));
this.white.on('mousedown',function(){
            console.log("white");
            console.log(this.name);//this相当于this.red,所以不能写this.node.name
        },this.red);

监听的关闭#

当监听不需要的时候，一定要关闭，消耗资源比较大。
必须把回调函数单独写。

关闭监听的格式
This.node.on(‘’,this.函数名，this）；
This.node.off(‘’,this.函数名，this）；
函数名（）{    }----写在生命周期接口外

例子#

start () {      
    //关闭监听
    this.red.on('mousedown',this.redclick,this);
    
    this.white.on('mousedown',function(){
        this.red.off('mousedown',this.redclick,this);
    },this)
}
redclick(){
    console.log("red");       
}

移除目标上的所有注册事件。#

This.node.targetOff(this)

【例】#

this.red.on('mousedown',function(){console.log('down')},this);  
this.red.on('mouseup',function(){console.log('up')},this);  
this.white.on('mousedown',function(){
			 console.log('white');
			this.red.targetOff(this);
	},this)

触摸事件#

触摸事件在移动平台和桌面平台都会触发，只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。

例子#

@property(cc.Node)
    white: cc.Node = null;//注意定义为Node和Sprite类型，注册监听的区别

    onLoad () {
        this.white.on("touchstart",function(t){
            console.log('touchstart');
        },this);
        this.white.on('touchmove',function(t){
            console.log('touchmove');
        },this);
        this.white.on('touchend',function(t){
            console.log('touchend');
        },this);
        this.white.on('touchcancel',function(t){
            console.log('touchcancel');
        },this);       
}

cc.node其他的事件#

触摸事件常用API应用案例#

获取触摸位置#

可以通过回调函数的参数t获取触摸位置，此坐标是一个世界坐标系下的vec3对象。
坐标空间
Creator的坐标系分为世界坐标系和相对坐标系。
世界坐标系以左下角为原点

1. Node.convertToWorldSpaceAR(Vec2)把相对于该节点的坐标vec2转换为世界坐标系下的坐标。
2. Node.convertToNodeSpaceAR(Vec2)把世界坐标系下的坐标vec2转换为相对于节点node坐标空间的的坐标。
   凡是有AR的，以锚点作为中心点。
   

获取触摸位置，实现拖动一个对象。#

this.red.on('touchmove',function(t){
			let p = this.node.convertToNodeSpaceAR(t.getLocation());
			this.red.x = p.x;
			this.red.y = p.y;
		},this)

【例】#

    @property(cc.Node)
    white: cc.Node = null;//注意定义为Node和Sprite类型，注册监听的区别
    @property(cc.Node)
    blue:cc.Node = null;
    @property(cc.Node)
    red:cc.Node = null;

    onLoad () {
        //把blue相对白色节点的坐标转换为世界坐标
        let v1 = this.blue.convertToWorldSpaceAR(this.blue.position);
        console.log(v1.x,v1.y);
        //white的触摸事件监听
        this.white.on("touchstart",function(t){
            console.log('touchstart');
        },this);
        this.white.on('touchmove',function(t){
            console.log('touchmove');                     
        },this);
        this.white.on('touchend',function(t){
            console.log('touchend');
        },this);
        this.white.on('touchcancel',function(t){
            console.log('touchcancel');
        },this);   

        //转换触点的坐标空间
        this.node.on('touchmove',function(t){
            let touch_position = t.getLocation();
            // console.log(touch_position.x,touch_position.y);
            //转换为相对于canvas节点空间的坐标,以锚点为参考点。
            let position = this.node.convertToNodeSpaceAR(touch_position);
            console.log(position.x,position.y);  
        },this);        
       
        //通过获取触摸位置，实现拖动一个对象
        this.red.on('touchmove',function(t){
            let p = this.node.convertToNodeSpaceAR(t.getLocation());
            this.red.x = p.x;
            this.red.y = p.y;
        },this)    
       
}

Vec3的相关API#

https://docs.cocos.com/creator/api/zh/classes/Vec3.html?h=向量长度