네이티브 차트 개발 여정

౵झఋࢲ࠺झীࢲ੄ର౟ /BUJWF۽૓೯ೞѱػ੉ਬ п೒ۖಬ߹ର౟ѐߊ

ӝࣿ۽ࢎۈਸѤъೞѱ

౵झఋ ౵झఋݒѢ૓ IUUQT QBTUBIFBMUIDPNNBHB[JOFSFBEIUNM OPCPBSE@OP] ౵झఋজղର౟

׮নೠ࢚ࣁझಖ tആ׼੉হ૑݅࠙੉ղח੉য઱ࣁਃu j t࠙੉࢚ڄযઉ੓ਵݶۄੋ੉یߓ҃Ր য઱ࣁਃu tզ૞ࢶఖೞݶചݶ੄ਤ஖ীզ૞ࢶ ੉য়ب۾झ௼܀೧઱ࣁਃu tՐযઉ੓חҔఠ஖ೞݶҗѢ࠙੉ղч ࢶఖ೧઱ࣁਃu tࣻ૒ഛ੢ػ࢚కীࢲӝ۾ই੉௑ࢶఖೞ
ݶର౟ࣻ૒୷ࣗೞݶࢲӒਤ஖۽झ௼܀ೞ ݶࢲইېܻझ౟ীࢲӝ۾ࢶఖ೧઱ࣁਃu tজఃݶഅ੤दр੉ചݶ੄ਤ஖ীয় ب۾಴द೧઱ࣁਃu tആ׼੉ࣃࢲ߹୭؀ߧਤܳֈਵݶ୭؀ं ੗݅ఀ݅಴दೞҊr֫਺sਵ۽ࠁৈ઱ࣁਃu tഛ؀୷ࣗೡٸदр੄ডࣻী೧׼ೞח दр݅಴द೧઱ࣁਃu

tആ׼੉হ૑݅࠙੉ղח੉য઱ࣁਃu j t࠙੉࢚ڄযઉ੓ਵݶۄੋ੉یߓ҃Ր য઱ࣁਃu tզ૞ࢶఖೞݶചݶ੄ਤ஖ীզ૞ࢶ ੉য়ب۾झ௼܀೧઱ࣁਃu tՐযઉ੓חҔఠ஖ೞݶҗѢ࠙੉ղч ࢶఖ೧઱ࣁਃu tࣻ૒ഛ੢ػ࢚కীࢲӝ۾ই੉௑ࢶఖೞ ݶର౟ࣻ૒୷ࣗೞݶࢲӒਤ஖۽झ௼܀ೞ
ݶࢲইېܻझ౟ীࢲӝ۾ࢶఖ೧઱ࣁਃu tজఃݶഅ੤दр੉ചݶ੄ਤ஖ীয় ب۾಴द೧઱ࣁਃu tആ׼੉ࣃࢲ߹୭؀ߧਤܳֈਵݶ୭؀ं ੗݅ఀ݅಴दೞҊr֫਺sਵ۽ࠁৈ઱ࣁਃu tഛ؀୷ࣗೡٸदр੄ডࣻী೧׼ೞח दр݅಴द೧઱ࣁਃu ࣻ஖ীٮ࢚ܻܲ࢝࠙ ౠ੿ߧਤ݅ߓ࢚҃࢝੸ਊ ۄੋՐӣ ߓ҃Րӣ झ௼܀ ܄೐ۨझ ഛ؀࢚కীࢲ੄߄٘ېӒ١੄ੋఠۑ࣌ ۄੋ৻ࠁ੿੼಴द߂ੋఠۑ࣌ j

