最近研究了一下像素级的触摸处理，有时候我们用一个不规则的图形作为一个按钮，这个不规则的图形是一张矩形的png图片，很可能图片的实际有效的显示内容只占整个png图片的很小一部分，剩下的大部分都是png图片的透明区域，我们想把这部分透明区域过滤掉，实现一个触摸到真实的内容才会有按钮响应的效果。

刚开始试图通过CCSprite直接获取到纹理的像素信息，但是Cocos2d-x并没有给我们提供直接通过CCSprite获取像素信息的接口，研究了几个网上的Demo，发现通过使用RenderTexture重绘可以实现这一效果，下面把代码贴出来。

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 @H_403_84@ 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 @H_301_122@ 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

#include"HelloWorldScene.h"@H_502_267@ #include"SimpleAudioEngine.h"@H_502_267@ @H_502_267@ using@H_502_267@ namespace@H_502_267@ cocos2d;@H_502_267@ CocosDenshion;@H_502_267@ @H_502_267@ CCScene*HelloWorld::scene()@H_502_267@ {@H_502_267@ @H_329_301@ @H_502_267@ //'scene'isanautoreleaSEObject@H_502_267@ @H_502_267@ CCScene*scene=CCScene::create();@H_502_267@ @H_502_267@ //'layer'isanautoreleaSEObject@H_502_267@ HelloWorld*layer=HelloWorld::create();@H_502_267@ @H_502_267@ //addlayerasachildtoscene@H_502_267@ scene->addChild(layer);@H_502_267@ @H_502_267@ //returnthescene@H_502_267@ @H_502_267@ return@H_502_267@ scene;@H_502_267@ }@H_502_267@ @H_502_267@ bool@H_502_267@ HelloWorld::init()@H_502_267@ @H_502_367@ {@H_502_267@ if@H_502_267@ (!CCLayer::init()){@H_502_267@ return@H_502_267@ false@H_502_267@ ;@H_502_267@ }@H_502_267@ @H_502_267@ this@H_502_267@ ->setTouchEnabled(@H_502_267@ true@H_502_267@ );@H_502_267@ @H_869_403@ @H_502_267@ ->m_imgMan=CCSprite::create(@H_502_267@ "man.png"@H_502_267@ );@H_502_267@ ->m_imgMan->setPosition(ccp(400,200));@H_502_267@ ->addChild(@H_502_267@ ->m_imgMan,1);@H_502_267@ @H_502_267@ ->m_pRenderTexture=CCRenderTexture::create(@H_502_267@ ->m_imgMan->getContentSize().width,@H_502_267@ ->m_imgMan->getContentSize().height,kCCTexture2DPixelFormat_RGBA8888);@H_502_267@ ->m_pRenderTexture->ignoreAnchorPointForPosition(@H_502_267@ );@H_502_267@ ->m_pRenderTexture->setPosition(ccp(400,200));@H_502_267@ ->m_pRenderTexture->setAnchorPoint(CCPointZero);@H_502_267@ ->m_pRenderTexture,1);@H_502_267@ @H_502_267@ @H_502_267@ ;@H_502_267@ }@H_502_267@ @H_502_267@ HelloWorld::ccTouchBegan(cocos2d::CCTouch*pTouch,cocos2d::CCEvent*pEvent){@H_502_267@ @H_502_267@ @H_502_267@ isTouched=@H_502_267@ ;@H_502_267@ @H_502_267@ CCPointtouchPoint=pTouch->getLocationInView();@H_502_267@ CCPointglPoint=CCDirector::sharedDirector()->convertToGL(touchPoint);@H_502_267@ @H_502_267@ @H_502_267@ (@H_502_267@ ->m_imgMan->boundingBox().containsPoint(glPoint)){@H_502_267@ @H_502_267@ ccColor4Bcolor4B={0,0};@H_502_267@ @H_502_267@ CCPointnodePos=@H_502_267@ ->m_imgMan->convertTouchToNodeSpace(pTouch);@H_502_267@ unsigned@H_502_267@ int@H_502_267@ x=nodePos.x;@H_502_267@ y=@H_502_267@ ->m_imgMan->getContentSize().height-nodePos.y;@H_502_267@ @H_301_549@ @H_502_267@ CCPointpoint=@H_502_267@ ->m_imgMan->getPosition();@H_502_267@ //开始准备绘制@H_502_267@ ->m_pRenderTexture->begin();@H_502_267@ //绘制使用的临时精灵，与原图是同一图片@H_502_267@ CCSprite*pTempSpr=CCSprite::createWithSpriteFrame(@H_502_267@ ->m_imgMan->displayFrame());@H_502_267@ pTempSpr->setPosition(ccp(pTempSpr->getContentSize().width/2,pTempSpr->getContentSize().height/2));@H_502_267@ //绘制@H_502_267@ pTempSpr->visit();@H_502_267@ //结束绘制@H_502_267@ ->m_pRenderTexture->end();@H_502_267@ //通过画布拿到这张画布上每个像素点的信息，封装到CCImage中@H_502_267@ CCImage*pImage=@H_502_267@ ->m_pRenderTexture->newCCImage();@H_502_267@ //获取像素数据@H_502_267@ char@H_502_267@ *data_=pImage->getData();@H_502_267@ *pixel=(unsigned@H_502_267@ *)data_;@H_502_267@ pixel=pixel+(y*(@H_502_267@ )pTempSpr->getContentSize().width)*1+x*1;@H_502_267@ //R通道@H_502_267@ color4B.r=*pixel&0xff;@H_502_267@ //G通道@H_502_267@ color4B.g=(*pixel>>8)&0xff;@H_502_267@ //B通过@H_502_267@ color4B.b=(*pixel>>16)&0xff;@H_502_267@ //Alpha通道，我们有用的就是Alpha@H_502_267@ color4B.a=(*pixel>>24)&0xff;@H_502_267@ @H_502_267@ CCLOG(@H_502_267@ "当前点击的点的:alpha=%d"@H_502_267@ ,color4B.a);@H_502_267@ @H_502_267@ (color4B.a>50){@H_502_267@ ;@H_502_267@ }@H_502_267@ else@H_502_267@ {@H_502_267@ ;@H_502_267@ }@H_502_267@ @H_502_267@ //绘制完成后清理画布的内容@H_502_267@ ->m_pRenderTexture->clear(0,0);@H_502_267@ }@H_502_267@ @H_502_267@ @H_502_267@ ->m_pLabTips){@H_502_267@ ->m_pLabTips->removeFromParentAndCleanup(@H_502_267@ );@H_502_267@ ->m_pLabTips=NULL;@H_502_267@ }@H_502_267@ @H_502_267@ isTouched;@H_502_267@ }@H_502_267@ @H_502_267@ @H_502_267@ void@H_502_267@ HelloWorld::ccTouchEnded(cocos2d::CCTouch*pTouch,cocos2d::CCEvent*pEvent){@H_502_267@ @H_502_267@ ->m_pLabTips){@H_502_267@ );@H_502_267@ ->m_pLabTips=NULL;@H_502_267@ }@H_502_267@ @H_502_267@ ->m_pLabTips=CCLabelTTF::create(@H_502_267@ "点击到非透明的像素点"@H_502_267@ 502_267@ "Courier"@H_502_267@ 502_267@ ->m_pLabTips->setAnchorPoint(CCPointZero);@H_502_267@ ->m_pLabTips->setPosition(ccp(300.0f,100.0f));@H_502_267@ ->m_pLabTips->setColor(ccYELLOW);@H_502_267@ ->m_pLabTips,1);@H_502_267@ @H_502_267@ }@H_502_267@ @H_502_267@ HelloWorld::registerWithTouchDispatcher(){@H_502_267@ CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(@H_502_267@ );@H_502_267@ }@H_502_267@

当点击到了有色点时，我让屏幕上显示黄字提示，并观察打印日志信息：

当点击到了透明的黑色区域时，屏幕上不显示任何文字，观察打印日志信息：

实现的原理：我通过点击的时候把图片进行重绘，重绘的过程中，可以通过RenderTexture也就是画布，把整个画布上的像素点信息全部拿到，我让绘制的内容和画布的大小是一样的，所以就能保证画布上的每一个像素点就是我想要绘制的图片的像素点，然后通过判断像素点的alpha通道值，来确定这个点是否是透明色的，如果是透明色则不做触摸响应。

来源网址：http://www.jb51.cc/article/p-hanpyxyd-g.html