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

張風捷特烈發表於2018-09-02
原文網址 : https://juejin.im/post/5b8b4f09e51d4538ce43804c
AndroidCanvas

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

安卓圖形繪製一直以來感覺都很繁瑣
在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

相關文章