tആ׼੉হ૑݅࠙੉ղח੉য઱ࣁਃu j t࠙੉࢚ڄযઉ੓ਵݶۄੋ੉یߓ҃Ր য઱ࣁਃu tզ૞ࢶఖೞݶചݶ੄ਤ஖ীզ૞ࢶ ੉য়ب۾झ௼܀೧઱ࣁਃu tՐযઉ੓חҔఠ஖ೞݶҗѢ࠙੉ղч ࢶఖ೧઱ࣁਃu tࣻ૒ഛ੢ػ࢚కীࢲӝ۾ই੉௑ࢶఖೞ ݶର౟ࣻ૒୷ࣗೞݶࢲӒਤ஖۽झ௼܀ೞ
ݶࢲইېܻझ౟ীࢲӝ۾ࢶఖ೧઱ࣁਃu tজఃݶഅ੤दр੉ചݶ੄ਤ஖ীয় ب۾಴द೧઱ࣁਃu tആ׼੉ࣃࢲ߹୭؀ߧਤܳֈਵݶ୭؀ं ੗݅ఀ݅಴दೞҊr֫਺sਵ۽ࠁৈ઱ࣁਃu tഛ؀୷ࣗೡٸदр੄ডࣻী೧׼ೞח दр݅಴द೧઱ࣁਃu /BUJWF۽ҳഅೞ੗

ઝ಴҅ < > 9BYJT <XJEUI > < IFJHIU> <XJEUI IFJHIU>
:BYJT

ઝ಴҅ < > <XJEUI > < IFJHIU> <XJEUI IFJHIU> दр
ആ׼ч

ઝ಴҅ < > <XJEUI > दр рѺചݶ੄о۽ӡ੉ೠߣীࠁੌࣻ੓חؘ੉ఠ੄ѐࣻ दр಴द࠙рѺਵ۽ѐؘ੉ఠ

