Update rounded rectangle and ticket path samples

Author: SmartToolFactory

Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/chapter6_graphics/PathUtils.kt

@@ -1,5 +1,6 @@
 package com.smarttoolfactory.tutorial1_1basics.chapter6_graphics
 
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Path
@@ -39,133 +40,135 @@ fun createPolygonPath(cx: Float, cy: Float, sides: Int, radius: Float): Path {
  }
 }
 
-fun roundedRectanglePath(size: Size, cornerRadius: Float): Path {
+fun roundedRectanglePath(topLeft: Offset = Offset.Zero, size: Size, cornerRadius: Float): Path {
  return Path().apply {
  reset()
 
  // Top left arc
  val radius = cornerRadius * 2
  arcTo(
  rect = Rect(
- left = 0f,
- top = 0f,
- right = radius,
- bottom = radius
+ left = topLeft.x,
+ top = topLeft.y,
+ right = topLeft.x + radius,
+ bottom = topLeft.y + radius
  ),
  startAngleDegrees = 180.0f,
  sweepAngleDegrees = 90.0f,
  forceMoveTo = false
  )
 
- lineTo(x = size.width - radius, y = 0f)
+ lineTo(x = topLeft.x + size.width - radius, y = topLeft.y)
 
  // Top right arc
  arcTo(
  rect = Rect(
- left = size.width - radius,
- top = 0f,
- right = size.width,
- bottom = radius
+ left = topLeft.x + size.width - radius,
+ top = topLeft.y,
+ right = topLeft.x + size.width,
+ bottom = topLeft.y + radius
  ),
  startAngleDegrees = -90.0f,
  sweepAngleDegrees = 90.0f,
  forceMoveTo = false
  )
 
- lineTo(x = size.width, y = size.height - radius)
+ lineTo(x = topLeft.x + size.width, y = topLeft.y + size.height - radius)
 
  // Bottom right arc
  arcTo(
  rect = Rect(
- left = size.width - radius,
- top = size.height - radius,
- right = size.width ,
- bottom = size.height
+ left = topLeft.x + size.width - radius,
+ top = topLeft.y + size.height - radius,
+ right = topLeft.x + size.width,
+ bottom = topLeft.y + size.height
  ),
  startAngleDegrees = 0f,
  sweepAngleDegrees = 90.0f,
  forceMoveTo = false
  )
 
- lineTo(x = radius, y = size.height)
+ lineTo(x = topLeft.x + radius, y = topLeft.y + size.height)
 
  // Bottom left arc
  arcTo(
  rect = Rect(
- left = 0f,
- top = size.height - radius,
- right = radius,
- bottom = size.height
+ left = topLeft.x,
+ top = topLeft.y + size.height - radius,
+ right = topLeft.x + radius,
+ bottom = topLeft.y + size.height
  ),
  startAngleDegrees = 90.0f,
  sweepAngleDegrees = 90.0f,
  forceMoveTo = false
  )
 
- lineTo(x = 0f, y = radius)
+ lineTo(x = topLeft.x, y = topLeft.y + radius)
  close()
  }
 }
 
 /**
+ * Create a ticket path with given size and corner radius in px with offset [topLeft].
  *
- *
+ * Refer [this link](https://juliensalvi.medium.com/custom-shape-with-jetpack-compose-1cb48a991d42)
+ * for implementation details.
  */
-fun ticketPath(size: Size, cornerRadius: Float): Path {
+fun ticketPath(topLeft: Offset = Offset.Zero, size: Size, cornerRadius: Float): Path {
  return Path().apply {
  reset()
  // Top left arc
  arcTo(
  rect = Rect(
- left = -cornerRadius,
- top = -cornerRadius,
- right = cornerRadius,
- bottom = cornerRadius
+ left = topLeft.x + -cornerRadius,
+ top = topLeft.y + -cornerRadius,
+ right = topLeft.x + cornerRadius,
+ bottom = topLeft.y + cornerRadius
  ),
  startAngleDegrees = 90.0f,
  sweepAngleDegrees = -90.0f,
  forceMoveTo = false
  )
- lineTo(x = size.width - cornerRadius, y = 0f)
+ lineTo(x = topLeft.x + size.width - cornerRadius, y = topLeft.y)
  // Top right arc
  arcTo(
  rect = Rect(
- left = size.width - cornerRadius,
- top = -cornerRadius,
- right = size.width + cornerRadius,
- bottom = cornerRadius
+ left = topLeft.x + size.width - cornerRadius,
+ top = topLeft.y + -cornerRadius,
+ right = topLeft.x + size.width + cornerRadius,
+ bottom = topLeft.y + cornerRadius
  ),
  startAngleDegrees = 180.0f,
  sweepAngleDegrees = -90.0f,
  forceMoveTo = false
  )
- lineTo(x = size.width, y = size.height - cornerRadius)
+ lineTo(x = topLeft.x + size.width, y = topLeft.y + size.height - cornerRadius)
  // Bottom right arc
  arcTo(
  rect = Rect(
- left = size.width - cornerRadius,
- top = size.height - cornerRadius,
- right = size.width + cornerRadius,
- bottom = size.height + cornerRadius
+ left = topLeft.x + size.width - cornerRadius,
+ top = topLeft.y + size.height - cornerRadius,
+ right = topLeft.x + size.width + cornerRadius,
+ bottom = topLeft.y + size.height + cornerRadius
  ),
  startAngleDegrees = 270.0f,
  sweepAngleDegrees = -90.0f,
  forceMoveTo = false
  )
- lineTo(x = cornerRadius, y = size.height)
+ lineTo(x = topLeft.x + cornerRadius, y = topLeft.y + size.height)
  // Bottom left arc
  arcTo(
  rect = Rect(
- left = -cornerRadius,
- top = size.height - cornerRadius,
- right = cornerRadius,
- bottom = size.height + cornerRadius
+ left = topLeft.x + -cornerRadius,
+ top = topLeft.y + size.height - cornerRadius,
+ right = topLeft.x + cornerRadius,
+ bottom = topLeft.y + size.height + cornerRadius
  ),
  startAngleDegrees = 0.0f,
  sweepAngleDegrees = -90.0f,
  forceMoveTo = false
  )
- lineTo(x = 0f, y = cornerRadius)
+ lineTo(x = topLeft.x, y = topLeft.y + cornerRadius)
  close()
  }
 }

Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/chapter6_graphics/Tutorial6_1_3CanvasBasics3.kt

@@ -9,10 +9,7 @@ import androidx.compose.material.Slider
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.CornerRadius
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.geometry.RoundRect
+import androidx.compose.ui.geometry.*
 import androidx.compose.ui.graphics.*
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.platform.LocalConfiguration
@@ -216,25 +213,79 @@ private fun DrawArcToPath() {
 
 @Composable
 private fun DrawTicketPathWithArc() {
-
  Canvas(modifier = canvasModifier) {
- val path = ticketPath(size, 20.dp.toPx())
- drawPath(path, color = Color.Black)
- }
 
-}
+ val canvasWidth = size.width
+ val canvasHeight = size.height
+
+ // Black background
+ val ticketBackgroundWidth = canvasWidth * .8f
+ val horizontalSpace = (canvasWidth - ticketBackgroundWidth) / 2
 
+ val ticketBackgroundHeight = canvasHeight * .8f
+ val verticalSpace = (canvasHeight - ticketBackgroundHeight) / 2
+
+ // Get ticket path for background
+ val path1 = ticketPath(
+ topLeft = Offset(horizontalSpace, verticalSpace),
+ size = Size(ticketBackgroundWidth, ticketBackgroundHeight),
+ cornerRadius = 20.dp.toPx()
+ )
+ drawPath(path1, color = Color.Black)
+
+ // Dashed path in foreground
+ val ticketForegroundWidth = ticketBackgroundWidth * .95f
+ val horizontalSpace2 = (canvasWidth - ticketForegroundWidth) / 2
+
+ val ticketForegroundHeight = ticketBackgroundHeight * .9f
+ val verticalSpace2 = (canvasHeight - ticketForegroundHeight) / 2
+
+ // Get ticket path for background
+ val path2 = ticketPath(
+ topLeft = Offset(horizontalSpace2, verticalSpace2),
+ size = Size(ticketForegroundWidth, ticketForegroundHeight),
+ cornerRadius = 20.dp.toPx()
+ )
+ drawPath(
+ path2,
+ color = Color.Red,
+ style = Stroke(
+ width = 2.dp.toPx(),
+ pathEffect = PathEffect.dashPathEffect(
+ floatArrayOf(20f, 20f)
+ )
+ )
+ )
+ }
+}
 
 @Composable
 private fun DrawRoundedRectangleWithArc() {
 
  Canvas(modifier = canvasModifier) {
- val path = roundedRectanglePath(size, 20.dp.toPx())
- drawPath(path, color = Color.Red)
-
- }
 
+ val path1 = roundedRectanglePath(
+ topLeft = Offset(100f, 100f),
+ size = Size(400f, 300f),
+ cornerRadius = 20.dp.toPx()
+ )
+ drawPath(path1, color = Color.Red)
 
+ val path2 = roundedRectanglePath(
+ topLeft = Offset(600f, 200f),
+ size = Size(200f, 200f),
+ cornerRadius = 8.dp.toPx()
+ )
+ drawPath(
+ path2, color = Color.Blue,
+ style = Stroke(
+ width = 2.dp.toPx(),
+ pathEffect = PathEffect.dashPathEffect(
+ floatArrayOf(20f, 20f)
+ )
+ )
+ )
+ }
 }
 
 @Composable