Thread
#compose
    k

    Kshitij Patil

    1 year ago
    Canvas click events are not working once we wrap them inside a
    Composable
    Box(Modifier.fillMaxSize()) {
        Canvas(Modifier.clickable { Log.i(TAG, "Clicked") }) {
            drawCircle(Color.Red, 25f, Offset(150f,150f))
        }
    }
    I want only the portion of Circle clickable, I tried clipping the Canvas, didn't help. Canvas click events only work within
    Surface
    , that too, on the entire Canvas area.
    r

    romainguy

    1 year ago
    clickable()
    can’t know what shape you want to restrict the click to
    (we could do it when there’s clipping I suppose but that could also lead to surprising behaviors)
    You probably need a custom input handler
    That said, not sure why clicks wouldn’t work inside a
    Box
    but would inside a
    Surface
    . @Adam Powell?
    k

    Kshitij Patil

    1 year ago
    I agree with that: clickable won't know the shape beforehand. I remember we used to do write custom views and was able to handle click/touch/gesture events by implementing respective listeners. Should I create a custom layout instead to do the same using Jetpack Compose? I didn't get what you mean by custom input handler and how should I implement the same in Compose.
    Adam Powell

    Adam Powell

    1 year ago
    clickable should size the clickable region to the size of the element it modifies. It should be equivalent here to do
    Canvas(Modifier.fillMaxSize().clickable...)
    as for
    Surface
    , cc @matvei for specific behavior differences there
    k

    Kshitij Patil

    1 year ago
    I'm sorry for the confusion ☹️, I just realized it's not the issue with Box vs Surface, but it's about
    fillMaxSize()
    modifier on the Canvas.
    Canvas
    is not clickable unless it is preceded by the
    fillMaxSize
    modifier.
    wrapContentSize
    doesn't make any difference, so it seems like a compulsory step for the Canvas to have
    fillMaxSize()
    modifier to be a clickable
    Andrey Kulikov

    Andrey Kulikov

    1 year ago
    not exactly
    fillMaxSize()
    , but any layout modifier. you can set some fixed size with Modifier.size(48.dp)In your case you had clickable area with 0x0 size
    difference between Box and Surface is that Box looses constraints for its children. If Box is asked to fill the whole size it doesn't mean the children of Box are also forced to do so. Surface is currently not doing the same thing, but will in the future
    k

    Kshitij Patil

    1 year ago
    Okay, got it. Thanks!