利用ClippingNode来实现橡皮擦功能

前端之家收集整理的这篇文章主要介绍了利用ClippingNode来实现橡皮擦功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

我先上一段代码

  1. SpriteBatchNode* spriteTexture = SpriteBatchNode::create("123.png");//橡皮擦图片
  2. addChild(spriteTexture);
  3. auto node = Sprite::create("HelloWorld.png");//创建一个需要剪裁的节点可以是精灵也可是层
  4. node->setPosition(visibleSize.width/2,visibleSize.height/2);
  5. auto Cliper = ClippingNode::create();//创建剪裁区域 把需要剪裁的NODe都可以添加进来
  6. Cliper->addChild(node);//添加NODE
  7. auto EraserList = Node::create();//创建 一个NODE是用来剪裁 通过不停的添加精灵来实现橡皮擦的效果
  8. Cliper->setStencil(EraserList);//设置剪裁区域的剪刀是EraserList (可以这样理解吧)
  9. Cliper->setInverted(true);//切换 显示被减区域还是反向
  10. this->addChild(Cliper);//添加cliper到该层
  11. /*创建监听事件*/
  12. auto linstener = EventListenerTouchOneByOne::create();
  13.  
  14. linstener->onTouchBegan = [this,Cliper,EraserList,spriteTexture](Touch *touch,Event *event)
  15. {
  16. return true;
  17. };
  18. linstener->onTouchMoved = [this,Event *event)
  19. {
  20. auto erasersprite = Sprite::createWithTexture(spriteTexture->getTexture());
  21. erasersprite->setPosition(touch->getLocation());
  22. EraserList->addChild(erasersprite);
  23.  
  24. };
  25.  
  26. linstener->onTouchEnded = [this,Event *event)
  27. {
  28. auto erasersprite = Sprite::createWithTexture(spriteTexture->getTexture());
  29. erasersprite->setPosition(touch->getLocation());
  30. EraserList->addChild(erasersprite);//通过不停添加精灵实现橡皮擦效果
  31.  
  32. };
  33.  
  34. _eventDispatcher->addEventListenerWithSceneGraPHPriority(linstener,this);

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

效果图:

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

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

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

猜你在找的Cocos2d-x相关文章