litho icon indicating copy to clipboard operation
litho copied to clipboard

The component should be transparent outside the border

Open ooga opened this issue 8 years ago • 8 comments

Version

0.6.2-SNAPSHOT (b0b286e1aeb45fd368b8e2764a6269f1590afa2e)

Issues and Steps to Reproduce

screenshot_1504517985

Apply rounded corner and background color on a component

Expected Behavior

The component should be transparent outside the border

Example code

Row.create(c)
    .child(
        Text.create(c)
            .textSizeSp(20)
            .text("This component has rounded corners + background color"))
    .border(
        Border.create(c)
            .widthDip(YogaEdge.ALL, 10)
            .color(YogaEdge.ALL, NiceColor.GREEN)
            .cornerEffect(40f)
            .build()
    )
    .backgroundColor(NiceColor.BLUE)
    .paddingDip(YogaEdge.ALL, 10)

ooga avatar Sep 04 '17 09:09 ooga

cc @xiphirx

passy avatar Sep 04 '17 09:09 passy

Thanks for the report, I'll see what I can do about this. The issue is that the background and border are both handled separately, so one does not know of the other.

xiphirx avatar Sep 04 '17 10:09 xiphirx

So looking more into this, there are some issues with adding in support. The biggest issue is clipping to an arbitrary border outline. While technically possible, it will introduce pretty big performance issues, especially on lower API levels, since clipPath is only hardware accelerated on APIs 18+. Additionally, clipPath isn't anti aliased with hardware acceleration.

We can definitely add in this support later on in the project's lifetime if we update the min sdk to 21+

xiphirx avatar Sep 07 '17 17:09 xiphirx

Any updates on this?

caiiiycuk avatar Aug 26 '19 08:08 caiiiycuk

So looking more into this, there are some issues with adding in support. The biggest issue is clipping to an arbitrary border outline. While technically possible, it will introduce pretty big performance issues, especially on lower API levels, since clipPath is only hardware accelerated on APIs 18+. Additionally, clipPath isn't anti aliased with hardware acceleration.

We can definitely add in this support later on in the project's lifetime if we update the min sdk to 21+

Any updates on this?

LukeXeon avatar Oct 20 '19 05:10 LukeXeon

Maybe you can use outlineProvider(Outline) as a substitute.

LukeXeon avatar Dec 19 '19 14:12 LukeXeon

Any updates on this issue? We can't use "outlineProvider" to clip view in different corners.

ihenk avatar Mar 20 '21 12:03 ihenk

+1

liufsd avatar Jul 14 '21 05:07 liufsd