Slide 1
Slide 1 text
CoreGraphicsͰυοτֆΛඳ͜͏
Track C ϨΪϡϥʔτʔΫʢ20ʣ
1
Slide 2
Slide 2 text
noppe
• Twi%er: noppefoxwolf
• גࣜձࣾσΟʔɾΤψɾΤʔ
• ݸਓΞϓϦ։ൃऀ
• iOSDC18~21 ొஃ
• ͖ͭͶ͕͖
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
4
Slide 5
Slide 5 text
Editormode
5
Slide 6
Slide 6 text
6
Slide 7
Slide 7 text
Agenda
1. υοτֆΤσΟλͱ
2. γϯϓϧͳυοτֆΤσΟλΛ࡞Δ
3. CoreGraphicsͷ֦ு
4. ύϑΥʔϚϯεͷվળ
7
Slide 8
Slide 8 text
υοτֆΤσΟλͱ
8
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
28x28 2bit
10
Slide 11
Slide 11 text
48x48 8bit
11
Slide 12
Slide 12 text
300x300 10bit
12
Slide 13
Slide 13 text
υοτֆΛදࣔ͢Δ
imageView.contentMode = .center
imageView.image = UIImage(named: "watch")
13
Slide 14
Slide 14 text
υοτֆΛදࣔ͢Δ
imageView.contentMode = .scaleAspectFit
imageView.image = UIImage(named: "watch")
14
Slide 15
Slide 15 text
υοτֆΛදࣔ͢Δ
// Use nearest magnificationFilter
imageView.contentMode = .scaleAspectFit
imageView.layer.magnificationFilter = .nearest
imageView.image = UIImage(named: "watch")
// SwiftUI
Image(...).interpolation(.none)
-ɹը૾ࣗମͷϦαΠζॏ͘ϝϞϦΛ࿘
අ͢ΔͷͰNG
15
Slide 16
Slide 16 text
γϯϓϧͳυοτֆΤσΟλΛ࡞Δ
16
Slide 17
Slide 17 text
17
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
υοτֆΤσΟλͷϫʔΫϑ
ϩʔ
let imageView = UIImageView()
let context = CGContext()
func setup() {
imageView.onTap = { point in // 1
context.fill(point) // 2
let image = context.makeImage() // 3
imageView.image = image // 4
}
}
19
Slide 20
Slide 20 text
άϨʔεέʔϧͷCGContextͷॳظԽ
// άϨʔεέʔϧઐ༻ͷCGContextΛੜ
let context = CGContext(
data: nil,
width: 16,
height: 16,
bitsPerComponent: 8,
bytesPerRow: 1 * 16,
space: CGColorSpaceCreateDeviceGray(),
bitmapInfo: CGImageAlphaInfo.none.rawValue
)
20
Slide 21
Slide 21 text
bitsPerComponent
• 1,2,4,8 bit͔Β1৭ͷ֊ௐΛࢦఆ͢Δ
• 4bit = 16֊ௐ
• 8bit = 256֊ௐ
• RGBͳͲɺෳͷίϯϙʔωϯτͰ৭Λද͢͜ͱ͋Γ·͢
21
Slide 22
Slide 22 text
bytesPerRow
• ը૾ͷԣҰྻ͕ԿόΠτʹͳΔ͔
• 8bit(1byte)ͳΒ ίϯϙʔωϯτ x ԣͷϐΫηϧ
৭ۭؒ ԣ෯ͷόΠτ
άϨʔ 1 * width = 16
ϑϧΧϥʔRGB 4 * width = 256
22
Slide 23
Slide 23 text
space
• Χϥʔεϖʔε
৭ۭؒ Ϋϥε
άϨʔ CGColorSpaceCreateDevic
eGray()
ϑϧΧϥʔRGB CGColorSpaceCreateDevic
eRGB()
23
Slide 24
Slide 24 text
bitmapInfo
• ΞϧϑΝνϟϯωϧͷॴ | όΠτΦʔμʔ | ϑΥʔϚοτɹͷ
ϏοτϚεΫ
ྫ
• CGImageAlphaInfo.noneSkipLast.rawValue |
CGImageByteOrderInfo.order32LiCle.rawValue |
CGImagePixelFormatInfo.packed.rawValue
• CGImageAlphaInfo.none.rawValue
24
Slide 25
Slide 25 text
25
Slide 26
Slide 26 text
contextͷը૾Λඳը͢Δ
let cgImage: CGImage = context.makeImage()!
let uiImage: UIImage = UIImage(
cgImage: cgImage,
scale: 1,
orientation: .downMirrored // UIImageͷ࠲ඪܥʹม
)
// UIKit
imageView.image = uiImage
// SwiftUI
Image(uiImage: uiImage)
26
Slide 27
Slide 27 text
৭ͷృΓͭͿ͠
let color = CGColor(gray: 0, alpha: 1)
context.setFillColor(color)
let path = CGPath(
rect: CGRect(origin: point, size: CGSize(width: 1, height: 1))
)
context.addPath(path) // PathͷՃ
context.fillPath()
27
Slide 28
Slide 28 text
CoreGraphicsͷ֦ு
28
Slide 29
Slide 29 text
29
Slide 30
Slide 30 text
30
Slide 31
Slide 31 text
31
Slide 32
Slide 32 text
CGContextʹࣗ࡞ؔΛੜ͢
extension CGContext {
func fillEllipseLine(in rect: CGRect) {
// ృΓͭͿ͢ύεΛ࡞Δ
let path = makeEllipsePath(in: rect)
// ύεΛՃ
addPath(path)
// Ճͨ͠ύεΛృΓͭͿ͢
fillPath()
}
}
32
Slide 33
Slide 33 text
Bresenham's line algorithm2
• 1962ɺIBMͷδϟοΫɾϒϨθϯϋ
Ϝ͕։ൃ
• ઢ͔Β࠷ڑʹ͋ΔըૉΛฒΔ
• ԁΛඳը͢ΔൃలܥͷΞϧΰϦζϜ͕
͋Δ
• noppefoxwolf/swi,-line-algorithms
2 h$ps:/
/ja.wikipedia.org/wiki/ϒϨθϯϋϜͷΞϧΰϦζϜ
33
Slide 34
Slide 34 text
CoreGraphicsͷ֦ு2
34
Slide 35
Slide 35 text
όέππʔϧ
• ด͡ΒΕͨൣғΛృΓͭͿ͢ػೳ
• Flood Fillͱ͍͏ΞϧΰϦζϜ
• બͨ͠৭Λಉ͡৭͔Ͳ͏͔Λ୳͠ͳ
͕Β৭Λஔ͖͍͑ͯ͘
→ CGContext͔Β৭Λऔಘ͢Δඞཁ͕
͋Δ
35
Slide 36
Slide 36 text
CGContext͔Β৭ΛऔΓग़͢
• ಛఆͷ࠲ඪͷ৭Λऔಘ͢ΔAPIͳ͍
• cgContext.data͔Βը૾͕֨ೲ͞Ε͍ͯΔϙΠϯλΛΕΔ
• ϝϞϦϨΠΞτΛ֬ೝ͠ɺҙͷ࠲ඪͷ৭ΛऔΓग़͢APIΛ
࡞Δ
36
Slide 37
Slide 37 text
ϝϞϦϨΠΞτΛ֬ೝ͢Δ
2x2ͷCGContextΛ
৭ ɹ৭ʢHexʣɹ Ґஔ
17.0 / 255.0 0x11 ɹࠨԼ
34.0 / 255.0 0x22 ɹӈԼ
51.0 / 255.0 0x33 ɹࠨ্
68.0 / 255.0 0x44 ɹӈ্
ͷάϨʔ̐৭Ͱண৭
37
Slide 38
Slide 38 text
ϝϞϦϨΠΞτΛ֬ೝ͢Δ
lldbͰcgContext.dataͷΞυϨεΛ֬ೝ͢Δ
(lldb) frame var -L ctxData
0x000000016d5379e8: (UnsafeMutableRawPointer) ctxData = 0x600000c51670
→ 0x600000c51670͕CGContextͷdata͕֨ೲ͞Ε͍ͯΔΞυϨ
ε
38
Slide 39
Slide 39 text
ϝϞϦϨΠΞτΛ֬ೝ͢Δ
• Debug > Debug Workflow > View
Memory
• ϝϞϦΞυϨεΛೖྗ͢Δ
39
Slide 40
Slide 40 text
άϨʔεέʔϧͷϝϞϦϨΠΞτ
• ࠨԼ͔Βӈ্ʹ͔͚ͯॱ൪ʹஔ͞Ε͍ͯΔ
• 1υοτ1byteͰ4υοτฒΜͰ͍Δ
40
Slide 41
Slide 41 text
CGContextͷdata͔Β৭ΛऔΓग़͢
struct GrayColor {
let gray: UInt8
}
// ϙΠϯλ͔Βઌ಄8bitΛGrayColorͱͯ͠औΓग़͢
let color = data.load(as: GrayColor.self)
// 100ϐΫηϧͷ৭ΛऔΓग़͢
let color = data.load(
fromByteOffset: MemoryLayout.size * 100,
as: GrayColor.self
)
41
Slide 42
Slide 42 text
ృΓ௵͠
• ΩϟϯόεαΠζృΓͭͿ͠ൣғͷෳࡶ͞ʹΑ͕͔ͬͯ࣌ؒ
͔Δ
• ࠷దͳΞϧΰϦζϜͷબఆ
• ϝϞϦΛɾॻ͖ࠐΈͯ͠ߴԽ
→ Swi'ͳΒܕ҆શʹͰ͖Δ
• noppefoxwolf/PixelArtKit
42
Slide 43
Slide 43 text
ύϑΥʔϚϯεͷվળ
43
Slide 44
Slide 44 text
ύϑΥʔϚϯεͷվળ
• ϝϞϦͷফඅΛ͑ΔΛͯ͠Έ·͢
• ৗʹτϨʔυΦϑ͕͋Δ
• Կ͕τϨʔυΦϑʹͳΔͷ͔Λߟ͑ͯΈ·͠ΐ͏
44
Slide 45
Slide 45 text
ΠϯσοΫεΧϥʔ
1. ը૾Λ256৭ͷάϨʔεέʔϧͰฤू͢
Δ
2. 256৭ͷάϨʔͷ৭ͦΕͧΕʹϑϧΧ
ϥʔͷ৭ΛରԠͤͨ͞ΠϯσοΫεΛ
༻ҙ͢Δ
3. ΠϯσοΫεΛݩʹඳը
• ΩϟϯόεͷϝϞϦ֬อ͕1/4ఔͰࡁ
Ή
• ϨτϩήʔϜͷ2PΧϥʔͷΈ
45
Slide 46
Slide 46 text
ΠϯσοΫεΧϥʔͷ࣮
• CGContextʹػೳͱͯ͠ଘࡏ͠ͳ͍
ͷͰࣗ࡞
• ࣗલͷCIFilter (CoreImage)Λͬͯඳ
ըͷલͰண৭͢Δ
• CIFilterͷγΣʔμMetalͰ࣮
46
Slide 47
Slide 47 text
ΠϯσοΫεΧϥʔϑΟϧλͷ࣮
float4 lookupTable(sampler src, sampler lut) {
float2 pos = src.coord();
float4 pixelColor = src.sample(pos);
int index = pixelColor.r * 255;
int x = index % int(lut.size().x);
int y = index / int(lut.size().y);
float2 lutPos = float2(x, y);
float4 lutColor = lut.sample(lutPos);
return lutColor;
}
• noppefoxwolf/PixelArtKit
47
Slide 48
Slide 48 text
ΠϯσοΫεΧϥʔͷτϨʔυΦϑ
• ৭੍͕ݶ͞ΕΔ
• ը૾ͷϖʔετ͕͍͠
• άϥσʔγϣϯʹऑ͘ͳΔ
• ൣғબͷᮢΛѻ͍ʹ͍͘
48
Slide 49
Slide 49 text
Recap
1. υοτֆΤσΟλCoreGraphicsͱUIKit(Swi5UI)Ͱ࣮Ͱ͖Δ
2. CGContextCGPathΛ͑ࣗ༝ͳඳըؔΛ࣮Ͱ͖Δ
3. CGContextϝϞϦΛࢀরͰ͖Δ
4. ϒϨθϯϋϜΠϯσοΫεΧϥʔͳͲͷݟࠓ׆͔ͤΔ
49