2020征文-TV10分鐘鴻蒙應用實戰開發：鴻蒙手繪板（含源代碼）

作者：佚名 2020-12-17 12:06:49

開發

文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com/#zz

[[358401]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

前言：

今天是鴻蒙的手機beta發布活動，很榮幸受邀來到現場，一會兒可以給大家上個靚照～。

本篇旨在通過實踐一些樣例，讓開發者們快速提高腎上腺素，歡樂的加入鴻蒙應用開發之旅。整篇就是一個完整的實操樣例，我也盡量在一片中把內容都講清楚。

基礎的一些知識點，可以訪問我另一個系列：《鴻蒙OS應用開發實踐》

正文

(一)創建項目

1.創建一個新的TV項目:

2.創建一個新的Java類：

命名為Draw:

這個作為我們的繪畫的核心組件，所以我們讓他繼承Component，方便后面的調用。需要注意的是，這里導入包名的時候，我們選擇第一個：ohos.agp.components包。

完成后，依然會報錯，提示我們需要創建構造函數：

同樣默認會有很多構造方法，我們選擇第一個(單個參數)即可。

(二)實現繪畫工具

這樣一個基礎的組件類就創建好了，接著我們構思下一畫板工具里需要哪些元素：

畫筆：用于畫出各種點和線。

畫板：用于展現我們到底花了什么，它是內容的載體。

所以，根據以上這些元素，在接下來我們需要在代碼里定義和創建一些內容：

Path mPath = new Path(); 
 
Paint mPaint; 
 
Point mPrePoint = new Point(); 
 
Point mPreCtrlPoint = new Point();

Canvas : 畫布的意思，屬于渲染組件，一般用于渲染各種界面元素，這里需要 import ohos.agp.render.Canvas;包
Path ：路徑的意思，也屬于渲染組件，用于描述繪制的路徑。需要import ohos.agp.render.Path;
Paint : 表示繪制，屬于渲染組件，用于一些繪制操作，需要import ohos.agp.render.Paint;
Point : 表示一個點，通常由二維坐標(x,y)組成，需要import ohos.agp.utils.Point;

所以上面的代碼，我們先定義了一些等待使用的工具變量。

現在我們缺少了一個東西，那就是如何交互?一般的，繪圖這樣的，我們要么鼠標，要么觸屏，要么就是電子繪筆等。這里我們使用鴻蒙觸摸組件來實現。

在代碼中去實現Component.TouchEventListener方法：

實現onTouchEvent()方法：

onTouchEvent包含兩個參數:Component表示當前接收的組件，TouchEvent表示當前的觸摸事件。

通過getAction實例方法可以獲取TouchEvent的狀態：

TouchEvent.PRIMARY_POINT_DOWN ：按下狀態
TouchEvent.PRIMARY_POINT_UP ：點按狀態抬起
TouchEvent.POINT_MOVE：點按拖動

我們需要在按下的時候開始記錄點的位置，拖動的時候記錄下整個軌跡，而抬起的時候則不做任何事情。

所以，在onTouchEvent事件函數中，我們的代碼這樣寫：

switch (touchEvent.getAction()) { 
 
case TouchEvent.PRIMARY_POINT_DOWN: { 
 
MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex()); 
 
mPath.moveTo(point.getX(), point.getY()); 
 
mPrePoint.position[0] = point.getX(); 
 
mPrePoint.position[1] = point.getY(); 
 
mPreCtrlPoint.position[0] = point.getX(); 
 
mPreCtrlPoint.position[1] = point.getY(); 
 
return true; 
 
} 
 
case TouchEvent.PRIMARY_POINT_UP: 
 
break; 
 
case TouchEvent.POINT_MOVE: { 
 
break; 
 
}

MmiPoint ：表示是人機交互接口的一個Point，這里用來接收點擊事件的點，需要import ohos.multimodalinput.event.MmiPoint;

然后在點擊下去的這一下，指定路徑mPath的moveTo目標為當前事件點擊獲得的點。

同時也設置了兩個預制緩存點的坐標為當前點擊的點。

抬起的操作，我們這里暫時不做處理。

直接來處理下移動分支下的操作：

case TouchEvent.POINT_MOVE: { 
 
MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex()); 
 
Point currCtrlPoint = new Point((point.getX() + mPrePoint.position[0]) / 2, 
 
(point.getY() + mPrePoint.position[1]) / 2); 
 
mPath.cubicTo(mPrePoint, mPreCtrlPoint, currCtrlPoint); 
 
mPreCtrlPoint.position[0] = currCtrlPoint.position[0]; 
 
mPreCtrlPoint.position[1] = currCtrlPoint.position[1]; 
 
mPrePoint.position[0] = point.getX(); 
 
mPrePoint.position[1] = point.getY(); 
 
invalidate(); 
 
break;

> 解析：

同樣用MmiPoint來接收點擊輸入，然后先說下mPath.cubicTo：使用path的cubicTo方法來實現三次貝塞爾曲線，就是說兩個點之間的線有兩個控制點。這樣可以讓曲線更加的平滑,它需要輸入三個點的參數，所以，我們之前定義了兩個Point變量，這里就需要用上了，整體上的原理就是，先把點擊獲得第一個點傳入到曲線函數中，然后計算當前點擊的位置加上第一個點的二分之一偏移量來細化得到一個更小的值來作為第三個參數，而第二個參數，我們讓緩存的另一個點直接接收當前點擊的點的值，然后傳入到第二個參數中，最后又更新當前位置給第一個點，這樣第一個點傳入(舊的點)，加上拖動后的當前點(新點)，在當前點的二分偏移量的點，構成了三點傳給了曲線函數，最后重新更新舊的點，讓舊點變成一個新的位置，再次拖動的時候，就全部有了新的值，形成一個閉環。

invalidate()函數表示申請重新繪制(刷新UI)。

至此，我們就完成了點繪制(畫筆)的計算方法。

下一步，我們要實現讓畫筆的這些點和線呈現到畫板(Canvas)上：

追加實現Component.DrawTask的方法：

然后根據提示實現onDraw方法

在onDraw方法中添加如下實現：

canvas.drawPath(mPath, mPaint);

使用canvas的實例方法drawPath來將畫筆和路徑傳入實現繪制。

到這里還沒完，我們還需要做一些初始化的工作，我們寫一個Init函數：

private void Init() 
 
{ 
 
mPaint = new Paint(); 
 
mPaint.setColor(Color.WHITE); 
 
mPaint.setStrokeWidth(5f); 
 
mPaint.setStyle(Paint.Style.STROKE_STYLE); 
 
addDrawTask(this::onDraw); 
 
setTouchEventListener(this::onTouchEvent); 
 
}

這里將畫筆實例化，并設置顏色、粗細及樣式。然后添加繪制任務addDrawTask、設置點擊事件的監聽setTouchEventListener，這倆函數分別是畫布和事件監聽內置的函數，并非自定義的。

最后，我們需要在Draw的構造函數中調用這個 Init()方法，這樣就可以在使用new創建這個Draw組件實例時自動初始化。

(三)調用工具

最后時調用我們寫的這個繪畫工具。

回到slice目錄，并打開MainAbilitySlice文件

定義各一個方向布局：

private DirectionalLayout directionalLayout = new DirectionalLayout(this);

在onStart方法中，創建一個布局配置，并將配置指定給方向布局：

LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT); 
 
