Skip to content

Commit a536932

Browse files
solygambassolygambas
committed
add clipping methods
1 parent 9273550 commit a536932

File tree

2 files changed

+126
-4
lines changed

2 files changed

+126
-4
lines changed

‎23-clipping-magic/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ An app to learn how to clip objects on a canvas.
1313
- understanding the drawing algorithm.
1414
- creating a method to draw the shapes.
1515
- implementing the clipping methods.
16+
- improving drawing performances with quickReject().
1617

1718
Based on [Clipping Canvas Objects](https://developer.android.com/codelabs/advanced-android-kotlin-training-clipping-canvas-objects#0) by Google Codelabs (2022).

‎23-clipping-magic/app/src/main/java/com/hfad/clippingmagic/ClippedView.kt

Lines changed: 125 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
package com.hfad.clippingmagic
22

33
import android.content.Context
4-
import android.graphics.Canvas
5-
import android.graphics.Color
6-
import android.graphics.Paint
7-
import android.graphics.Path
4+
import android.graphics.*
5+
import android.os.Build
86
import android.util.AttributeSet
97
import android.view.View
108

@@ -33,6 +31,12 @@ class ClippedView @JvmOverloads constructor(
3331
private val rowThree = rowTwo + rectInset + clipRectBottom
3432
private val rowFour = rowThree + rectInset + clipRectBottom
3533
private val textRow = rowFour + (1.5f * clipRectBottom)
34+
private var rectF = RectF(
35+
rectInset,
36+
rectInset,
37+
clipRectRight - rectInset,
38+
clipRectBottom - rectInset
39+
)
3640

3741
override fun onDraw(canvas: Canvas) {
3842
super.onDraw(canvas)
@@ -85,27 +89,144 @@ class ClippedView @JvmOverloads constructor(
8589
}
8690

8791
private fun drawDifferenceClippingExample(canvas: Canvas){
92+
canvas.save()
93+
canvas.translate(columnTwo, rowOne)
94+
95+
// create a frame
96+
canvas.clipRect(
97+
2 * rectInset,2 * rectInset,
98+
clipRectRight - 2 * rectInset,
99+
clipRectBottom - 2 * rectInset
100+
)
101+
102+
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O){
103+
@Suppress("DEPRECATION")
104+
canvas.clipRect(
105+
4 * rectInset,4 * rectInset,
106+
clipRectRight - 4 * rectInset,
107+
clipRectBottom - 4 * rectInset,
108+
Region.Op.DIFFERENCE
109+
)
110+
} else {
111+
canvas.clipOutRect(
112+
4 * rectInset,4 * rectInset,
113+
clipRectRight - 4 * rectInset,
114+
clipRectBottom - 4 * rectInset
115+
)
116+
}
117+
drawClippedRectangle(canvas)
118+
canvas.restore()
88119
}
89120

90121
private fun drawCircularClippingExample(canvas: Canvas){
122+
canvas.save()
123+
canvas.translate(columnOne, rowTwo)
124+
path.rewind()
125+
path.addCircle(
126+
circleRadius,clipRectBottom - circleRadius,
127+
circleRadius,Path.Direction.CCW
128+
)
129+
130+
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
131+
@Suppress("DEPRECATION")
132+
canvas.clipPath(path, Region.Op.DIFFERENCE)
133+
} else {
134+
canvas.clipOutPath(path)
135+
}
136+
drawClippedRectangle(canvas)
137+
canvas.restore()
91138
}
92139

93140
private fun drawIntersectionClippingExample(canvas: Canvas){
141+
canvas.save()
142+
canvas.translate(columnTwo,rowTwo)
143+
canvas.clipRect(
144+
clipRectLeft,clipRectTop,
145+
clipRectRight - smallRectOffset,
146+
clipRectBottom - smallRectOffset
147+
)
148+
149+
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
150+
@Suppress("DEPRECATION")
151+
canvas.clipRect(
152+
clipRectLeft + smallRectOffset,
153+
clipRectTop + smallRectOffset,
154+
clipRectRight,clipRectBottom,
155+
Region.Op.INTERSECT
156+
)
157+
} else {
158+
canvas.clipRect(
159+
clipRectLeft + smallRectOffset,
160+
clipRectTop + smallRectOffset,
161+
clipRectRight,clipRectBottom
162+
)
163+
}
164+
drawClippedRectangle(canvas)
165+
canvas.restore()
94166
}
95167

96168
private fun drawCombinedClippingExample(canvas: Canvas){
169+
canvas.save()
170+
canvas.translate(columnOne, rowThree)
171+
path.rewind()
172+
path.addCircle(
173+
clipRectLeft + rectInset + circleRadius,
174+
clipRectTop + circleRadius + rectInset,
175+
circleRadius,Path.Direction.CCW
176+
)
177+
path.addRect(
178+
clipRectRight / 2 - circleRadius,
179+
clipRectTop + circleRadius + rectInset,
180+
clipRectRight / 2 + circleRadius,
181+
clipRectBottom - rectInset,Path.Direction.CCW
182+
)
183+
canvas.clipPath(path)
184+
drawClippedRectangle(canvas)
185+
canvas.restore()
97186
}
98187

99188
private fun drawRoundedRectangleClippingExample(canvas: Canvas){
189+
canvas.save()
190+
canvas.translate(columnTwo, rowThree)
191+
path.rewind()
192+
path.addRoundRect(
193+
rectF,clipRectRight / 4,
194+
clipRectRight / 4, Path.Direction.CCW
195+
)
196+
canvas.clipPath(path)
197+
drawClippedRectangle(canvas)
198+
canvas.restore()
100199
}
101200

102201
private fun drawOutsideClippingExample(canvas: Canvas){
202+
canvas.save()
203+
canvas.translate(columnOne, rowFour)
204+
canvas.clipRect(2 * rectInset, 2 * rectInset,
205+
clipRectRight - 2 * rectInset,
206+
clipRectBottom - 2 * rectInset)
207+
drawClippedRectangle(canvas)
208+
canvas.restore()
103209
}
104210

105211
private fun drawTranslatedTextExample(canvas: Canvas){
212+
canvas.save()
213+
paint.color = Color.GREEN
214+
paint.textAlign = Paint.Align.LEFT
215+
canvas.translate(columnTwo, textRow)
216+
canvas.drawText(context.getString(R.string.translated),
217+
clipRectLeft,clipRectTop,paint)
218+
canvas.restore()
106219
}
107220

108221
private fun drawSkewedTextExample(canvas: Canvas){
222+
canvas.save()
223+
paint.color = Color.YELLOW
224+
paint.textAlign = Paint.Align.RIGHT
225+
canvas.translate(columnTwo,textRow)
226+
canvas.skew(0.2f, 0.3f)
227+
canvas.drawText(context.getString(R.string.skewed),
228+
clipRectLeft, clipRectTop, paint)
229+
canvas.restore()
109230
}
110231

111232
private fun drawQuickRejectExample(canvas: Canvas){

0 commit comments

Comments
 (0)