$PSF(SBQIJDT 6*,JU $PSF(SBQIJDT 2VBSU[ "QQMJDBUJPO (16

-JOFӒܻӝ -JOFী࢚࢝੸ਊೞӝ ࢚࢝Ҁஜ೧Ѿೞӝ ݫݽܻ੉ग೧Ѿೞӝ

-JOFӒܻӝ

-JOFӒܻӝ struct ChartPoint { let offset: CGPoint // ആ׼ч, ആ׼੉
ஏ੿ػ दр let glucoseValue: Glucose let date: Date } ղੌয়੹द

-JOFӒܻӝ let path = UIBezierPath()

-JOFӒܻӝ let path = UIBezierPath() var isFirstPoint: Bool = true
pointList.forEach { point in // ୐ߣ૩ ನੋ౟݅ move if isFirstPoint { path.move(to: point.offset) isFirstPoint = false } else { path.addLine(to: point.offset) } }

-JOFӒܻӝ path.lineWidth = 3.0 path.lineCapStyle = .round path.lineJoinStyle = .round
UIColor.white.setStroke() path.stroke()

-JOFী࢚࢝੸ਊೞӝ

-JOFী࢚࢝੸ਊೞӝ tആ׼ߧਤ߹࢚࢝ਵ۽ ۄੋਸச೧઱ࣁਃu

$MJQQJOHQBUI DMJQQJOHQBUI

$MJQQJOHQBUI let clippingPath = createClippingPath(preYValue, height: yValue - preYValue) clippingPath.addClip()
type.color.setStroke() path.stroke()

$PSF(SBQIJDT$($POUFYU

$PSF(SBQIJDT$($POUFYU TUBUFTUBDL TBWF SFTUPSF

$($POUFYU GlucoseRange.forEach { type in let yValue = type.yValue context.saveGState()
// clippingPath ୊ܻ ... preYValue = yValue context.restoreGState() }

࢚࢝Ҁஜ೧Ѿೞӝ

ন՘Ӓۄؘ੉࣌ SFRVJSFE ࢶఖࢶ ആ׼ࢶ ആ׼CH ӝ۾ࢶӝ۾ই੉௑զ૞ܻ࠙ࢶ ঌܿࢶ PQUJPOBM YӒې೐ࢶ SFRVJSFE
উ੹৔৉ SFRVJSFE

୭࢚ਤী੓যঠೞח৔৉

$(#MFOE.PEF /* Set the blend mode of `context' to `mode'.
*/ @available(iOS 2.0, *) public func setBlendMode(_ mode: CGBlendMode)

$(#MFOE.PEF 33FTVMU 44PVSDF %%FTUJOBUJPO BBMQIB case
clear = 16 /* R = 0 */ case copy = 17 /* R = S */ case sourceIn = 18 /* R = S*Da */ case sourceOut = 19 /* R = S*(1 - Da) */ case sourceAtop = 20 /* R = S*Da + D*(1 - Sa) */ case destinationOver = 21 /* R = S*(1 - Da) + D */ case destinationIn = 22 /* R = D*Sa */ case destinationOut = 23 /* R = D*(1 - Sa) */ case destinationAtop = 24 /* R = S*(1 - Da) + D*Sa */ …

1PSUFS - %VGG %FTUJOBUJPO 4PVSDF #MBOL%FTUJOBUJPO4PVSDF

$(#MFOE.PEF // ߧਤղ ৔৉ draw

$(#MFOE.PEF // নଃ Ӓۄؘ੉࣌ draw // R = S*Da +
D*(1 - Sa) context.setBlendMode(.sourceAtop)

$(#MFOE.PEF ੸ਊ੹ ੸ਊറ

$(#MFOE.PEF // text, line draw // R = S context.setBlendMode(.copy)

$(#MFOE.PEF ੸ਊ੹ ੸ਊറ

ݫݽܻ੉ग೧Ѿೞӝ

tоੑੌ੗ࠗఠഅ੤զ૞ө૑ झ௼܀оמೞѱ೧઱ࣁਃu

ѐ ѐ ѐ दр ೞܖ ֙ ആ׼ؘ੉ఠࣻ

୭؀ӝрઑѤ੉੓঻؍द੺

୭؀ӝрઑѤ੉੓঻؍द੺ tࢎਊೞ׮ࠁݶର౟ࢶ੉হয૕ٸо੓যਃu য়೑ೞҊੌоө਍द੼ ਃࣗоטযզࣻ۾ݫݽܻࠗ׸ૐо৘࢚ ݫݽܻҙ۲੉૑ঋਸө GSPNӓIFBWZਬ੷

Ҋ޹੄൒ܴ ੉۠੷۠ߑߨٜѨష ޙઁ੄઺੼਷ݫݽܻ ୭ࣗ۽೙ਃೠࠗ࠙݅Ӓܻݶ೧Ѿغ૑ঋਸө

7JFX1PSU

7JFX1PSU അ੤ചݶীࠁৈ૑ח৔৉ ݽ߄ੌ٣߄੉झ੹୓ झ௼܀৔৉઺അ੤ࢎਊ੗ীѱࠁ੉חࠗ࠙

var viewPort: CGRect if viewPort.contains(point.offset) { // Chart Viewী draw
} 7JFX1PSU 4DSPMM7JFX $IBSU7JFX

$POUFOU7JFX 4DSPMM7JFX 7JFX1PSU੸ਊ੹

7JFX1PSU੸ਊറ $POUFOU7JFX $IBSU7JFX

7JFX1PSU ୭؀рѺਵ۽୷ࣗ೮ਸٸ दр दр ആ׼ؘ੉ఠࣻ
दрীѐY୭؀ѐ

7JFX1PSU ୭؀рѺਵ۽୷ࣗ೮ਸٸ दр दр ആ׼ؘ੉ఠࣻ
दрীѐY୭؀ѐ ୭ࣗрѺਵ۽ഛ؀೮ਸٸ दр ആ׼ؘ੉ఠࣻ୭؀ѐ

੸ਊ੹ ੸ਊറ

"OESPJE

࠶۾ҳઑ۽-JOFର౟Ӓܻӝ ҳрߧਤীٮ࢚ܲ࢝ҳ࠙

-JOFର౟Ӓܻӝ ର౟੄-JOFਸӒܻӝਤ೧$BOWBTࢎਊ @Composable fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit)
= Spacer(modifier.drawBehind(onDraw))

-JOFର౟Ӓܻӝ ESBX-JOF؀नীESBX1BUIࢎਊ fun drawLine( color: Color, start: Offset, end: Offset,
strokeWidth: Float ... ) fun drawPath( path: Path, color: Color, alpha: Float = 1.0f, style: DrawStyle = Fill, ... )

੹୓ӝрਸೠߣীӒܻӝ tоੑੌ੗ࠗఠഅ੤զ૞ө૑ झ௼܀оמೞѱ೧઱ࣁਃu

੹୓ӝрਸೠߣীӒܻӝ উࠁ੉ח৔৉ب҅࢑

࠶۾ҳઑ۽Ӓܻӝ -B[Z3PX

࠶۾ҳઑ۽Ӓܻӝ fi STU MBTU -B[Z3PX

࠶۾ҳઑ۽Ӓܻӝ #MPDL -B[Z3PX fi STU MBTU

࠶۾ҳઑ۽Ӓܻӝ ) ) ) )

࠶۾ҳઑ۽Ӓܻӝ % ) ) ) ) ) ) tೠߣীदрө૑ࠁੌࣻ ੓ب۾಴द೧઱ࣁਃu

࠶۾ҳઑ۽Ӓܻӝ दр ࠶۾ѐ _दр ࠶۾ѐ % ) ) ) ;PPN*O

࠶۾ё୓ JOEFY -B[Z3PX੄*UFN*OEFY TUBSU&OE3BOHF दрߧਤ ನੋ౟ ӝ۾ ఋ੐ۄੋؘ੉ఠ੄4VC-JTU data class
Block( val index: Int, val startEndRange: OpenEndRange<Instant>, val pointList: List<Point>, val recordList: List<Record>, val timelineList: List<Point>, )

1PJOUё୓ Y7BMVF दр Z7BMVF ആ׼ч PGGTFU Ӓ۰૕ਤ஖੷੢ JOEFY п࠶۾ীࢲ੄࠙ױਤਤ஖ class
Point( override val xValue: Long, override val yValue: Int, override var offset: Offset = Offset.Zero, override var index: Long = 0L, ) : Data

1PJOUё୓ п࠶۾੄݃૑݄1PJOUחઁ৻ )࠙ val startEndRange: OpenEndRange<Instant> public operator fun contains(value:
T): Boolean = value >= start && value < endExclusive

1PJOUઝ಴҅࢑ 1PJOUࢎ੉੄рѺ4DSFFO8JEUI

1PJOUઝ಴҅࢑ 1PJOUࢎ੉੄рѺ4DSFFO8JEUI ;PPN*O

࠶۾҃҅ࢶ੄ۄੋোѾࢿ

ҳрߧਤীٮ࢚ܲ࢝ҳ࠙

ҳрਸܻ࠙ೞӝਤ೧઺р੼୶о

7FSUJDBM(SBEJFOUܳ੉ਊೠߑߨ t৔৉࢚࢝੉ݺഛೞѱҳ࠙غѱ ࢚࢝ਸ଻ਕ઱ࣁਃu @Stable fun verticalGradient( vararg colorStops: Pair<Float, Color>,
startY: Float = 0f, endY: Float = Float.POSITIVE_INFINITY, tileMode: TileMode = TileMode.Clamp ): Brush

4XFFQ(SBEJFOUܳ੉ਊೠߑߨ tয়೐ࣇ݅੉زदఃݶ৔৉੄҃҅ܳ ݺഛ൤աׂࣻ੓૑ঋਸө u @Stable fun sweepGradient( vararg colorStops: Pair<Float,
Color>, center: Offset = Offset.Unspecified ): Brush

4XFFQ(SBEJFOUܳ੉ਊೠߑߨ $FOUFS0GGTFUਸ৽ଃ՘ਵ۽੉ز о૑࢝ਸݺഛ൤ҳ࠙ೡࣻ੓਺ tҊആ׼җ੷ആ׼࢚࢝ਸѐঀࣁ࠙ച೧ࢲ ѐ۽ҳ࠙೧ࢲ৔৉ਸӒ۰઱ࣁਃu

৔৉ਸৈ۞ߣӒ۰ࢲ೤஖חߑߨ

4IBEFS#SVTI۽ೠߣী଻਋ӝ val shaderBrush = ShaderBrush( ImageShader(ImageBitmap.imageResource(R.drawable.chart_area)) ) t*NBHF#JUNBQਸ੉޷૑౵ੌ੉ইצ பߡझীࢲӒ۰ࢲ੹׳ೞݶغ૑ঋਸө u

4IBEFS#SVTI۽ೠߣী଻਋ӝ val shaderBrush = ShaderBrush( ImageShader(ImageBitmap.imageResource(R.drawable.chart_area)) ) #JUNBQ *NBHF #JUNBQ
*NBHF 4IBEFS 4IBEFS #SVTI

4IBEFS#SVTI۽ೠߣী଻਋ӝ *NBHF#JUNBQਵ۽߸ജ class BitmapCanvas(width: Int, height: Int) { val bitmap:
Bitmap = Bitmap.createBitmap( width, height, Bitmap.Config.ARGB_8888 ) val imageBitmap: ImageBitmap get() = bitmap.asImageBitmap() val width: Float get() = bitmap.width.toFloat() val height: Float get() = bitmap.height.toFloat() }

4IBEFS#SVTI۽ೠߣী଻਋ӝ #JUNBQী૒੽Ӓܻח ੷ࣻળ$BOWBT ৔৉଻਋ӝ ࠳۞एࢤࢿ val canvas = Canvas(bitmapCanvas.bitmap) positionList.forEach
{ position -> val paint = Paint().apply { color = position.areaColor.toArgb() } canvas.drawRect( 0f, position.top, chartWidth, position.bottom, paint ) } return ShaderBrush(ImageShader(bitmapCanvas.imageBitmap))

4IBEFS#SVTI۽ೠߣী଻਋ӝ 4IBEFS #SVTI

4IBEFS#SVTI۽ೠߣী଻਋ӝ

4IBEFS#SVTI۽ೠߣী଻਋ӝ ӝળࢶ

4IBEFS#SVTI۽ೠߣী଻਋ӝ tधࢎର౟חন৖࠙ਸ ൒ܻѱ୊ܻ೧઱ࣁਃu

4IBEFS#SVTI۽ೠߣী଻਋ӝ ೠߣ݅ٚ࠳۞एח੤ࢎਊ೤פ׮ val brush = remember(height, positions) { createShaderBrush( width
= chartWidth, height = chartHeight, positions = positions ) }

$MJQ1BUI۽Րয૓৔৉࢚࢝ਸ୊ܻೞחߑߨ tۄੋ੉Րয૓ࠗ࠙਷৔৉࢚࢝ীࢲ ઁ৻दெࢲӒ۰઱ࣁਃu

$MJQ1BUI۽Րয૓৔৉࢚࢝ਸ୊ܻೞחߑߨ $MJQ0Q%JGGFSFODFࢎਊ Րয૓৔৉਷DMJQ1BUI۽ઁ৻ inline fun DrawScope.clipPath( path: Path, clipOp: ClipOp
= ClipOp.Intersect, block: DrawScope.() -> Unit )

$MJQ1BUI۽Րয૓৔৉࢚࢝ਸ୊ܻೞחߑߨ

द೯଱য় ੗ਬب ҃೷

네이티브 차트 개발 여정

네이티브 차트 개발 여정

More Decks by kakao

Other Decks in Programming

Featured

Transcript