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

張風捷特烈發表於2018-09-02

零、前言:(注:本庫僅供學習玩耍使用,效能方面恐有不足)

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

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

2018年9月17號更新:由V0.06升級到V0.08

優化BaseView

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

implementation 'com.github.toly1994328:logic-canvas-android:0.08'
複製程式碼
點類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)////內接圓半徑
複製程式碼

五角星演示.png


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

所謂公有屬性是指所有繪製圖形適用的屬性:包括 線條粗細(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
複製程式碼

位移p.png


2.座標系:為了支援座標系,可是煞費苦心啊!

coo 引數型別:Pos 為了明顯,使用工具欄繪製座標系參考 注意:使用座標系後、平移、旋轉、縮放都會根據新的座標系來

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

座標系coo.png


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)//描邊線條粗細
);
複製程式碼

描邊,顏色.png


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

rot 旋轉 引數型別:Float

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

旋轉.png

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)
);
複製程式碼

縮放.png


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)
);
複製程式碼

修改參照點放大.png


7.填充

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

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

填充.png


公共屬性展示到這裡


二、直線繪製:

特有屬性:ps 引數型別 不定個數的Pos。 再次強調:預設使用的是0,0為原點的笛卡爾座標系

1.單線條
painter.draw(
        new ShapeLine()
                .ps(pos.clone(0, 0), pos.clone(200, -200))
                .b(5f)
);
複製程式碼

繪製單直線.png


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)
);
複製程式碼

繪製多線條.png


三、繪製矩形:

引數 : 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))
);
複製程式碼

繪製矩形.png


四、畫圓:

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

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

畫圓.png


五、繪製弧線

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

繪製弧線.png


六、繪製文字:

al 對齊方式:String 型別,效果下如圖 str 文字 size 大小

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

文字al屬性.png


七、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);
複製程式碼

與安卓Path結合.png


八、正多邊形和正多角形

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)));//內接圓半徑
}
複製程式碼

繪製正多邊形和正多角星.png

多角星分析圖

展示到這裡,持續更新,更多功能敬請期待 更新時間:2018-09-12:13:25 LogicCanvas-專案地址:github


後記、

1.宣告:

[1]本文由張風捷特烈原創,轉載請註明
[2]歡迎廣大程式設計愛好者共同交流
[3]個人能力有限,如有不正之處歡迎大家批評指證,必定虛心改正
[4]你的喜歡與支援將是我最大的動力

2.聯絡我

QQ:1981462002
郵箱:1981462002@qq.com
微信:zdl1994328

相關文章