微北洋-代码读后感(1)

如何绘制一条优秀的GPA曲线

(1)准备工作

在布局文件中我们发现了很多自定义View,找到GPA曲线的自定义GpaLineChartView

//
<xyz.rickygao.gpa2.view.GpaLineChartView
    android:id="@+id/cv_gpa_line"
    android:layout_width="match_parent"
    android:layout_height="320dp"
    android:background="@color/gpa2_color_secondary"
    android:paddingBottom="160dp"
    android:paddingTop="40dp"
    app:fillColor="@color/gpa2_color_primary"
    app:lineColor="@color/gpa2_color_primary_dark"
    app:pointColor="@color/gpa2_color_primary_dark" />

//

 

在APP中对应红线部分

 

下面是该View的布局说明,除去四周的padding,实际的画布大小为图中红线部分

对应APP中位置,实际设置中Left和Right padding均为0dp

(2)绘制思路

  • 创建画笔
  • 确定上述基准线
  • 确定起点,t0,t1… … 终点坐标
  • 计算每两点之间三阶贝塞尔曲线路径

 

(3)代码实现

存放点信息的数据类和对应List

//
data class DataWithDetail(val data: Double, val detail: String)
var dataWithDetail: List<DataWithDetail> = emptyList()
//

 

计算画布大小,并按照点的个数+1将画布均分,计算出widthStep

//
val contentWidth = width - paddingLeft – paddingRight
val contentHeight = height - paddingTop – paddingBottom
val widthStep = contentWidth.toFloat() / (dataWithDetail.size + 1)
//

 

找出最大数据与最小数据,计算数据跨度,对应的max基准线为maxdata向上偏移1/4dataspan,对应的min基准线为mindata向下偏移1/4dataspan,这样可以保证最后的GPA曲线在出发和结束时一定是上升状态。

要注意的是,max和minDataExtended并不是实际的线,而是一个基准数值,或者说是一个相对值,当data==minDataExtended时点会位于画布的底端,当data==maxDataExtended时,点会位于画布的顶端,我们通过data和dataSpanExtended计算出一个百分比,来确定他在画布内的位置,由于我们向上和向下都延伸了dataspan的1/4,所以我们的点在竖直方向都在画布的1/65/6范围内

所以对于data既可以是绩点,也可以是加权,因为我们最后只是计算一个百分比

//
val minData = dataWithDetail.minBy(DataWithDetail::data)?.data ?: 0.0
val maxData = dataWithDetail.maxBy(DataWithDetail::data)?.data ?: 1.0
val dataSpan = if (maxData != minData) maxData - minData else 1.0
val minDataExtended = minData - dataSpan / 4F
val maxDataExtended = maxData + dataSpan / 4F
val dataSpanExtended = maxDataExtended - minDataExtended
//

 

计算数据点X坐标,间隔为widthStep

//
(0 until dataWithDetail.size).mapTo(pointsX.apply { clear() }) {
    paddingLeft + widthStep * (it + 1)
}
//

 

计算Y坐标,通过占比计算

//
dataWithDetail.mapTo(pointsY.apply { clear() }) {
paddingTop + ((1 - ((it.data - minDataExtended) / dataSpanExtended)) * contentHeight).toFloat()
}
//

 

由于我只有一学期的成绩,所以计算后结果为X = contentWidth / 2 ;Y = contentHeight / 2  计算起点Y坐标,画笔移动到起点

//
var py = (paddingTop + contentHeight).toFloat()
moveTo(0F, py)
//

 

对于每一条贝塞尔曲线我们要设置两个控制点,横坐标X为两点水平中央(我们只需要向左平移widthStep/2),第一个控制点Y坐标与出发点相同,第二个控制点Y坐标与终点相同

 

 

把最后一个数据点与终点连起来,控制点相对位置不变

//
val cx = width - widthStep / 2F
cubicTo(cx, py, cx, paddingTop.toFloat(), width.toFloat(), paddingTop.toFloat())
//

 

