Skip to content

Commit 87dc010

Browse files
SmartToolFactorySmartToolFactory
committed
Add basic canvas samples
1 parent 875a479 commit 87dc010

File tree

6 files changed

+284
-5
lines changed

6 files changed

+284
-5
lines changed

‎Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/Home.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ private fun HomeContent(
205205
1 -> TutorialListContent(modifier, tutorialList[1], navigateToTutorial)
206206
2 -> TutorialListContent(modifier, tutorialList[2], navigateToTutorial)
207207
3 -> TutorialListContent(modifier, tutorialList[3], navigateToTutorial)
208+
4 -> TutorialListContent(modifier, tutorialList[4], navigateToTutorial)
208209
else -> ComingSoonScreen()
209210
}
210211
}

‎Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/TutorialNavGraph.kt‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,7 @@ import androidx.navigation.compose.NavHost
1212
import androidx.navigation.compose.composable
1313
import androidx.navigation.compose.rememberNavController
1414
import com.smarttoolfactory.tutorial1_1basics.model.TutorialSectionModel
15-
import com.smarttoolfactory.tutorial1_1basics.tutorial_list.createComponentTutorialList
16-
import com.smarttoolfactory.tutorial1_1basics.tutorial_list.createGestureTutorialList
17-
import com.smarttoolfactory.tutorial1_1basics.tutorial_list.createLayoutTutorialList
18-
import com.smarttoolfactory.tutorial1_1basics.tutorial_list.createStateTutorialList
15+
import com.smarttoolfactory.tutorial1_1basics.tutorial_list.*
1916

