cocos2dx3.0 遮罩技术, ClippingNode 和 DrawNode

谁借莪１个温暖的怀抱￠ 2022-08-11 10:59 133阅读 0赞

先来说一下DrawNode类,这个是画图类,可以画各种几何形状.

auto s = Director::getInstance()->getWinSize();
        
        auto draw = DrawNode::create();
        addChild(draw, 10);
        
        // Draw 10 circles
    //    画同心圆
        for( int i=0; i < 10; i++)
        {
            draw->drawDot(Point(s.width/2, s.height/2), 10*(10-i), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 1));
        }
        
        // Draw polygons
    //    画大三角形
        Point points[] = { Point(s.height/4,0), Point(s.width,s.height/5), Point(s.width/3*2,s.height) };
        draw->drawPolygon(points, sizeof(points)/sizeof(points[0]), Color4F(1,0,0,0.5), 4, Color4F(0,0,1,1));
        
        // star poly (triggers buggs)
    //    画多边形
        {
            const float o=80;
            const float w=20;
            const float h=50;
            Point star[] = {
                Point(o+w,o-h), Point(o+w*2, o),                        // lower spike
                Point(o + w*2 + h, o+w ), Point(o + w*2, o+w*2),        // right spike
    //                          {o +w, o+w*2+h}, {o,o+w*2},                 // top spike
    //                          {o -h, o+w}, {o,o},                         // left spike
            };
            
            draw->drawPolygon(star, sizeof(star)/sizeof(star[0]), Color4F(1,0,0,0.0), 1, Color4F(0,0,1,1));
        }
        
        // star poly (doesn't trigger bug... order is important un tesselation is supported.
        //画星
        {
            const float o=180;
            const float w=20;
            const float h=50;
            Point star[] = {
                Point(o,o), Point(o+w,o-h), Point(o+w*2, o),        // lower spike
                Point(o + w*2 + h, o+w ), Point(o + w*2, o+w*2),    // right spike
                Point(o +w, o+w*2+h), Point(o,o+w*2),               // top spike
                Point(o -h, o+w),                                     // left spike
            };
            
            draw->drawPolygon(star, sizeof(star)/sizeof(star[0]), Color4F(1,0,0,0.5), 1, Color4F(0,0,1,1));
        }
        
        
        // Draw segment
    //    画直线，可加粗
        draw->drawSegment(Point(20,s.height), Point(20,s.height/2), 10, Color4F(0, 1, 0, 1));
        
        draw->drawSegment(Point(10,s.height/2), Point(s.width/2, s.height/2), 40, Color4F(1, 0, 1, 0.5));
        
        // Draw triangle
    //    画三角形
        draw->drawTriangle(Point(10, 10), Point(70, 30), Point(100, 140), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));
        
        // Draw some beziers
        //    画二次方程的贝塞尔曲线
        draw->drawQuadraticBezier(Point(s.width - 150, s.height - 150), Point(s.width - 70, s.height - 10), Point(s.width - 10, s.height - 10), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));
        //    画三次方程的贝塞尔曲线
        draw->drawCubicBezier(Point(s.width - 250, 40), Point(s.width - 70, 100), Point(s.width - 30, 250), Point(s.width - 10, s.height - 50), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));

ClippingNode类是裁剪类下边以代码演示一下就更清楚了.

void ShadeLayer::addSprite(cocos2d::Sprite *sprite)
    {
        CCLOG("%s", __FUNCTION__);
        if ( sprite->getTag() == 10 )
        {
            auto shape = DrawNode::create(); //画个跟sprite一样大小的形状
            Vec2 vec[] = {Vec2(sprite->getBoundingBox().getMinX(), sprite->getBoundingBox().getMaxY()),
                Vec2(sprite->getBoundingBox().getMaxX(), sprite->getBoundingBox().getMaxY()),
                Vec2(sprite->getBoundingBox().getMaxX(), sprite->getBoundingBox().getMinY()),
                Vec2(sprite->getBoundingBox().getMinX(), sprite->getBoundingBox().getMinY())};
            shape->drawPolygon(vec, 4, Color4F(1, 0, 0, 0), 2, Color4F(0, 0, 1, 1));
            
            ClippingNode *clipping = ClippingNode::create();
            clipping->setStencil( shape );  //遮罩的形状
            clipping->setInverted( true );  //为真 遮罩下什么都不显示, 为假 只有在遮罩下才显示东西.
            clipping->addChild(sprite, 1);  //只有在clipping节点下的东西才有遮罩效果
            
            addChild( clipping );
        }else
            addChild( sprite );
    }