在onDraw中调用drawPath

//
drawPath(linePath, linePaint)
//

哎呀woc太tm完美了,完全契合

 

曲线下面的填充path,画了上右下三条线,close闭合,fill填色

//
fillPath.apply {
reset()
    addPath(linePath)
    lineTo(width.toFloat(), height.toFloat())
    lineTo(0F, height.toFloat())
    close()
}
//

 

 

画点,集合操作filter过滤出未选中的点,因为有阴影为了效果,微调圆心,选中的点同理,只是有白色描边

//
pointPath.apply {
reset()
    if (dataWithDetail.isEmpty())
        return@apply // no need to draw
    (0 until dataWithDetail.size)
            .filter { it != selectedIndex }
            .forEach {
                addCircle(
                        pointsX[it] - LINE_STROKE / 4F,
                        pointsY[it] - LINE_STROKE / 4F,
                        POINT_RADIUS,
                        Path.Direction.CCW
                )
            }
 }
//

 

(4)细节

Kotlin优秀的语法,极简迭代+集合操作+优秀的lamada,能写1行就不写5行

//
(0 until dataWithDetail.size).mapTo(pointsX.apply { clear() }) 
//

 

比Builder模式用着更爽

//
fillPath.apply {
reset()
    addPath(linePath)
    lineTo(width.toFloat(), height.toFloat())
    lineTo(0F, height.toFloat())
    close()
}
//

 

虽然说不出来哪里好,但就是感觉挺奇妙

//
var lineColor
    get() = linePaint.color
    set(value) {
        linePaint.color = value
    }
//

 