2017
@ExperimentalComposeUiApi
2118
@ExperimentalFoundationApi
@@ -36,12 +33,14 @@ fun TutorialNavGraph(
3633
val layoutTutorialList = createLayoutTutorialList()
3734
val stateTutorialList = createStateTutorialList()
3835
val gestureTutorialList = createGestureTutorialList()
36+
val graphicsTutorialList = createGraphicsTutorialList()
3937

4038
if (mainViewModel.tutorialList.isEmpty()) {
4139
mainViewModel.tutorialList.add(componentTutorialList)
4240
mainViewModel.tutorialList.add(layoutTutorialList)
4341
mainViewModel.tutorialList.add(stateTutorialList)
4442
mainViewModel.tutorialList.add(gestureTutorialList)
43+
mainViewModel.tutorialList.add(graphicsTutorialList)
4544
}
4645

4746
// println("🍏 TutorialNavGraph(): mainViewModel: mainViewModel, list: ${mainViewModel.componentTutorialList.hashCode()}")

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

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
package com.smarttoolfactory.tutorial1_1basics.chapter6_graphics
2+
3+
import androidx.compose.foundation.Canvas
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.*
6+
import androidx.compose.foundation.rememberScrollState
7+
import androidx.compose.foundation.verticalScroll
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.geometry.Offset
11+
import androidx.compose.ui.graphics.*
12+
import androidx.compose.ui.graphics.drawscope.Stroke
13+
import androidx.compose.ui.unit.dp
14+
import com.smarttoolfactory.tutorial1_1basics.ui.components.StyleableTutorialText
15+
import com.smarttoolfactory.tutorial1_1basics.ui.components.TutorialText2
16+
17+
@Composable
18+
fun Tutorial6_1Screen1() {
19+
TutorialContent()
20+
}
21+
22+
@Composable
23+
private fun TutorialContent() {
24+
25+
Column(
26+
modifier = Modifier
27+
.fillMaxSize()
28+
.verticalScroll(rememberScrollState())
29+
) {
30+
31+
StyleableTutorialText(
32+
text = "Draw Line",
33+
bullets = false
34+
)
35+
DrawLineSample()
36+
StyleableTutorialText(
37+
text = "Draw Circle",
38+
bullets = false
39+
)
40+
DrawCircleSamples()
41+
}
42+
}
43+
44+
@Composable
45+
private fun DrawLineSample() {
46+
47+
Spacer(modifier = Modifier.height(10.dp))
48+
TutorialText2(text = "strokeWidth")
49+
Canvas(modifier = canvasModifier) {
50+
drawLine(
51+
start = Offset(x = 100f, y = 30f),
52+
end = Offset(x = size.width - 100f, y = 30f),
53+
color = Color.Red,
54+
)
55+
56+
drawLine(
57+
start = Offset(x = 100f, y = 70f),
58+
end = Offset(x = size.width - 100f, y = 70f),
59+
color = Color.Red,
60+
strokeWidth = 5f
61+
)
62+
63+
drawLine(
64+
start = Offset(x = 100f, y = 110f),
65+
end = Offset(x = size.width - 100f, y = 110f),
66+
color = Color.Red,
67+
strokeWidth = 10f
68+
)
69+
}
70+
71+
Spacer(modifier = Modifier.height(10.dp))
72+
TutorialText2(text = "cap")
73+
Canvas(modifier = canvasModifier) {
74+
75+
drawLine(
76+
cap = StrokeCap.Round,
77+
start = Offset(x = 100f, y = 30f),
78+
end = Offset(x = size.width - 100f, y = 30f),
79+
color = Color.Red,
80+
strokeWidth = 20f
81+
)
82+
83+
drawLine(
84+
cap = StrokeCap.Butt,
85+
start = Offset(x = 100f, y = 70f),
86+
end = Offset(x = size.width - 100f, y = 70f),
87+
color = Color.Red,
88+
strokeWidth = 20f
89+
)
90+
91+
drawLine(
92+
cap = StrokeCap.Square,
93+
start = Offset(x = 100f, y = 110f),
94+
end = Offset(x = size.width - 100f, y = 110f),
95+
color = Color.Red,
96+
strokeWidth = 20f
97+
)
98+
}
99+
100+
Spacer(modifier = Modifier.height(10.dp))
101+
TutorialText2(text = "brush")
102+
Canvas(modifier = canvasModifier) {
103+
104+
drawLine(
105+
brush = Brush.linearGradient(
106+
colors = listOf(Color.Red, Color.Green)
107+
),
108+
start = Offset(x = 100f, y = 30f),
109+
end = Offset(x = size.width - 100f, y = 30f),
110+
strokeWidth = 20f,
111+
)
112+
113+
drawLine(
114+
brush = Brush.radialGradient(
115+
colors = listOf(Color.Red, Color.Green, Color.Blue)
116+
),
117+
start = Offset(x = 100f, y = 70f),
118+
end = Offset(x = size.width - 100f, y = 70f),
119+
strokeWidth = 20f,
120+
)
121+
122+
drawLine(
123+
brush = Brush.sweepGradient(
124+
colors = listOf(Color.Red, Color.Green, Color.Blue)
125+
),
126+
start = Offset(x = 100f, y = 110f),
127+
end = Offset(x = size.width - 100f, y = 110f),
128+
strokeWidth = 20f,
129+
)
130+
}
131+
132+
Spacer(modifier = Modifier.height(10.dp))
133+
TutorialText2(text = "pathEffect")
134+
Canvas(
135+
modifier = Modifier
136+
.fillMaxWidth()
137+
.background(Color.LightGray)
138+
.height(120.dp)
139+
) {
140+
141+
drawLine(
142+
pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f)),
143+
start = Offset(x = 100f, y = 30f),
144+
end = Offset(x = size.width - 100f, y = 30f),
145+
color = Color.Red,
146+
strokeWidth = 10f
147+
)
148+
149+
150+
drawLine(
151+
pathEffect = PathEffect.dashPathEffect(floatArrayOf(40f, 10f)),
152+
start = Offset(x = 100f, y = 70f),
153+
end = Offset(x = size.width - 100f, y = 70f),
154+
color = Color.Red,
155+
strokeWidth = 10f
156+
)
157+
158+
159+
drawLine(
160+
pathEffect = PathEffect.dashPathEffect(floatArrayOf(70f, 40f)),
161+
start = Offset(x = 100f, y = 110f),
162+
end = Offset(x = size.width - 100f, y = 110f),
163+
cap = StrokeCap.Round,
164+
color = Color.Red,
165+
strokeWidth = 15f
166+
)
167+
168+
val path = Path().apply {
169+
moveTo(10f, 0f)
170+
lineTo(20f, 10f)
171+
lineTo(10f, 20f)
172+
lineTo(0f, 10f)
173+
}
174+
175+
drawLine(
176+
pathEffect = PathEffect.stampedPathEffect(
177+
shape = path,
178+
advance = 30f,
179+
phase = 30f,
180+
style = StampedPathEffectStyle.Rotate
181+
),
182+
start = Offset(x = 100f, y = 150f),
183+
end = Offset(x = size.width - 100f, y = 150f),
184+
color = Color.Green,
185+
strokeWidth = 10f
186+
)
187+
188+
drawLine(
189+
pathEffect = PathEffect.stampedPathEffect(
190+
shape = path,
191+
advance = 60f,
192+
phase = 10f,
193+
style = StampedPathEffectStyle.Morph
194+
),
195+
start = Offset(x = 100f, y = 190f),
196+
end = Offset(x = size.width - 100f, y = 190f),
197+
color = Color.Green,
198+
strokeWidth = 10f
199+
)
200+
}
201+
}
202+
203+
@Composable
204+
private fun DrawCircleSamples() {
205+
Canvas(modifier = canvasModifier2) {
206+
207+
val canvasWidth = size.width
208+
val canvasHeight = size.height
209+
val radius = canvasHeight / 2
210+
val space = (canvasWidth - 6 * radius) / 4
211+
212+
drawCircle(
213+
color = Color.Red,
214+
radius = radius,
215+
center = Offset(space + radius, canvasHeight / 2),
216+
)
217+
218+
drawCircle(
219+
color = Color.Red,
220+
radius = radius,
221+
center = Offset(2 * space + 3 * radius, canvasHeight / 2),
222+
style = Stroke(width = 4.dp.toPx())
223+
)
224+
225+
drawCircle(
226+
color = Color.Red,
227+
radius = radius,
228+
center = Offset(canvasWidth - space - radius, canvasHeight / 2),
229+
style = Stroke(
230+
width = 5.dp.toPx(),
231+
join = StrokeJoin.Round,
232+
cap = StrokeCap.Round,
233+
pathEffect = PathEffect.dashPathEffect(floatArrayOf(30f, 30f))
234+
)
235+
)
236+
237+
}
238+
}
239+
240+
private val canvasModifier = Modifier
241+
.background(Color.LightGray)
242+
.fillMaxSize()
243+
.height(60.dp)
244+
245+
private val canvasModifier2 = Modifier
246+
.background(Color.LightGray)
247+
.fillMaxSize()
248+
.height(100.dp)
249+
250+

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,4 +172,8 @@ const val TAG_VERTICAL_DRAG = "verticalDrag"
172172
const val TAG_AWAIT_HORIZONTAL_TOUCH_SLOP_OR_CANCELLATION = "awaitHorizontalTouchSlopOrCancellation"
173173
const val TAG_AWAIT_VERTICAL_TOUCH_SLOP_OR_CANCELLATION = "awaitVerticalTouchSlopOrCancellation"
174174

