How can I determine whether a 2D Point is within a Polygon or Complex Path with Jetpack Compose?
This is a share your knowledge, Q&A-style to explain how to detect whether a polygon or a complex shapes such as some section of path is touched as in gif below. Also it contains how to animate path scale, color using linear interpolation and using Matrix with Jetpack Compose Paths thanks to this quesiton.
How to scale group inside Jetpack Compose Vector
Solution
Easiest way to do to is creating a very small rectangle in touch position with
val touchPath = Path().apply {
addRect(
Rect(
center = it,
radius = .5f
)
)
}
Then checking
val differencePath =
Path.combine(
operation = PathOperation.Difference,
touchPath,
path
)
with path operation if difference path of in position and small rectangle path is empty.
For map implementation first create a class that contains Path for drawing, Animatable for animating selected or deselected Paths.
@Stable
internal class AnimatedMapData(
val path: Path,
selected: Boolean = false,
val animatable: Animatable<Float, AnimationVector1D> = Animatable(1f)
) {
var isSelected by mutableStateOf(selected)
}
Inside tap gesture get rectangle and set selected and deselected datas.
@Preview
@Composable
private fun AnimatedMapSectionPathTouchSample() {
val animatedMapDataList = remember {
Netherlands.PathMap.entries.map {
val path = Path()
path.apply {
it.value.forEach {
addPath(it)
}
val matrix = Matrix().apply {
preScale(5f, 5f)
postTranslate(-140f, 0f)
}
this.asAndroidPath().transform(matrix)
}
AnimatedMapData(path = path)
}
}
// This is for animating paths on selection or deselection animations
animatedMapDataList.forEach {
LaunchedEffect(key1 = it.isSelected) {
val targetValue = if (it.isSelected) 1.2f else 1f
it.animatable.animateTo(targetValue, animationSpec = tween(1000))
}
}
Column {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.background(Blue400)
) {
Canvas(
modifier = Modifier
.pointerInput(Unit) {
detectTapGestures {
val touchPath = Path().apply {
addRect(
Rect(
center = it,
radius = .5f
)
)
}
animatedMapDataList.forEachIndexed { index, data ->
val path = data.path
val differencePath =
Path.combine(
operation = PathOperation.Difference,
touchPath,
path
)
val isInBounds = differencePath.isEmpty
if (isInBounds) {
data.isSelected = data.isSelected.not()
} else {
data.isSelected = false
}
}
}
}
.fillMaxWidth()
.aspectRatio(1f)
.clipToBounds()
) {
animatedMapDataList.forEach { data ->
val path = data.path
if (data.isSelected.not()) {
withTransform(
{
val scale = data.animatable.value
scale(
scaleX = scale,
scaleY = scale,
// Set scale position as center of path
pivot = data.path.getBounds().center
)
}
) {
drawPath(path, Color.Black)
drawPath(path, color = Color.White, style = Stroke(1.dp.toPx()))
}
}
}
// Draw selected path above other paths
animatedMapDataList.firstOrNull { it.isSelected }?.let { data ->
val path = data.path
withTransform(
{
val scale = data.animatable.value
scale(
scaleX = scale,
scaleY = scale,
// Set scale position as center of path
pivot = data.path.getBounds().center
)
}
) {
drawPath(
path = path,
color = lerp(
start = Color.Black,
stop = Orange400,
// animate color via linear interpolation
fraction = (data.animatable.value - 1f) / 0.2f
)
)
drawPath(path, color = Color.White, style = Stroke(1.dp.toPx()))
}
}
}
}
}
}
Map that contains some section of Netherlands and other samples available link below
For touching and dragging non-uniform shapes you need set a drag gesture and holding touched index and setting Matrix of selected path with
modifier = Modifier
.background(Blue400)
.fillMaxWidth()
.aspectRatio(1f)
.pointerInput(Unit) {
detectDragGestures(
onDragStart = { offset: Offset ->
val touchPath = Path().apply {
addRect(
Rect(
center = offset,
radius = .5f
)
)
}
pathDataList.forEachIndexed { index, data ->
val path = data.path
val differencePath =
Path.combine(
operation = PathOperation.Difference,
touchPath,
path
)
val isInBounds = differencePath.isEmpty
if (isInBounds) {
touchIndex = index
}
}
},
onDrag = { change: PointerInputChange, dragAmount: Offset ->
val pathData = pathDataList.getOrNull(touchIndex)
pathData?.let {
val matrix = Matrix().apply {
postTranslate(dragAmount.x, dragAmount.y)
}
pathData.path.asAndroidPath().transform(matrix)
pathDataList[touchIndex] = it.copy(
center = dragAmount
)
}
},
onDragCancel = {
touchIndex = -1
},
onDragEnd = {
touchIndex = -1
}
)
}
Data class is
@Immutable
data class PathData(
val path: Path,
val center: Offset
)
Full sample
@Preview
@Composable
private fun PathTouchSample() {
var touchIndex by remember {
mutableIntStateOf(-1)
}
val pathDataList = remember {
mutableStateListOf<PathData>().apply {
repeat(5) {
val cx = 170f * (it + 1)
val cy = 170f * (it + 1)
val radius = 120f
val sides = 3 + it
val path = createPolygonPath(cx, cy, sides, radius)
add(
PathData(
path = path,
center = Offset(0f, 0f)
)
)
}
}
}
Canvas(
modifier = Modifier
.background(Blue400)
.fillMaxWidth()
.aspectRatio(1f)
.pointerInput(Unit) {
detectDragGestures(
onDragStart = { offset: Offset ->
val touchPath = Path().apply {
addRect(
Rect(
center = offset,
radius = .5f
)
)
}
pathDataList.forEachIndexed { index, data ->
val path = data.path
val differencePath =
Path.combine(
operation = PathOperation.Difference,
touchPath,
path
)
val isInBounds = differencePath.isEmpty
if (isInBounds) {
touchIndex = index
}
}
},
onDrag = { change: PointerInputChange, dragAmount: Offset ->
val pathData = pathDataList.getOrNull(touchIndex)
pathData?.let {
val matrix = Matrix().apply {
postTranslate(dragAmount.x, dragAmount.y)
}
pathData.path.asAndroidPath().transform(matrix)
pathDataList[touchIndex] = it.copy(
center = dragAmount
)
}
},
onDragCancel = {
touchIndex = -1
},
onDragEnd = {
touchIndex = -1
}
)
}
) {
pathDataList.forEachIndexed { index: Int, pathData: PathData ->
val path = pathData.path
if (touchIndex != index) {
drawPath(
path,
color = Color.Black
)
}
}
pathDataList.getOrNull(touchIndex)?.let { pathData ->
val path = pathData.path
drawPath(
path = path,
color = Color.Green
)
}
}
}
- Laggy Lazy Column Android Compose
- Ad banner with Jetpack compose not loading ads
- How to set a drawable object instance as a background of a LazyColumn?
- Jetpack compose navigation passing custom object with Kotlin DSL
- mutableState VS mutableStateFlow?
- LazyRow non-observable firstVisibleItemIndex?
- Android Studio's Split mode doesn't show the code
- Android Compose: Type is defined multiple times
- Swipe up to reveal a sheet under the page
- How to create numbered text list in Android Jetpack Compose?
- Test error:MyActivity has already set content. If you have populated the Activity with a ComposeView, make sure to call setContent on that ComposeView
- Android Glance widget text not truncating properly inside row
- Is there a way to remove space in App Bar NestedScrollConnection?
- How do I enable vertical scrolling inside the compose modalBottomSheet and disable the event that the bottomSheet closes?
- For a Jetpack Compose Textfield how can I show number keyboard but still allow user to switch to letters?
- What is causing this Error: com.android.tools.r8.internal.nc: Sealed classes are not supported as program classes
- How to share same viewmodel instance in koin compose navigation
- On Android, new version of Navigation Compose (2.8.0-alpha08 and up) not compatible with TextFieldState?
- Jetpack Compose - extend child of layout beyond bounds
- Retrieve parameters in navigation graph scoped viewmodel in Jetpack Compose
- Pass Nav Augments to enter Transition arguments in android compose navigation
- androidx.lifecycle:lifecycle.viewmodel.compose vs androidx.hilt:hilt.navigation.compose
- Jetpack compose how to make two lazy columns scroll together
- Why is the shadow not showing on my NavigationBar in Jetpack Compose?
- Shimmer/Skeleton animation in Android Jetpack Compose
- How do I handle a function that is calling a repository and also being used in two separate ViewModels
- Jetpack compose how to wait for animation ends
- How to Make Card Similar to the Image
- Nested Scrolling with collapsible header not working
- How to make all the items in the **LazyVerticalGrid** to the same height without hardcoding height?