Slide 1
Slide 1 text
PathΛ׆༻ͯ͠
Swift ChartsͷݶքΛ͑Ζ
גࣜձࣾZOZO
ϒϥϯυιϦϡʔγϣϯ։ൃຊ෦ / ϑϩϯτΤϯυ෦
WEAR iOSϒϩοΫ
ࢁా ෨
Copyright © ZOZO, Inc.
Slide 2
Slide 2 text
© ZOZO, Inc.
גࣜձࣾZOZO
ϒϥϯυιϦϡʔγϣϯ։ൃຊ෦ / ϑϩϯτΤϯυ෦
WEAR iOSϒϩοΫ
ࢁా ෨ (Fuya Yamada)
ελόʹߦͬͯɺۤΈʹ͑ͳ͕Β
ҿΉίʔώʔ͕͖
ʢຊίίΞ͕ྑ͍ʣ
Slide 3
Slide 3 text
© ZOZO, Inc.
ຊ͢͜ͱ
PathΛ׆༻ͯ͠
Swift Chartsʹͳ͍άϥϑΛ࡞ͯ͠Έͨ
ର
Կ͔͠ΒSwiftUIΛѻ͏ਓ
Slide 4
Slide 4 text
© ZOZO, Inc.
ΞδΣϯμ
● Swift Chartsͷհ
● Swift Chartsͷݶք
● PathΛ༻͍ͯݶքಥഁ͢Δํ๏
● Swift Chartsʹͳ͍άϥϑͷ࣮ྫ
● ·ͱΊ
4
Slide 5
Slide 5 text
© ZOZO, Inc.
Swift Chartsͷհ
Swift Chartsͱʁ
○ iOS 16͔Βར༻Ͱ͖Δ SwiftUI ͷάϥϑඳըϥΠϒϥϦ
○ ɺંΕઢɺࢄਤΛ͡Ίͱ͢Δ6छྨͷඳը͕Մೳ
5
Slide 6
Slide 6 text
© ZOZO, Inc.
Swift Chartsͷհ
6
ຌྫͷՃ ਫฏઢͷදࣔ
͜ΜͳΧελϚΠζ͕Ͱ͖·͢
Slide 7
Slide 7 text
© ZOZO, Inc.
Swift Chartsͷݶքʢ՝ʣ
ԁάϥϑϨʔμʔνϟʔτඇରԠ
7
Swift ChartsͰαϙʔτ͞Ε͍ͯͳ͍άϥϑಠࣗͰ࡞Δඞཁ͕͋Δ
https://chachart.net/radar
Slide 8
Slide 8 text
© ZOZO, Inc.
PathΛ༻͍ͯݶքಥഁ͢Δํ๏
PathΛ׆༻ͯ͠άϥϑΛ࡞
Pathͱʁ
➔ ઢɺۂઢͳͲΛΈ߹Θͤͯෳࡶͳܗঢ়Λ࡞͢ΔͨΊͷߏମ
ϝϦοτ
➔ දݱͷࣗ༝ͷߴ͞
8
Path { path in
...
}
ChartsͰදݱͰ͖ͳ͔ͬͨϨΠΞτΛ࣮ݱՄೳ
Slide 9
Slide 9 text
© ZOZO, Inc.
PathͷͰ͖Δ͜ͱ
Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 0))
}
9
path.closeSubpath() // ύεΛด͡Δ
path.addArc(
center: CGPoint(x: 100, y: 100),
radius: 100,
startAngle: .degrees(-90),
endAngle: .degrees(0),
clockwise: false
)
࢝↓
Slide 10
Slide 10 text
© ZOZO, Inc.
ShapeϓϩτίϧΛར༻
ඳըՄೳͳਤܗΛఆٛ͢ΔͨΊͷΠϯλʔϑΣʔε
PathͰԁάϥϑΛ࣮
10
public protocol Shape : Animatable, View {
func path(in rect: CGRect) -> Path
}
Animatable
ҙͷ͕มԽͨ࣌͠ɺ
ΞχϝʔγϣϯΛద༻
path(in:)ϝιου
༩͑ΒΕͨCGRect (ඳըྖҬ)
ʹඳը͢ΔPath
Slide 11
Slide 11 text
© ZOZO, Inc.
PathͰԁάϥϑΛ࣮
11
࡞Γ͍ͨͷ
ԁހͷ࡞
3ͭͷΈ߹Θͤ
ArcView
Slide 12
Slide 12 text
© ZOZO, Inc.
struct ArcView: Shape {
var startAngle: Double
var endAngle: Double
var animatableData: Double {
get { endAngle }
set { endAngle = newValue }
}
func path(in rect: CGRect) -> Path {
let rotationAdjustment = Angle(degrees: 90)
let adjustedStartAngle = Angle(degrees: startAngle) - rotationAdjustment
let adjustedEndAngle = Angle(degrees: endAngle) - rotationAdjustment
return Path { p in
p.addArc(
center: CGPoint(x: rect.midX, y: rect.midY),
radius: rect.width / 2,
startAngle: adjustedStartAngle, endAngle: adjustedEndAngle,
clockwise: false
)
p.addLine(to: CGPoint(x: rect.midX, y: rect.midY))
p.closeSubpath()
}
}
}
ArcViewͷ࣮ - શମ૾
12
ArcView
Slide 13
Slide 13 text
© ZOZO, Inc.
struct ArcView: Shape {
var startAngle: Double
var endAngle: Double
var animatableData: Double {
get { endAngle }
set { endAngle = newValue }
}
func path(in rect: CGRect) -> Path {
let rotationAdjustment = Angle(degrees: 90)
let adjustedStartAngle = Angle(degrees: startAngle) - rotationAdjustment
let adjustedEndAngle = Angle(degrees: endAngle) - rotationAdjustment
return Path { p in
p.addArc(
center: CGPoint(x: rect.midX, y: rect.midY),
radius: rect.width / 2,
startAngle: adjustedStartAngle, endAngle: adjustedEndAngle,
clockwise: false
)
p.addLine(to: CGPoint(x: rect.midX, y: rect.midY))
p.closeSubpath()
}
}
}
ArcViewͷ࣮
AnimatableData
ϓϩύςΟ
e.g.
endAngleʢऴྃ֯ʣΛ
ࢦఆ͢ΔͱArcViewͷׂ߹͕
૿Ճ͢ΔΞχϝʔγϣϯ
var animatableData: Double {
get { endAngle }
set { endAngle = newValue }
}
13
Slide 14
Slide 14 text
© ZOZO, Inc.
struct ArcView: Shape {
var startAngle: Double
var endAngle: Double
var animatableData: Double {
get { endAngle }
set { endAngle = newValue }
}
func path(in rect: CGRect) -> Path {
let rotationAdjustment = Angle(degrees: 90)
let adjustedStartAngle = Angle(degrees: startAngle) - rotationAdjustment
let adjustedEndAngle = Angle(degrees: endAngle) - rotationAdjustment
return Path { p in
p.addArc(
center: CGPoint(x: rect.midX, y: rect.midY),
radius: rect.width / 2,
startAngle: adjustedStartAngle, endAngle: adjustedEndAngle,
clockwise: false
)
p.addLine(to: CGPoint(x: rect.midX, y: rect.midY))
p.closeSubpath()
}
}
}
ArcViewͷ࣮
0Λ্෦ʹ͢ΔͨΊʹ
֯ௐ
let rotationAdjustment = Angle(degrees: 90)
let adjustedStartAngle = Angle(degrees: startAngle) - rotationAdjustment
let adjustedEndAngle = Angle(degrees: endAngle) - rotationAdjustment
14
0° 0°
Slide 15
Slide 15 text
© ZOZO, Inc.
struct ArcView: Shape {
var startAngle: Double
var endAngle: Double
var animatableData: Double {
get { endAngle }
set { endAngle = newValue }
}
func path(in rect: CGRect) -> Path {
let rotationAdjustment = Angle(degrees: 90)
let adjustedStartAngle = Angle(degrees: startAngle) - rotationAdjustment
let adjustedEndAngle = Angle(degrees: endAngle) - rotationAdjustment
return Path { p in
p.addArc (
center: CGPoint(x: rect.midX, y: rect.midY),
radius: rect.width / 2,
startAngle: adjustedStartAngle, endAngle: adjustedEndAngle,
clockwise: false
)
p.addLine(to: CGPoint(x: rect.midX, y: rect.midY))
p.closeSubpath()
}
}
}
ArcViewͷ࣮
ԁހͷඳը
addArc
+
addLine & close
return Path { p in
p.addArc (
center: CGPoint(x: rect.midX, y: rect.midY),
radius: rect.width / 2,
startAngle: adjustedStartAngle,
endAngle: adjustedEndAngle,
clockwise: false
)
p.addLine(to: CGPoint(x: rect.midX, y: rect.midY))
p.closeSubpath()
} 15
Slide 16
Slide 16 text
© ZOZO, Inc.
PathͰԁάϥϑΛ࣮
16
ԁάϥϑ
struct PieChartView: View {
var body: some View {
ZStack {
ArcView(startAngle: 0, endAngle: 360)
.fill(Color("green"))
ArcView(startAngle: 0, endAngle: 250)
.fill(Color("blue"))
ArcView(startAngle: 0, endAngle: 140)
.fill(Color("red"))
}
}
}
Slide 17
Slide 17 text
© ZOZO, Inc.
PathͰԁάϥϑΛ࣮
17
ςΩετࠞͥͯ
͜Μͳ͜ͱͰ͖Δ
Slide 18
Slide 18 text
© ZOZO, Inc.
͞ΒʹPathͰϨʔμʔνϟʔτ࣮Մೳ
● addLine(to:), move(to:) ͷΈ
● ଟ֯ܗͷ֤Λܭࢉ͠ɺ
Λͭͳ͛ͯଟ֯ܗΛඳը
18
Slide 19
Slide 19 text
© ZOZO, Inc.
͞ΒʹPathͰϨʔμʔνϟʔτ࣮Մೳ
19
ϕʔεͷViewͷ࡞ํ๏Λ
ͬ͘͟Γ͝հ
PolygonShape
Slide 20
Slide 20 text
© ZOZO, Inc.
struct PolygonShape: Shape {
let sides: Int // ลͷ
func path(in rect: CGRect) -> Path {
let centerX = rect.width / 2
let centerY = rect.height / 2
let radius = min(rect.width, rect.height) / 2
let angle = .pi * 2 / Double(sides)
let offsetAngle = -(Double.pi / 2) // 0Λ্෦ʹ͢ΔͨΊʹ֯ௐ
return Path { path in
for index in 0..
Slide 21
Slide 21 text
© ZOZO, Inc.
struct PolygonShape: Shape {
let sides: Int // ลͷ
func path(in rect: CGRect) -> Path {
let centerX = rect.width / 2
let centerY = rect.height / 2
let radius = min(rect.width, rect.height) / 2
let angle = .pi * 2 / Double(sides)
let offsetAngle = -(Double.pi / 2) // 0Λ্෦ʹ͢ΔͨΊʹ֯ௐ
return Path { path in
for index in 0..
Slide 22
Slide 22 text
© ZOZO, Inc.
struct PolygonShape: Shape {
let sides: Int // ลͷ
func path(in rect: CGRect) -> Path {
let centerX = rect.width / 2
let centerY = rect.height / 2
let radius = min(rect.width, rect.height) / 2
let angle = .pi * 2 / Double(sides)
let offsetAngle = -(Double.pi / 2) // 0Λ্෦ʹ͢ΔͨΊʹ֯ௐ
return Path { path in
for index in 0..
Slide 23
Slide 23 text
© ZOZO, Inc.
struct PolygonShape: Shape {
let sides: Int // ลͷ
func path(in rect: CGRect) -> Path {
let centerX = rect.width / 2
let centerY = rect.height / 2
let radius = min(rect.width, rect.height) / 2
let angle = .pi * 2 / Double(sides)
let offsetAngle = -(Double.pi / 2) // 0Λ্෦ʹ͢ΔͨΊʹ֯ௐ
return Path { path in
for index in 0..
Slide 24
Slide 24 text
© ZOZO, Inc.
struct PolygonShape: Shape {
let sides: Int // ลͷ
func path(in rect: CGRect) -> Path {
let centerX = rect.width / 2
let centerY = rect.height / 2
let radius = min(rect.width, rect.height) / 2
let angle = .pi * 2 / Double(sides)
let offsetAngle = -(Double.pi / 2) // 0Λ্෦ʹ͢ΔͨΊʹ֯ௐ
return Path { path in
for index in 0..
Slide 25
Slide 25 text
© ZOZO, Inc.
struct PolygonShape: Shape {
let sides: Int // ลͷ
func path(in rect: CGRect) -> Path {
let centerX = rect.width / 2
let centerY = rect.height / 2
let radius = min(rect.width, rect.height) / 2
let angle = .pi * 2 / Double(sides)
let offsetAngle = -(Double.pi / 2) // 0Λ্෦ʹ͢ΔͨΊʹ֯ௐ
return Path { path in
for index in 0..
Slide 26
Slide 26 text
© ZOZO, Inc.
struct PolygonShape: Shape {
let sides: Int // ลͷ
func path(in rect: CGRect) -> Path {
let centerX = rect.width / 2
let centerY = rect.height / 2
let radius = min(rect.width, rect.height) / 2
let angle = .pi * 2 / Double(sides)
let offsetAngle = -(Double.pi / 2) // 0Λ্෦ʹ͢ΔͨΊʹ֯ௐ
return Path { path in
for index in 0..
Slide 27
Slide 27 text
© ZOZO, Inc.
͞ΒʹPathͰϨʔμʔνϟʔτ࣮Մೳ
27
PolygonShape
ϕʔεͷView
Slide 28
Slide 28 text
© ZOZO, Inc.
͡Ό͋PathͰάϥϑͷ࡞ʹݶք͋Δͷʁʁ
2DͷඳըքͰݶքແ͍ʂʁʢFuyaௐʣ
28
Slide 29
Slide 29 text
© ZOZO, Inc.
·ͱΊ
Swift ChartsͰαϙʔτ͞Ε͍ͯͳ͍άϥϑ
PathΛ࣮ͬͯ͢Δ͜ͱ͕Մೳ
29
ৄ͍࣮͠ํ๏ͪ͜Β͔Β
https://github.com/Fuyan777/charts-sample
Slide 30
Slide 30 text
No content