Cocos2d-js 3.x: 像素触摸

像素触摸的大致思路都是一样的，无论是-x中的版本还是html5中。

第一步：获得纹理的像素信息。

第二步：根据图片的像素信息获得触摸（点击）点上的像素信息。

第三步：触摸判断，是否透明。透明则不处理，不透明则触摸到了。

具体的实现思路：

目前我们基本上都是使用UIButton这个类，所以我只实现了这个的简单封装，其他的都类似。

第一步：修改Button的onTouchBegan函数，截取开始的触摸事件，在这个地方实现是否为透明区域的判断处理。

第二步：为Sprite添加一个读取纹理像素信息的方法

第三步：给UIButton添加方法，设置是否实用像素触摸。

使用方法：

       在创建按钮的地方，设置按钮是否使用像素触摸即可。

      

具体实现：

cc.Sprite.prototype._pixels = [];cc.Sprite.prototype.readPixels = function(x,y){    var w = this.width;    var h = this.height;    if(!this._pixels || this._pixels.length == 0){        var canvas = cc.newElement("canvas");       // 创建一个新的元素节点        canvas.width = w;        canvas.height = h;        var ctx = canvas.getContext("2d");                           // 获得一个2d的画布(通过它就可以这个画布上的像素信息,我们只在上面绘制一张图片)        ctx.drawImage(this.getTexture().getHtmlElementObj(), 0, 0);  // 因此获得的像素信息也就等于是这个图片的像素信息</span>        this._pixels = ctx.getImageData(0, 0, w, h).data;            // 获得像素信息    }    var idx = (h-y) * w * 4 + x * 4;                                 // 根据触摸坐标得到像素上的索引    return [this._pixels[idx],this._pixels[idx + 1],this._pixels[idx + 2],this._pixels[idx + 3]]; // 返回这个点上的的像素信息};ccui.Button.prototype.setPixelTouchEnabled = function (b) {    this._pixelEnabled = b;};ccui.Button.prototype.getPixelTouchEnabled = function (b) {    return this._pixelEnabled;};ccui.Widget.prototype.onTouchBegan = function (touch, event) {    this._hit = false;    if (this.isVisible() && this.isEnabled() && this._isAncestorsEnabled() && this._isAncestorsVisible(this) ){        var touchPoint = touch.getLocation();        this._touchBeganPosition.x = touchPoint.x;        this._touchBeganPosition.y = touchPoint.y;        if(this.hitTest(this._touchBeganPosition) && this.isClippingParentContainsPoint(this._touchBeganPosition))            this._hit = true;        var target = event.getCurrentTarget();        if(target instanceof ccui.Button && target.getPixelTouchEnabled()){            var locationInNode = target.convertToNodeSpace(touchPoint);            //var locationInNode = touchPoint;            var s = target.getContentSize();            var rect = cc.rect(0, 0, s.width, s.height);            if (cc.rectContainsPoint(rect, locationInNode)) {                var sp = target.getVirtualRenderer();                var x = locationInNode.x;                var y = locationInNode.y;

                if(sp instanceof cc.Sprite){                    var pexels = sp.readPixels(Math.round(x),Math.round(y));                    cc.log("alhpa : %d", (pexels[3]));                    if(pexels[3] > 0){                        // 非透明                        this._hit = true;                    }else{                        // 透明                        this._hit = false;                    }                }            }        }    }    if (!this._hit) {        return false;    }    this.setHighlighted(true);    /*     * Propagate touch events to its parents     */    if (this._propagateTouchEvents)    {        this.propagateTouchEvent(ccui.Widget.TOUCH_BEGAN, this, touch);    }    this._pushDownEvent();    return true;};

最后补充：

   当我写完canvas版本的时候，想到要做到位，肯定也要支持webGL。webGL的绘制方法和canvas不一样。但是找了半天，没有找到方法。于是我想，webGL严格来说是属于canvas上的内容。然后直接实验这段代码能不能在webGL模式下跑，测试后通过，没问题。

最近还在学习webGL，有结果了再补充原因。