CODEWITHSUNDEEP
androidandroid-jetpack-compose
Siri
Siri

Reputation: 941

How to add click events to Canvas in JetPack Compose

I used Canvas in Compose to define a line chart. enter image description here

I want to provide click events for the points in the line chart, but I did not find relevant information to solve the problem.

Please provide some interesting ideas or related information.

Upvotes: 9

Views: 5502

Answers (1)

nglauber
nglauber

Reputation: 23964

My suggestion would be something like this:

// First, you must keep track the position of the points
// and their respective sizes using a list of Rect 
val dotRects = ArrayList<Rect>()
// e.g.: 
// dotRects.add(Rect(top = 0f, left = 0f, bottom = 40f, right = 40f))
Canvas(
    modifier = Modifier
        // other modifiers...
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = { tapOffset ->
                    // When the user taps on the Canvas, you can 
                    // check if the tap offset is in one of the
                    // tracked Rects.
                    var index = 0
                    for (rect in dotRects) {
                        if (rect.contains(tapOffset)) {
                            // Handle the click here and do 
                            // some action based on the index
                            break // don't need to check other points, 
                                  // so break
                        }
                        index++
                    }
                }
            )
        }
) {
   // Your chart...
}

Upvotes: 10

Related Questions