https://kotlinlang.org logo
Join Slack
Powered by
I'm trying to figure out why my circles when overl...
# compose
c
I'm trying to figure out why my circles when overlapping aren't perfect. You can see a "border" between them. Code in thread
💳 1
Copy code
class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      MyApplicationTheme {
        Box(
          modifier = Modifier.fillMaxSize(),
          contentAlignment = Alignment.Center,
        ) {
          Box(modifier = Modifier.size(200.dp)) { MyAnim() }
          Box(modifier = Modifier.size(200.dp).offset(x = 150.dp)) { MyAnim() }
        }
      }
    }
  }
}

@Composable
internal fun MyAnim() {
  Box(
    modifier = Modifier
      .fillMaxSize()
      .clip(CircleShape)
      .aspectRatio(1f)
  ) {
    MyComposable()
    Box(
      modifier = Modifier
        .fillMaxSize()
        .background(Color.Red)
    )
  }
}


@Composable
internal fun MyComposable() {
  Box(
    modifier = Modifier
      .fillMaxSize()
  ) {
    Box(
      modifier = Modifier
        .fillMaxSize()
        .background(Color.Green)
    )
  }
}
There is of course a green circle under the red, but I would have though that you wouldn't see the green. This has my head hurting. lol The reason I can't just remove the green circle is because this is a small repro of a larger problem im having.
e
aliasing. when the green draws, there's some pixels where it'll blend in 50% (for example). then red draws and blends 50% with that
c
Is there any way to turn that off I suppose?
r
Anti-aliasing actually
e
that's true
hmm, not sure if 
graphicsLayer
would work
r
If you go through a native Canvas you can disable AA on the paint
c
To be more clear, in my use case I basically have a bright image (green circle) and on top I draw a transparent dark gray color so the item looks disabled. But the result (especially when animating a scale on it) it looks pretty terrible. Because I have a circle that looks mostly dark but the outer 1px border is bright, and with a scale animation it just accents the issue even more.
I wonder if with canvas if I could draw the image (green circle) and then an overlay solid transparent color on it (red circle) and disable AA.
I was assuming that it had to do with aliasing, but I was also hoping that maybe there was some modifier that I could use to disable that behavior. I will try the canvas solution tomorrow I suppose
r
Yeah except you would want to remove AA on the image
👍 1
Anyway it would be better to draw the image with a color filter to do this
That would solve your problem
e
depends on desired animation though - colorfilter applies to the whole image
c
Does Image composable have a color filter?
r
You could also use a graphics layer and instead of drawing a circle on top you could draw a rectangle with dstin or something. That should also fix it
@ephemient if the goal was to apply to part of the image there wouldn't be the issue we are discussing
e
yep, that would be what I'd do if you want to scale it in
c
The animation is just a scale. Basically if you touch the circle it gets big and then goes back to original size. The amount of artifacts just make it look 🤮 lol
e
draw the overlay circle all the way past bounds, with blendmode, should have no artifacts at edges
r
It doesn't even need to be a circle
e
well I was assuming Colton wanted an animated expanding circle from the original message
r
(assuming the image is a circle)
e
if that's not the case then no, it doesn't need to be a circle
c
You could also use a graphics layer and instead of drawing a circle on top you could draw a rectangle with dstin or something. That should also fix it
Weird cuz I thought that's essentially what's happening here. The red is a rectangle and only the clipping is happening at the end. So I thought there wouldn't be any aliasing. If I cropped green circle. And then red circle. I would have expected this issue.
r
There's no aliasing. There's anti-aliasing :)
today i learned 1
e
afaik clipping is passed down so everything knows not to draw outside of the clip
r
Did you try without clipping and just by drawing an actual circle?
c
My image isn't a circle. The only thing that ends up making things into a circle shape is the circle clip on the parent layout
r
Ah ok
Then you shouldn't have the issue you are describing I think
Do you have a screenshot of the actual behavior?
Nvm you apply the clip to the image
So the image is circular in the end
I would just use a render effect on a graphics layer containing the clipped image
c
In my actual issue the clipping is done in the same spot. I.e. the image (underneath is a rectangle) and the transparent overlay is also a square.
The only thing that performs the clip is the parent box.
r
I understand
I'm saying ditch the transparent overlay and replace it with an effect
c
Cool. Just wanted to make sure I didn't oversimplify this code sample and talk myself into a circle. Lol
r
You could also try to put a graphics layer with an offscreen compositing strategy on the parent
That might cause drawing first then clipping
(but it's an offscreen layer which is 😞 )
c
Alright. I guess I'm going to try some options here. Let me know if there's a general preference in terms of performance or something
Going the canvas route and I'm failing to see how I can disable anti aliasing. I'm drawing an image and then drawing a rect.
r
Use the graphics layer approach
c
GraphicsLayer modifier on the image... Right?
r
On the parent, with an offscreen compositing strategy
c
Cool. Brb
Nope. Still same issue. But all I did was add the compositing strategy in graphics layer. Maybe I'm supposed to add the overlay there as well
r
What's your code?
c
Maybe just clipping in graphicsLayer will do the trick
I think we have a winner. Cool. Learned a ton of new stuff. Thank you for teaching
👍 1
a
We are having the same issue with both Text and SVGs drawn with SVGDOM/render(). How can we enable antialiasing on that? We're targeting Android/iOS platforms.
c
have you tried any of the above solutions for android to see if it works for you? im guessing your probalen is specifically because you're using compose on ios + android?
a
Yes, Compose Multiplatform 1.6.0
r
What problem do you have exactly?
6 Views
Open in Slack
PreviousNext
Powered by