目錄：java
前言緩存
（一）建立項目函數
（三）調用工具post
（四）運行效果spa
（五）完整代碼3d
前言：code
今天是鴻蒙的手機beta發佈活動，很榮幸受邀來到現場，一下子能夠給你們上個靚照～。component
本篇旨在經過實踐一些樣例，讓開發者們快速提升腎上腺素，歡樂的加入鴻蒙應用開發之旅。整篇就是一個完整的實操樣例，我也儘可能在一片中把內容都講清楚。blog
基礎的一些知識點，能夠訪問我另外一個系列：《鴻蒙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）上：
做者：塗啓標
想了解更多內容，請訪問： 51CTO和華爲官方戰略合做共建的鴻蒙技術社區https://harmonyos.51cto.com