版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
【移動應(yīng)用開發(fā)技術(shù)】如何使用kotlin實現(xiàn)一個餅圖
先看看做的是什么/upload/information/20200623/125/125049.jpg知識點/upload/information/20200623/125/125050.jpg繪制餅圖
public
void
drawArc(float
left,
float
top,
float
right,
float
bottom,
float
startAngle,
float
sweepAngle,
boolean
useCenter,
@NonNull
Paint
paint)
{
super.drawArc(left,
top,
right,
bottom,
startAngle,
sweepAngle,
useCenter,
paint);
}
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override
fun
onDraw(canvas:
Canvas)
{
super.onDraw(canvas)
canvas.drawArc(0f,
0f,
width,
height,
0f,
360f,
true,
paintRed)
}/upload/information/20200623/125/125051.jpg
/**
*
view的寬度
*/
var
width:
Float
=
0f
/**
*
view的高度
*/
var
height:
Float
=
0f
/**
*
drawArc距離左邊的距離
*/
var
left:
Float
=
0f
/**
*
drawArc距離上邊的距離
*/
var
top:
Float
=
0f
/**
*
drawArc距離右邊的距離
*/
var
right:
Float
=
0f
/**
*
drawArc距離下邊的距離
*/
var
bottom:
Float
=
0f
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override
fun
onDraw(canvas:
Canvas)
{
super.onDraw(canvas)
canvas.drawArc(left,
top,
right,
bottom,
0f,
360f,
true,
paint)
}
override
fun
onSizeChanged(w:
Int,
h:
Int,
oldw:
Int,
oldh:
Int)
{
super.onSizeChanged(w,
h,
oldw,
oldh)
setBackgroundColor(resources.getColor(R.color.black))
width
=
w.toFloat()
height
=
h.toFloat()
left
=
width
/
4f
top
=
width
/
4f
right
=
width
-
left
bottom
=
width
-
top
}/upload/information/20200623/125/125052.jpg
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override
fun
onDraw(canvas:
Canvas)
{
super.onDraw(canvas)
...
canvas.drawArc(left,
top,
right,
bottom,
0f,
20f,
true,
paintPuple)
canvas.drawArc(left,
top,
right,
bottom,
20f,
10f,
true,
paintGray)
canvas.drawArc(left,
top,
right,
bottom,
30f,
40f,
true,
paintGreen)
canvas.drawArc(left,
top,
right,
bottom,
70f,
110f,
true,
paintBlue)
canvas.drawArc(left,
top,
right,
bottom,
180f,
110f,
true,
paintRed)
canvas.drawArc(left,
top,
right,
bottom,
290f,
70f,
true,
paintYellow)
}
/**
*
個人分類集合
*/
var
pieList
=
arrayListOf(10f,3f,7f)
/**
*
餅圖所占的比例
*/
var
scaleList
=
arrayListOf<Float>()
/**
*
個數(shù)分類的總量
*/
var
total:
Float
=
0f
override
fun
onSizeChanged(w:
Int,
h:
Int,
oldw:
Int,
oldh:
Int)
{
super.onSizeChanged(w,
h,
oldw,
oldh)
//計算個數(shù)的總和
total
=
pieList.sum()
//存儲比例值
for
(a
in
pieList)
{
scaleList.add(a.div(total))
}
}
/**
*
記錄當前畫餅圖的度數(shù)
*/
var
currentDegree:
Float
=
0f
/**
*
累加餅圖的度數(shù)作為下一個繪制的起始度數(shù)
*/
var
srctorDegree:
Float
=
0f
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override
fun
onDraw(canvas:
Canvas)
{
super.onDraw(canvas)
for
(scale
in
scaleList)
{
val
paint
=
Paint()
paint.strokeWidth
=
dip(10.0f).toFloat()
paint.isAntiAlias
=
true
//定義一個隨機生成的顏色數(shù)，來區(qū)分不同的扇形區(qū)域
val
hex
=
"#"
+
Integer.toHexString((-16777216
*
Math.random()).toInt())
paint.color
=
Color.parseColor(hex)
//角度數(shù)
srctorDegree
=
scale
*
360
canvas.drawArc(left,
top,
right,
bottom,
currentDegree,
srctorDegree,
true,
paint)
//累加角度
currentDegree
+=
srctorDegree
}
}/upload/information/20200623/125/125053.jpg繪制折線
...
canvas.drawArc(left,
top,
right,
bottom,
currentDegree,
srctorDegree,
true,
paint)
val
path
=
Path()
path.arcTo(left,
top,
right,
bottom,
currentDegree
+
srctorDegree
/
2,
0f,
false)
...
val
bounds
=
RectF()
//將path當前的坐標賦值給bounds
puteBounds(bounds,
true)
/**
*
橫線的長度
*/
var
lineae:
Int
=
30
/**
*
斜線的長度
*/
var
slantLine:
Int
=
30
override
fun
onSizeChanged(w:
Int,
h:
Int,
oldw:
Int,
oldh:
Int)
{
super.onSizeChanged(w,
h,
oldw,
oldh)
//計算橫線的比例
lineae
=
(width
/
30f).toInt()
//計算斜線的比例
slantLine
=
(width
/
40f).toInt()
}
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override
fun
onDraw(canvas:
Canvas)
{
super.onDraw(canvas)
for
(scale
in
scaleList)
{
...
val
path
=
Path()
path.arcTo(left,
top,
right,
bottom,
currentDegree
+
srctorDegree
/
2,
0f,
false)
val
bounds
=
RectF()
puteBounds(bounds,
true)
//第一象限
if
(bounds.left
>=
width
/
2
&&
bounds.top
<=
width
/
2)
{
path.lineTo(bounds.left
+
lineae,
bounds.top)
path.lineTo(bounds.left
+
lineae
+
slantLine,
bounds.top
-
slantLine)
canvas.drawPath(path,
paintLine)
//第二象限
}
else
if
(bounds.left
<=
width
/
2
&&
bounds.top
<=
width
/
2)
{
path.lineTo(bounds.left
-
lineae,
bounds.top)
path.lineTo(bounds.left
-
lineae
-
slantLine,
bounds.top
-
slantLine)
canvas.drawPath(path,
paintLine)
//第三象限
}
else
if
(bounds.left
<=
width
/
2
&&
bounds.top
>=
width
/
2)
{
path.lineTo(bounds.left
-
lineae,
bounds.top)
path.lineTo(bounds.left
-
lineae
-
slantLine,
bounds.top
+
slantLine)
canvas.drawPath(path,
paintLine)
//第四象限
}
else
{
path.lineTo(bounds.left
+
lineae,
bounds.top)
path.lineTo(bounds.left
+
lineae
+
slantLine,
bounds.top
+
slantLine)
canvas.drawPath(path,
paintLine)
}
}
...
}/upload/information/20200623/125/125054.jpg繪制文字接下來就是繪制文字了，第一、四象限還好，文字可以在折線后面跟著畫，但是二、三象限的文字就不允許了，我們必須往前移動文字寬度的距離才能完美銜接到折線上，所以，我們來定義一個計算文字的方法
/**
*
獲取文字的寬度
*/
private
fun
getStringWidth(str:
String):
Float
=
paintLine.measureText(str)
paintLine.textSize
=
dip(width
/
100).toFloat()
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override
fun
onDraw(canvas:
Canvas)
{
super.onDraw(canvas)
...
//獲取當前的百分比文字
val
textStr
=
String.format("%.2f%%",
scale
*
100)
//獲取文字的寬度
val
textWidth
=
getStringWidth(textStr)
//第一象限
if
(bounds.left
>=
width
/
2
&&
bounds.top
<=
width
/
2)
{
...
canvas.drawText(textStr,
bounds.left
+
lineae
+
slantLine,
bounds.top
-
slantLine,
paintText)
...
//第二象限
}
else
if
(bounds.left
<=
width
/
2
&&
bounds.top
<=
width
/
2)
{
...
canvas.drawText(textStr,
bounds.left
-
lineae
-
slantLine
-
textWidth,
bounds.top
-
slantLine,
paintText)
...
//第三象限
}
else
if
(bounds.left
<=
width
/
2
&&
bounds.top
>=
width
/
2)
{
...
canvas.drawText(textStr,
bounds.left
-
lineae
-
slantLine
-
textWidth,
bounds.top
+
lineae,
paintText)
...
//第四象限
}
else
{
...
canvas.drawText(textStr,
bounds.left
+
lineae
+
slantLine,
bounds.top
+
slantLine,
paintText)
...
}
}/upload/information/20200623/125/125055.jpg
//定義中間黑圓的畫筆
paintCicle.color
=
resources.getColor(R.color.black)
paintCicle.isAntiAlias
=
true
paintCicle.style
=
Paint.Style.FILL
@RequiresApi(Build.
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 創(chuàng)意廣告長期合同范本
- 二手房自行購買合同范本
- 買賣企業(yè)房產(chǎn)合同范例
- 農(nóng)民種地出租合同范本
- 包裝木箱供貨合同范本
- 北京政府采購合同范本
- 出售轉(zhuǎn)讓凍干機合同范本
- 分攤費用合同范本
- 企業(yè)生產(chǎn)訂單合同范本
- 分期購車購車合同范本
- (完整版)污水管道施工方案
- 國際法與國際爭端解決 課件全套 人大 第1-18章 導論、國際法淵源-國際人權(quán)法
- 發(fā)展?jié)h語初級口語I-第18課課件
- GB/T 43200-2023機器人一體化關(guān)節(jié)性能及試驗方法
- XX森林康養(yǎng)度假建設(shè)項目可行性研究報告
- 新教科版四年級上冊科學全冊重點題型練習課件（含答案）
- 防災(zāi)減災(zāi)地質(zhì)災(zāi)害防御應(yīng)對講座培訓課件ppt
- 小學奧數(shù)七大模塊思維導圖課件
- 2023年天津高考英語聽力試題及原文
- 火力發(fā)電廠OVATION 與西門子控制系統(tǒng)之間通訊實現(xiàn)
- 2022公務(wù)員錄用體檢操作手冊（試行）
評論
0/150
提交評論