175-
175+
/*
176+
GRAPHICS
177+
*/
178+
const val TAG_CANVAS = "Canvas"
179+
const val TAG_DRAW_SCOPE = "DrawScope"

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ import com.smarttoolfactory.tutorial1_1basics.chapter2_material_widgets.*
1414
import com.smarttoolfactory.tutorial1_1basics.chapter3_layout.*
1515
import com.smarttoolfactory.tutorial1_1basics.chapter4_state.*
1616
import com.smarttoolfactory.tutorial1_1basics.chapter5_gesture.*
17+
import com.smarttoolfactory.tutorial1_1basics.chapter6_graphics.Tutorial6_1Screen1
1718
import com.smarttoolfactory.tutorial1_1basics.model.TutorialSectionModel
1819
import com.smarttoolfactory.tutorial1_1basics.ui.GestureListColor
20+
import com.smarttoolfactory.tutorial1_1basics.ui.GraphicsListColor
1921
import com.smarttoolfactory.tutorial1_1basics.ui.LayoutListColor
2022
import com.smarttoolfactory.tutorial1_1basics.ui.StateListColor
2123

@@ -944,4 +946,26 @@ fun createGestureTutorialList(): List<TutorialSectionModel> {
944946
tutorial5_5_1,
945947
tutorial5_6
946948
)
949+
}
950+
951+
@Composable
952+
fun createGraphicsTutorialList(): List<TutorialSectionModel> {
953+
954+
val tutorial6_1 = TutorialSectionModel(
955+
title = "Canvas Basics",
956+
description = "Use canvas draw basic shapes like rectangle, circle.",
957+
action = {
958+
Tutorial6_1Screen1()
959+
},
960+
tags = listOf(
961+
TAG_COMPOSE,
962+
TAG_CANVAS,
963+
TAG_DRAW_SCOPE
964+
),
965+
tagColor = GraphicsListColor
966+
)
967+
968+
return listOf(
969+
tutorial6_1
970+
)
947971
}

‎Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/ui/Color.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ val DefaultListColor = Color(0xff00BCD4)
2222
val LayoutListColor = Color(0xffFFEB3B)
2323
val StateListColor = Color(0xffE91E63)
2424
val GestureListColor = Color(0xff8BC34A)
25+
val GraphicsListColor = Color(0xffFF9800)
2526

2627
val SentMessageColor = Color(0xffE7FFDB)
2728
val SentQuoteColor = Color(0xffDEF6D3)

0 commit comments

Comments
 (0)