開源計劃之--Android繪相簿--LogicCanvas

摘要： 零、前言： 安卓圖形繪製一直以來感覺都很繁瑣 在html5時，我用JavaScript封裝了一個HTML5的canvas庫。 HTML5感覺和Android的canvas挺相似，所以考慮移植過來。 繪相簿核心是用配置資訊繪圖，通過邏輯運算繪圖 本篇會持續更新，記錄Logi...

零、前言：

安卓圖形繪製一直以來感覺都很繁瑣

在html5時，我用JavaScript封裝了一個HTML5的canvas庫。

HTML5感覺和Android的canvas挺相似，所以考慮移植過來。

繪相簿核心是用配置資訊繪圖，通過邏輯運算繪圖

本篇會持續更新，記錄LogicCanvas的成長曆程， ofollow,noindex">LogicCanvas-專案地址：github

2018年9月4號更新：由V0.01升級到V0.02

對專案進行大規模重構，分解ShapePath類,優化呼叫形式，更好解耦

由於邊線而導致的精準度問題已修正

加入剛剛屬性：路徑的方向，代號：dir

2018年9月5號更新：

這次更新也挺厲害的，將Pos點類使用原型模式，避免很多地方都要new

Pos點類思想層面由點，升級到向量，實現了向量的基本用法

加入繪製文字功能(以前竟然沒發現)：目前只是放字和位置，以後會完善更多文字方面的功能

對座標系統進行一定的優化

Pos的向量形式使用有點龐大，新寫一篇文章講述，詳見： Android繪圖之和我一起畫箭頭

2018年9月6號更新：由V0.01升級到V0.03

Painter採用單例模式

優化原型模式，各Shape採用深拷貝來解決構造較長、繁瑣的情況

比較new 物件和拷貝的效率問題，拷貝一點。具體見文： 來談談Java的深淺拷貝吧

完善向量部分，進行測試

2018年9月7號更新：由V0.03升級到V0.04

優化程式碼

2018年9月8號更新：由V0.04升級到V0.05

支援點的繪製，及使用點對極座標方程進行模擬，詳見： Android模擬繪製極座標方程

優化BaseView

2018年9月13號更新：由V0.05升級到V0.06

優化BaseView

引入

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

implementation 'com.github.toly1994328:logic-canvas-android:0.06'

點類Pos的使用：

//開始時初始化一個點物件
protected Pos pos = new Pos(0, 0);

//需要另一個點的話：就行了，使用原型，避免new物件

pos.clone(x, y)

一、以一個五角星來引入

在自定義View的onDraw方法中：繪製外接圓半徑100,內接圓半徑50的5角星

