加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

利用ClippingNode来实现橡皮擦功能

发布时间:2020-12-14 19:29:17 所属栏目:百科 来源:网络整理
导读:我这里没有封装主要讲一下原理通过这种方式不能完全实现自定义图片涂擦功能 我先上一段代码 SpriteBatchNode* spriteTexture = SpriteBatchNode::create("123.png");//橡皮擦图片addChild(spriteTexture);auto node = Sprite::create("HelloWorld.png");//创

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

我先上一段代码

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当中就能实现这里就不多说了代码注释也很清楚 ;

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读