利用ClippingNode来实现橡皮擦功能

我这里没有封装主要讲一下原理通过这种方式不能完全实现自定义图片涂擦功能

我先上一段代码

SpriteBatchNode* spriteTexture = SpriteBatchNode::create("123.png");//橡皮擦图片
	addChild(spriteTexture);
	auto node = Sprite::create("HelloWorld.png");//创建一个需要剪裁的节点可以是精灵也可是层
	node->setPosition(visibleSize.width/2,visibleSize.height/2);
	auto Cliper = ClippingNode::create();//创建剪裁区域 把需要剪裁的NODe都可以添加进来
	Cliper->addChild(node);//添加NODE
	auto EraserList = Node::create();//创建 一个NODE是用来剪裁 通过不停的添加精灵来实现橡皮擦的效果
	Cliper->setStencil(EraserList);//设置剪裁区域的剪刀是EraserList (可以这样理解吧)
	Cliper->setInverted(true);//切换 显示被减区域还是反向
	this->addChild(Cliper);//添加cliper到该层
	/*创建监听事件*/
	auto linstener = EventListenerTouchOneByOne::create();

	linstener->onTouchBegan = [this,Cliper,EraserList,spriteTexture](Touch *touch,Event *event)
	{
			return true;
	
	
	};
	linstener->onTouchMoved = [this,Event *event)
	{
		auto erasersprite = Sprite::createWithTexture(spriteTexture->getTexture());
		erasersprite->setPosition(touch->getLocation());
		EraserList->addChild(erasersprite);

	};

	linstener->onTouchEnded = [this,Event *event)
	{
		auto erasersprite = Sprite::createWithTexture(spriteTexture->getTexture());
		erasersprite->setPosition(touch->getLocation());
		EraserList->addChild(erasersprite);//通过不停添加精灵实现橡皮擦效果

	};

	_eventDispatcher->addEventListenerWithSceneGraphPriority(linstener,this);

好我们来看下效果我的123.png是这张图

效果图:

大家会发现我123.png是圆的为什么橡皮擦还是方的因为创建的时候就是一张2D纹理拥有长宽(像素);当然如果你想要圆形也是可以的

通过drawPolygon函数画一个圆然后添加到EraserList当中就能实现这里就不多说了代码注释也很清楚 ;

哪要怎么实现真正的自定义图片擦除呢在下一篇我会写出我想的到方法实现

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...