Painter painter = PainterEnum.INSTANCE.getInstance(canvas);
painter.draw(
new ShapeStar()
.num(5)//角的個數,數字任意
.R(100f)//外接圓半徑
.r(50f)////內接圓半徑

二、公有屬性演示：注：公共屬性對應的函式在後呼叫

所謂公有屬性是指所有繪製圖形適用的屬性：包括

線條粗細(b)、線條顏色(ss)、填充顏色(ss)、

位移(p)、座標系(coo)、旋轉(rot)、縮放(sx,sy)螢幕適配dp單位(dp)

屬性	預設值	簡介	備註
p	Pos(0,0)	圖形距畫布左頂點偏移量
rot	0	旋轉角度	弧度制-
sx	0	x縮放	-
sy	0	y縮放	-
coo	Pos(0,0)	修改座標系	平移、縮放、旋轉使用
a	Pos(0,0)	修改錨點	-
b	1	線條粗	-
ss	"#000000"	線條樣式	-
fs	"#0000ff"	填充樣式	-
dir	逆時針方向	方向	-

1.位移：

p 引數型別：Pos

注：為了和數學更好契合，採用笛卡爾座標系(上右正)，預設螢幕左上角(0,0)點

為了明顯，使用工具欄繪製網格參考

painter.draw(new ShapeStar()
.num(5)
.R(100f)
.r(50f)
.p(pos.clone(200, -100)));//位移X,Y

2.座標系：為了支援座標系，可是煞費苦心啊！

coo 引數型別：Pos

為了明顯，使用工具欄繪製座標系參考

注意：使用座標系後、平移、旋轉、縮放都會根據新的座標系來

painter.draw(new ShapeStar()
.num(5)
.R(100f)
.r(50f)
.coo(pos.clone(600, 200))//設定座標系
);

3.描邊顏色、粗細

ss 描邊顏色 引數型別：int (顏色)

b 描邊粗細 引數型別：int

painter.draw(new ShapeStar()
.num(5)
.R(100f)
.r(50f)
.p(pos.clone(200, -100))
.ss(Color.RED)//描邊顏色
.b(5f)//描邊線條粗細
);

4.旋轉：思考良久，單位還是採用：角度數吧

rot 旋轉 引數型別：Float

painter.draw(new ShapeStar()
.num(5)
.R(100f)
.r(50f)
.ss(Color.RED)
.coo(pos.clone(600, 200))
.rot(90f)//設定旋轉
);

5.縮放：

sx、sy 縮放比例 引數型別：Float

painter.draw(new ShapeStar()
.num(5)
.R(100f)
.r(50f)
.ss(Color.RED)
.coo(pos.clone(600, 200))
.sx(1.5f)
.sy(1.5f)
);

6.錨點：

coo 引數型別：Pos

painter.draw(new ShapeStar()
.num(5)
.R(100f)
.r(50f)
.ss(Color.RED)
.coo(pos.clone(600, 200))
.a(pos.clone(100, 100))
.sx(1.5f)
.sy(1.5f)
);

7.填充

fs 描邊顏色 引數型別：int (顏色)

painter.draw(new ShapeStar()
.num(5)
.R(100f)
.r(50f)
.coo(pos.clone(600, 200))
.fs(Color.YELLOW)
);

公共屬性展示到這裡

二、直線繪製：

特有屬性：ps 引數型別 不定個數的Pos。

再次強調：預設使用的是0,0為原點的笛卡爾座標系

1.單線條

painter.draw(
new ShapeLine()
.ps(pos.clone(0, 0), pos.clone(200, -200))
.b(5f)
);

2.多線條

painter.draw(
new ShapeLine()
.ps(
pos.clone(0, 0),
pos.clone(200, -200),
pos.clone(200,-400),
pos.clone(200,-400),
pos.clone(800,-400),
pos.clone(0,0)
).b(5f)
);

三、繪製矩形：

引數 ： x 矩形寬

y:矩形高

r:矩形圓角

painter.draw(
new ShapeRect()
.x(1000/2f).y(618/2f).r(50f)
.b(5f).ss(Color.RED).p(pos.clone(100,-100))
);

四、畫圓：

dir true 逆時針方向繪製--預設

r 半徑

painter.draw(
new ShapeArc(1)
.r(100f)
.b(5f).ss(Color.RED)
.p(pos.clone(200,-200))

五、繪製弧線

painter.draw(
new ShapeArc()
.r(100f).ang(135f)
.b(1f).ss(Color.RED)
.p(pos.clone(200,-100))
);

六、繪製文字：

al 對齊方式：String 型別，效果下如圖

str 文字

size 大小

painter.drawText(
new ShapeText()
.str("Toly")//文字
.size(80)//大小
.al("<")//對齊方式
.p(400f,400f));

七、LogicCanvas與Android原生Path結核使用

Path path = new Path();// 建立Path
path.lineTo(200, -200);// lineTo
path.lineTo(200,0);
path.close();
Shape shapeEmpty = new ShapeEmpty(path)
.b(6f).coo(400f, 400f);
painter.draw(shapeEmpty);

八、正多邊形和正多角形

for (int i = 5; i < 10; i++) {
painter.draw(
new ShapeStar(ShapeStar.MODE_POLYGON)
.num(i).R(80f)
.b(4f)
.p(pos.clone(20+210*(i-5),-20)));//內接圓半徑
painter.draw(
new ShapeStar(ShapeStar.MODE_REGULAR)
.num(i).R(80f)
.b(4f)
.p(pos.clone(20+210*(i-5),-220)));//內接圓半徑
}

後記、

1.宣告：

[1]本文由張風捷特烈原創,轉載請註明

[2]歡迎廣大程式設計愛好者共同交流

[3]個人能力有限，如有不正之處歡迎大家批評指證，必定虛心改正

[4]你的喜歡與支援將是我最大的動力

2.連線傳送門：

3.聯絡我

QQ:1981462002

郵箱： [email protected]

微信：zdl1994328

4.歡迎關注我的微信公眾號，最新精彩文章，及時送達：