Skip to content

Instantly share code, notes, and snippets.

@NakaoKisho
Created November 19, 2023 08:48
AndroidPathクラスの関数で書いたドラえもんっぽい何か - Draemon-like drawing by functions in AndroidPath class
Box(
modifier = modifier
.fillMaxSize()
.drawWithCache {
val path = Path()
val screenWidth = size.width
// eyes
// left eye pupil
val pupilRadius = 50f
val pupilOffsetY = 120f
val pupilOfLeftEye = Rect(
center = Offset(
x = screenWidth / 2 - pupilRadius - 10f,
y = pupilOffsetY
),
radius = pupilRadius
)
path.addOval(
oval = pupilOfLeftEye
)
// right eye pupil
val pupilOfRightEye = Rect(
center = Offset(
x = screenWidth / 2 + pupilRadius + 10f,
y = pupilOffsetY
),
radius = pupilRadius
)
path.addOval(
oval = pupilOfRightEye
)
// left eyeball
val eyeballRadius = 80f
val eyeballOffsetY = 100f
val leftEyeball = Rect(
center = Offset(
x = screenWidth / 2 - eyeballRadius,
y = eyeballOffsetY
),
radius = eyeballRadius
)
path.addOval(
oval = leftEyeball
)
// right eyeball
val rightEyeball = Rect(
center = Offset(
x = screenWidth / 2 + eyeballRadius,
y = eyeballOffsetY
),
radius = eyeballRadius
)
path.addOval(
oval = rightEyeball
)
// nose
val noseRadius = 40f
val noseOffsetY = 190f
val nose = Rect(
center = Offset(
x = screenWidth / 2,
y = noseOffsetY
),
radius = noseRadius
)
path.addOval(
oval = nose
)
// nose to mouth line
path.moveTo(
x = screenWidth / 2,
y = noseOffsetY + noseRadius
)
val noseToMouthLineOffsetX = 0f
val noseToMouthLineOffsetY = 160f
path.relativeLineTo(
dx = noseToMouthLineOffsetX,
dy = noseToMouthLineOffsetY
)
// mouth
path.relativeMoveTo(
dx = noseToMouthLineOffsetX - 200f,
dy = -noseToMouthLineOffsetY
)
path.relativeQuadraticBezierTo(
dx1 = 200f,
dy1 = 310f,
dx2 = 400f,
dy2 = 0f
)
// whiskers
// left whiskers
path.moveTo(
x = screenWidth / 2 - eyeballRadius,
y = 230f
)
path.relativeLineTo(
dx = -200f,
dy = -100f
)
path.moveTo(
x = screenWidth / 2 - eyeballRadius,
y = 250f
)
path.relativeLineTo(
dx = -200f,
dy = 0f
)
path.moveTo(
x = screenWidth / 2 - eyeballRadius,
y = 270f
)
path.relativeLineTo(
dx = -200f,
dy = 100f
)
// right whiskers
path.moveTo(
x = screenWidth / 2 + eyeballRadius,
y = 230f
)
path.relativeLineTo(
dx = 200f,
dy = -100f
)
path.moveTo(
x = screenWidth / 2 + eyeballRadius,
y = 250f
)
path.relativeLineTo(
dx = 200f,
dy = 0f
)
path.moveTo(
x = screenWidth / 2 + eyeballRadius,
y = 270f
)
path.relativeLineTo(
dx = 200f,
dy = 100f
)
// face line
path.addArc(
oval = Rect(
center = Offset(
x = screenWidth / 2,
y = 300f
),
radius = 250f
),
startAngleDegrees = -50f,
sweepAngleDegrees = 280f
)
path.addOval(
oval = Rect(
center = Offset(
x = screenWidth / 2,
y = 300f
),
radius = 400f
)
)
path.translate(
offset = Offset(
x = 0f,
y = size.height / 2 - 500f
)
)
onDrawWithContent {
drawContent()
drawPath(
path = path,
color = Color.Black,
style = Stroke(width = 10f)
)
}
}
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment