Setting a background color and a border around a node

cocos2d-x C++
1

I currently have a cocos2d::ui::ScrollView . I wan to give the visible region a white background and give the border color a red color. I wanted to know what is the best approach to accomplish this. ?

2

Set the background of the scrollview to white and bg type to SOLID.

Couple options I can think of for the border:

  1. Use a DrawNode and drawRect(…)
  2. Add a LayerColor behind the scrollview with [border_width] * 2 larger size than the scrollview

You’ll have to position either option correctly, but that’s where I’d probably start unless you want to pull in the outline shader from cpp-tests or from the font system.

3

This setup may not work in your situation if there’s z-order issues with it, but it’s an example.

    auto bg = LayerColor::create(Color4B::RED, 102, 102);
    addChild(bg,99);

    auto sv = ui::ScrollView::create();
    sv->setBackGroundColor(Color3B::WHITE);
    sv->setBackGroundColorType(ui::Layout::BackGroundColorType::SOLID);
    sv->setContentSize(Size(100,100));
    sv->setDirection(ui::ScrollView::Direction::VERTICAL);
    sv->setPropagateTouchEvents(false);

    auto bg2 = LayerGradient::create(Color4B::GREEN, Color4B::BLUE);
    bg2->setContentSize(Size(50,500));
    sv->setInnerContainerSize(bg2->getContentSize());
    sv->addChild(bg2);

    bg->setPosition(Vec2(99,99));
    sv->setPosition(Vec2(100,100));

    addChild(sv,100);
4

Thanks for clearing that up.