directionalLayout.setLayoutConfig(config);

接著創建剛才寫好的Draw組件，需要添加import com.qibiao.drawdemo.Draw;

Draw draw = new Draw(this);

設置布局配置

draw.setLayoutConfig(config);

創建背景元素(這里設置為黑色，黑板嚒～)

ShapeElement element = new ShapeElement(); 
 
element.setRgbColor(new RgbColor(0, 0, 0));

設置背景元素

draw.setBackground(element);

將組件添加到布局中

directionalLayout.addComponent(draw);

設置UI內容：

super.setUIContent(directionalLayout);

完整代碼如下：

(四)運行效果

運行一個TV的遠程模擬器，然后run：

手寫一個：你好，鴻蒙

看起來還不錯(別在意細節～)。

不過，還不夠完美，我們再給他弄個擦除的功能。

回到Draw

添加一個重置的方法：

然后再到MainAbilitySlice中添加一個按鈕，并調用clear方法：

再次運行已經支持擦除。

(五)完整代碼

ok，本篇已經務必盡量精簡了，最后放上代碼鏈接(已開源)：

https://gitee.com/doufx/draw-component

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

責任編輯：jianghua 來源：鴻蒙社區

鴻蒙應用鴻蒙開發

2020征文-TV10分鐘鴻蒙應用實戰開發：鴻蒙手繪板 （含源代碼）

2020征文-TV10分鐘鴻蒙應用實戰開發：鴻蒙手繪板（含源代碼）