Update README.md

Author: SmartToolFactory

README.md

@@ -104,6 +104,21 @@ using previous searches using a database, domain with ViewModel.
 |<h3>5-4-3 Centroid, Zoom, Pan, Rotation</h3><br/>Use AwaitPointerEventScope to calculate centroid position and size, zoom, pan, and rotation.<br><br>• AwaitPointerEventScope<br>• centroid<br>• pan<br>• zoom<br>|<img src ="/./screenshots/tutorial5_4_3.gif" width=320> |
 | | |
 
+### Graphic
+
+|Tutorial|Preview|
+|:-------|-------|
+|<h3>6-1-1 Canvas Basics 1</h3><br/>Use canvas draw basic shapes like line, circle, rectangle, and points with different attributes such as style, stroke cap, brush.<br><br>• clickable<br>• Indication<br>• rememberRipple<br>• InteractionSource<br>• pointerInput<br>• pointerInteropFilter<br>|<img src ="/./screenshots/tutorial6_1_1.gif" width=320> |
+| | |
+|<h3>6-1-2 Canvas Basics 2</h3><br/>Use canvas to draw arc, with path effect, stroke cap, stroke join, miter and other attributes and draw images with src, dst attributes.<br><br>• pointerInput<br>• pointerInteropFilter<br>• detectTapGestures<br>• detectDragGestures<br>• onPress<br>• onDoubleTap<br>|<img src ="/./screenshots/tutorial6_1_2.gif" width=320> |
+| | |
+|<h3>6-1-3 Canvas Basics 3</h3><br/>Use canvas to draw path using absolute and relative positions, adding arc to path, drawing custom paths, progress, polygons, quads, and cubic.<br><br>• pointerInput<br>• detectTransformGestures<br>• centroid<br>• pan<br>• zoom<br>|<img src ="/./screenshots/tutorial6_1_3.gif" width=320> |
+| | |
+|<h3>6-2 Blend(Porter-Duff) Modes</h3><br/>Use blend(Porter-Duff) modes to change drawing source/destination 
+ or clip based on blend mode..<br><br>• AwaitPointerEventScope<br>• PointerInputChange<br>• awaitFirstDown<br>• waitForUpOrCancellation<br>• awaitPointerEvent<br>• awaitTouchSlopOrCancellation<br>• awaitDragOrCancellation<br>|<img src ="/./screenshots/tutorial6_2.gif" width=320> |
+| | |
+
+
 ### Resources and References
 [Codelab Jetpack Compose Basics](https://developer.android.com/codelabs/jetpack-compose-basics)
 <br>

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

@@ -0,0 +1,13 @@
+package com.smarttoolfactory.tutorial1_1basics.chapter6_graphics
+
+import androidx.compose.runtime.Composable
+
+@Composable
+fun Tutorial6_4Screen1() {
+ TutorialContent()
+}
+
+@Composable
+private fun TutorialContent() {
+
+}

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

@@ -0,0 +1,13 @@
+package com.smarttoolfactory.tutorial1_1basics.chapter6_graphics
+
+import androidx.compose.runtime.Composable
+
+@Composable
+fun Tutorial6_4Screen2() {
+ TutorialContent()
+}
+
+@Composable
+private fun TutorialContent() {
+
+}

Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/tutorial_list/TutorialList.kt

@@ -14,9 +14,7 @@ import com.smarttoolfactory.tutorial1_1basics.chapter2_material_widgets.*
 import com.smarttoolfactory.tutorial1_1basics.chapter3_layout.*
 import com.smarttoolfactory.tutorial1_1basics.chapter4_state.*
 import com.smarttoolfactory.tutorial1_1basics.chapter5_gesture.*
-import com.smarttoolfactory.tutorial1_1basics.chapter6_graphics.Tutorial6_1Screen1
-import com.smarttoolfactory.tutorial1_1basics.chapter6_graphics.Tutorial6_1Screen2
-import com.smarttoolfactory.tutorial1_1basics.chapter6_graphics.Tutorial6_2Screen
+import com.smarttoolfactory.tutorial1_1basics.chapter6_graphics.*
 import com.smarttoolfactory.tutorial1_1basics.model.TutorialSectionModel
 import com.smarttoolfactory.tutorial1_1basics.ui.GestureListColor
 import com.smarttoolfactory.tutorial1_1basics.ui.GraphicsListColor
@@ -970,11 +968,27 @@ fun createGraphicsTutorialList(): List<TutorialSectionModel> {
 
  val tutorial6_1_2 = TutorialSectionModel(
  title = "6-1-2 Canvas Basics2",
- description = "Use canvas to draw arc, image, path with path effect, stroke cap, " +
- "stroke join, miter and other attributes",
+ description = "Use canvas to draw arc, with path effect, stroke cap, " +
+ "stroke join, miter and other attributes and draw images with src, dst attributes",
  action = {
  Tutorial6_1Screen2()
  },
+ tags = listOf(
+ TAG_COMPOSE,
+ TAG_CANVAS,
+ TAG_DRAW_SCOPE,
+ TAG_PATH_EFFECT
+ ),
+ tagColor = GraphicsListColor
+ )
+
+ val tutorial6_1_3 = TutorialSectionModel(
+ title = "6-1-3 Canvas Basics3",
+ description = "Use canvas to draw path using absolute and relative positions, adding " +
+ "arc to path, drawing custom paths, progress, polygons, quads, and cubic. ",
+ action = {
+ Tutorial6_1Screen3()
+ },
  tags = listOf(
  TAG_COMPOSE,
  TAG_CANVAS,
@@ -1002,9 +1016,31 @@ fun createGraphicsTutorialList(): List<TutorialSectionModel> {
  tagColor = GraphicsListColor
  )
 
+ val tutorial6_4 = TutorialSectionModel(
+ title = "6-4-1 Draw with Touch",
+ description = "Draw to canvas using touch down, move and up events",
+ action = {
+ Tutorial6_4Screen1()
+ },
+ tags = listOf(
+ TAG_COMPOSE,
+ TAG_CANVAS,
+ TAG_DRAW_SCOPE,
+ TAG_PATH,
+ TAG_POINTER_INPUT,
+ TAG_AWAIT_POINTER_EVENT_SCOPE,
+ TAG_POINTER_INPUT_CHANGE,
+ TAG_AWAIT_FIRST_DOWN,
+
+ ),
+ tagColor = GraphicsListColor
+ )
+
  return listOf(
  tutorial6_1_1,
  tutorial6_1_2,
- tutorial6_2
+ tutorial6_1_3,
+ tutorial6_2,
+ tutorial6_4
  )
 }