微北洋-代码读后感(1)》有113个想法

  1. LesCack说:

    Cephalexin To Treat Hidradenitis Suppurativa Buy Propecia In Canada Priligy Product Information [url=http://cialibuy.com]Buy Cialis[/url] Buying Levitra In Mexico Generic Cash On Delivery Pyridium Real Pharmacy Best buy isotretinoin skin health no doctor London

  2. MatBuct说:

    Cialis Crea Dependencia Amoxicillin Yogurt Effect Buy Generic Plavix Online India [url=http://cialibuy.com]Buy Cialis[/url] Comprar Viagra Cialis Generico Blaue Levitra Tanning Amoxicillin

  3. excano说:

    Our games allow our online casino players to play at their own pace, without any pressure to make a fast decision or bet before the betting time is over.
    free online casino All of our recommended real money casinos offer the best casino games online, with hundreds of games provided by the best software developers in the industry.

  4. Kayaph说:

    When you assign your task to an experienced writer, then you are assured that it will be done excellently, and according to the current academic standards.
    write my paper for me They charge you per page, rather than per word, so you might have to end up paying way more than you should, just because their system does not allow you to set a specific word goal.

  5. chaita说:

    This will ensure that although the students do not get to improve themselves through learning while coming up with the essays, they learn from the information that they acquire. write my paper cheap It is worth noting that child labour leads to the denial of the chance of school attendance among children and harms them mentally, physically, morally, and socially.

  6. ensush说:

    To make this process easy, you need to validate any shortlisted website with various criteria such as using google search reviews, prices, and discount reviews. custom paper Our support team goes through your requirements and delegates the task to a suitable writer based on your subject, topic, educational level, and deadline.

  7. Duernjep说:

    We have been writing college papers for many years and have got a great number of returning customers who are satisfied with the quality of our custom college papers. paper help If you are among the many students in any of the categories mentioned above or are just having difficulties with your writing, you can buy essay from a reliable online writing service like samedayessay.

  8. adosern说:

    This will be ready for your stay, howveer if you do not wish to use this then please contact us and we will arrange for it to be folded and put in its storage area. wincustomerswebsites.com Indonesia, details of their exhibitions, of the museums which hold their works ands lists of related books and literature for further study.

  9. excano说:

    A repository provides an opportunity to increase the quality of teaching by repeated usage of good tasks, especially across different universities. authorecourses Erlebte andererseits, signe, hast pfotenspuren pendeln kostenlos markiert, an dreispitzigen richterhut.

  10. Spafdype说:

    An intensely emotional skyward journey, the three-piece have long mulled over their music, crafting indie slacker rock, ready to flirt with moments of soaring pop. tgu-tommyguns Tartaros quoque latet, nam licet pedibus regant habenas, nesciunt tamen torquere, attrahere, et extendere per trocleam staffarum.

  11. impaito说:

    Bei mir sieht es nicht besser aus, ich bin verzweifelt, immerzu traurig und absolut unzufrieden mit allem. gmp course online And for those of you who are older, you carry wisdom and maturity that is lacking in the younger generation and you still have much to contribute.

  12. smore traiolit说:

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You clearly know what youre talking about, why throw away your intelligence on just posting videos to your blog when you could be giving us something enlightening to read?

  13. best CBD Oil说:

    Hello! This is kind of off topic but I need some guidance from an established blog. Is it difficult to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about making my own but I’m not sure where to start. Do you have any points or suggestions? Thanks|

  14. pabooro说:

    Cialis Super Active is cheap and the best solution to erectile dysfunction. Get it now and immediately reap the rewards of a better sex life! Package buy cialis generic Precautions:it is meanwhile advised to avoid consuming this canadian viagra concentration under the cheap cialis overnight no prescription karel of wastewater.

  15. grolyrto lemcs说:

    I do accept as true with all of the ideas you have offered on your post. They are very convincing and will definitely work. Nonetheless, the posts are very brief for starters. May just you please extend them a little from subsequent time? Thank you for the post.

  16. YonJaild说:

    [url=https://furosemidelasix.com/]buy furosemide[/url] [url=https://hydroxychloroquine.us.org/]buy hydroxychloroquine over the counter[/url] [url=https://isotretinoinacutane.com/]buy accutane[/url] [url=https://amoxicillinz.com/]amoxicillin 500[/url] [url=https://avanatop.com/]super avana[/url] [url=https://amitriptyline365.com/]amitriptyline hydrochloride[/url] [url=https://doxycycline36.com/]buy doxycycline[/url] [url=https://xenical24.com/]xenical prescription australia[/url]

  17. TedJaild说:

    [url=https://doxycycline36.com/]buy doxycycline online[/url] [url=https://baclofen24.com/]cheap baclofen uk[/url] [url=https://valtrex.us.org/]where to buy valtrex[/url] [url=https://priligytab.com/]buy priligy[/url]

  18. ZakJaild说:

    [url=https://erythromycinz.com/]erythromycin gel brand name[/url] [url=https://sildenafil36.com/]sildenafil online[/url] [url=https://tadalafilsale.com/]tadalafil 20mg for sale[/url] [url=https://furosemidelasix.com/]furosemide price comparison[/url] [url=https://vermox.us.org/]vermox tablet[/url] [url=https://dapoxetinetabs.com/]dapoxetine buy[/url] [url=https://doxycycline36.com/]doxycycline tablet[/url] [url=https://singulair.us.org/]buy singulair[/url]

  19. BooJaild说:

    [url=http://wellbutrinbupropion.com/]price of wellbutrin 100 mg[/url] [url=http://xenical24.com/]buy xenical[/url] [url=http://amoxicillinz.com/]buy amoxicillin online[/url] [url=http://silagra24.com/]buy silagra[/url] [url=http://priligytab.com/]priligy tablets over the counter[/url] [url=http://clonidinenorx.com/]clonidine medication[/url] [url=http://vermox.us.org/]purchase vermox[/url]

  20. Animal Porn说:

    Good day! This is my first comment here so I just wanted to give a quick shoutout and tell you I really enjoy reading through your articles.Can you recommend any other blogs/websites/forums that cover the sametopics? Thank you!

  21. ZakJaild说:

    [url=https://dapoxetinetabs.com/]buy dapoxetine 60 mg in india[/url] [url=https://clonidinenorx.com/]buy clonidine[/url] [url=https://buspar.us.com/]buy buspar[/url] [url=https://finpecia911.com/]finpecia 1mg price in india[/url] [url=https://ventolinh.com/]ventolin hfa inhaler[/url] [url=https://cymbaltaduloxetine.com/]cost cymbalta[/url] [url=https://isotretinoinacutane.com/]buy isotretinoin[/url] [url=https://hydroxychloroquine.us.org/]plaquenil 200mg[/url]

  22. TedJaild说:

    [url=https://furosemidelasix.com/]furosemide tablet price[/url] [url=https://priligytab.com/]can i buy priligy in usa[/url] [url=https://wellbutrinbupropion.com/]wellbutrin hcl[/url] [url=https://xenical24.com/]xenical canada price[/url] [url=https://finpecia911.com/]finpecia online[/url] [url=https://kamagratb.com/]kamagra jelly[/url] [url=https://atorvastatin.us.com/]lipitor atorvastatin[/url] [url=https://erythromycinz.com/]erythromycin 400mg[/url]

  23. YonJaild说:

    [url=https://dapoxetinetabs.com/]dapoxetine buy[/url] [url=https://amoxicillinz.com/]buy amoxicillin[/url] [url=https://amitriptyline365.com/]amitriptyline buy[/url] [url=https://avanatop.com/]generic avana[/url] [url=https://tadalafilsale.com/]buy tadalafil[/url]

  24. BooJaild说:

    [url=http://silagra24.com/]buy silagra online[/url] [url=http://clonidinenorx.com/]clonidine 0.4 mg[/url] [url=http://amoxicillinz.com/]antibiotics amoxicillin[/url] [url=http://dapoxetinetabs.com/]dapoxetine 60 mg online purchase in india[/url]

  25. ZakJaild说:

    [url=https://xenical24.com/]xenical 120 mg[/url] [url=https://baclofen24.com/]baclofen 10mg[/url] [url=https://ciprofloxacin24.com/]buy ciprofloxacin online[/url] [url=https://clonidinenorx.com/]clonidine 0.1[/url] [url=https://priligytab.com/]priligy buy online[/url]

  26. YonJaild说:

    [url=https://avanatop.com/]buy avana 200 mg[/url] [url=https://hydroxychloroquine.us.org/]hydroxychloroquine online[/url] [url=https://sildenafil36.com/]sildenafil 100mg[/url]

  27. UgoJaild说:

    [url=http://levitra36.com/]levitra cost south africa[/url] [url=http://dapoxetinetabs.com/]buy dapoxetine[/url] [url=http://buspar.us.com/]buy buspar[/url] [url=http://priligytab.com/]priligy usa[/url] [url=http://silagra24.com/]silagra soft[/url] [url=http://isotretinoinacutane.com/]accutane order online[/url]

  28. UgoJaild说:

    [url=http://kamagratb.com/]buy kamagra[/url] [url=http://priligytab.com/]priligy pills over the counter[/url] [url=http://finpecia911.com/]buy finpecia[/url] [url=http://furosemidelasix.com/]furosemide 20mg[/url] [url=http://singulair.us.org/]buy singulair[/url] [url=http://sildenafil36.com/]sildenafil 100 mg[/url] [url=http://hydroxychloroquine.us.org/]hydroxychloroquine sulfate[/url]

  29. AshJaild说:

    [url=http://baclofen24.com/]baclofen tablets[/url] [url=http://doxycycline36.com/]buy doxycycline online[/url] [url=http://valtrex.us.org/]where to buy valtrex[/url] [url=http://finpecia911.com/]buy finpecia online[/url] [url=http://amitriptyline365.com/]buy amitriptyline[/url] [url=http://wellbutrinbupropion.com/]wellbutrin sr[/url] [url=http://ventolinh.com/]ventolin inhaler[/url] [url=http://silagra24.com/]silagra 100 price in india[/url]

发表评论

邮箱地址不会被公开。 必填项已用*标注