how can I set mask to let group2 wrapped in group1 with cornerRadius

edwinliang

package;

import feathers.skins.RectangleSkin;
import feathers.layout.HorizontalLayout;
import feathers.controls.LayoutGroup;
import feathers.controls.Application;

class Main extends Application {
	public function new() {
		super();
		var group1 = new LayoutGroup();
		group1.layout = new HorizontalLayout();
		group1.width = 500;
		group1.height = 500;
		var skin1 = new RectangleSkin(FillStyle.SolidColor(0xFF0000));
		skin1.cornerRadius = 20;
		group1.backgroundSkin = skin1;
		// group1.mask = ???;
		addChild(group1);

		var group2 = new LayoutGroup();
		group2.layout = new HorizontalLayout();
		group2.width = 800;
		group2.height = 800;
		var skin2 = new RectangleSkin(FillStyle.SolidColor(0x00FF00, .5));
		group2.backgroundSkin = skin2;
		group1.addChild(group2);

		// how can I set mask to let group2 wrapped in group1 with cornerRadius (like css overflow:hidden)
	}
}

edwinliang

I resolve the issue by myself.

		var group1 = new MaskLayoutGroup();
		group1.layout = new HorizontalLayout();
		group1.width = 500;
		group1.height = 500;
		var skin1 = new RectangleSkin(FillStyle.SolidColor(0xFF0000));
		skin1.cornerRadius = 20;
		group1.backgroundSkin = skin1;
		addChild(group1);
		group1.addEventListener(MouseEvent.MOUSE_DOWN, e -> {
			group1.width += 100;
			group1.height += 100;
		});

		var group2 = new LayoutGroup();
		group2.layout = new HorizontalLayout();
		group2.width = 800;
		group2.height = 800;
		var skin2 = new RectangleSkin(FillStyle.SolidColor(0x00FF00, .5));
		group2.backgroundSkin = skin2;
		group1.addChild(group2);

MaskLayoutGroup.hx

import feathers.skins.RectangleSkin;
import openfl.display.Sprite;
import feathers.controls.LayoutGroup;

class MaskLayoutGroup extends LayoutGroup {
	public function new() {
		super();
		mask = new Sprite();
	}

	override public function update():Void {
		super.update();
		if (backgroundSkin != null) {
			if (backgroundSkin is RectangleSkin) {
				var bg = cast(backgroundSkin, RectangleSkin);
				var sp = cast(mask, Sprite);
				sp.graphics.clear();
				sp.graphics.beginFill();
				sp.graphics.drawRoundRect(0, 0, width, height, bg.cornerRadius * 2, bg.cornerRadius * 2);
				sp.graphics.endFill();
			}
		}
	}
}