ArkUI是一套UI開發(fā)框架，提供了開發(fā)者進(jìn)行應(yīng)用UI開發(fā)時所需具備的能力。隨著OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）不斷更新迭代，ArkUI也提供了很多新的組件，例如Canvas、OffscreenCanvas、XComponent組件等。

新增的功能可以幫助開發(fā)者開發(fā)出更流暢、更美觀的應(yīng)用。本篇文章將為大家分享如何通過Canvas組件實(shí)現(xiàn)涂鴉功能，用戶可以選擇空白畫布或者簡筆圖進(jìn)行自由繪畫。

效果展示

以下為效果圖： ? 詳細(xì)效果請看下方視頻： 從視頻中可見，首頁顯示了涂鴉的圖片以及最后一張空白圖片，在點(diǎn)擊圖片進(jìn)入涂鴉頁面后，可以對畫筆的顏色、粗細(xì)進(jìn)行設(shè)置。如果涂鴉過程中有錯誤，可以用橡皮擦將畫面擦除，也可點(diǎn)擊清除按鈕，清空涂鴉的內(nèi)容，重新進(jìn)行涂鴉操作。 ? ?

相關(guān)代碼已經(jīng)上傳至SIG倉庫，鏈接如下：

https://gitee.com/openharmony-sig/knowledge_demo_entainment/tree/master/FA/FreeDraw

目錄結(jié)構(gòu)

?

源碼分析

一、Canvas組件介紹 本篇樣例主要利用ArkUI的Canvas組件實(shí)現(xiàn)涂鴉的功能，首先介紹一下Canvas組件。 Canvas組件主要包含了Canvas和CanvasRenderingContext2D，Canvas提供了畫布功能，CanvasRenderingContext2D提供了繪畫的屬性和方法。通過CanvasRenderingContext2D可以修改畫筆的樣色、粗細(xì)等屬性，從而畫出各式各樣的圖形。 以下是Canvas和CanvasRenderingContext2D在樣例開發(fā)中使用的相關(guān)接口信息。 ? CanvasRenderingContext2D ? ?二、分析源碼頁面布局 第一個模塊是首頁布局，首頁顯示所有涂鴉包含的圖片，點(diǎn)擊圖片可以進(jìn)入頁面；第二個模塊是涂鴉模塊，可以設(shè)置畫筆的顏色、邊條寬度等。 1. 首頁布局

Column() { Text('選擇涂鴉的圖片：').margin('10vp').fontSize('30fp').fontColor(Color.Blue).height('5%') Grid() { ForEach(this.images, (item, index) => { GridItem() { Image(this.images[index]) .onClick((event) => { router.push( { url: "pages/detailPage", params: { imgSrc: this.images[index], }, } ) }) .width('100%') .height('100%') .objectFit(ImageFit.Contain) } }) } .padding({left: this.columnSpace, right: this.columnSpace}) .columnsTemplate("1fr 1fr 1fr") // Grid寬度均分成3份 .rowsTemplate("1fr 1fr") // Grid高度均分成2份 .rowsGap(this.rowSpace) // 設(shè)置行間距 .columnsGap(this.columnSpace) // 設(shè)置列間距 .width('100%') .height('95%') }.backgroundColor(Color.Pink) 2. 涂鴉頁面 - 畫布Canvas的布局 通過Stack組件進(jìn)行包裹，并將Canvas畫布覆蓋在選擇的背景圖片之上，這些背景圖片主要是水果簡筆畫。

Stack() { Image(this.imgSrc).width('100%').height('100%').objectFit(ImageFit.Contain) Canvas(this.context) .width('100%') .height('100%')// .backgroundColor('#00ffff00') .onReady(() => { }) .onTouch((event) => { if (event.type === TouchType.Down) { this.eventType = 'Down'; this.drawing = true; [this.x, this.y] = [event.touches[0].x, event.touches[0].y]; this.context.beginPath(); this.context.lineCap = 'round'; if (this.isEraserMode) { //橡皮擦模式 this.context.clearRect(this.x, this.y, 20, 20); } console.log('gyf Down'); } if (event.type === TouchType.Up) { this.eventType = 'Up'; this.drawing = false; console.log('gyf Up!'); this.context.closePath(); } if (event.type === TouchType.Move) { if (!this.drawing) return; this.eventType = 'Move'; console.log('gyf Move'); if (this.isEraserMode) { //橡皮擦模式 this.context.clearRect(event.touches[0].x, event.touches[0].y, 20, 20); } else { this.context.lineWidth = this.lineWidth; this.context.strokeStyle = this.color; this.context.moveTo(this.x, this.y); this.x = event.touches[0].x; this.y = event.touches[0].y; this.context.lineTo(this.x, this.y); this.context.stroke(); } } }) }.width('100%').height('75%') 3.涂鴉頁面 - 畫筆設(shè)置區(qū)域的布局

Column() { Row() { Text('粗細(xì)：') Button('小').onClick(() => { //設(shè)置畫筆的寬度 this.lineWidth = 5; this.context.lineWidth = this.lineWidth; this.isEraserMode = false; console.log('gyf small button'); }).margin($r('app.float.wh_value_10')) Button('中').onClick(() => { //設(shè)置畫筆的寬度 this.lineWidth = 15; this.context.lineWidth = this.lineWidth; this.isEraserMode = false; console.log('gyf middle button'); }).margin($r('app.float.wh_value_10')) Button('大').onClick(() => { //設(shè)置畫筆的寬度 this.lineWidth = 25; this.context.lineWidth = this.lineWidth; this.isEraserMode = false; console.log('gyf big button'); }).margin($r('app.float.wh_value_10')) Button('超大').onClick(() => { //設(shè)置畫筆的寬度 this.lineWidth = 40; this.context.lineWidth = this.lineWidth; this.isEraserMode = false; console.log('gyf super big button'); }) }.padding($r('app.float.wh_value_10')).margin($r('app.float.wh_value_5')) //畫筆顏色 Scroll() { Row() { Text('顏色：') Button(' ', { type: ButtonType.Circle }) .onClick(() => { //黑色 this.color = '#000000'; this.context.strokeStyle = this.color; this.isEraserMode = false; console.log('gyf black button'); }) .backgroundColor('#000000') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //紅色 this.color = '#FF0000'; this.context.strokeStyle = this.color; this.isEraserMode = false; console.log('gyf red button'); }) .backgroundColor('#FF0000') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //綠色 this.color = '#00FF00'; this.context.strokeStyle = this.color; this.isEraserMode = false; console.log('gyf green button'); }) .backgroundColor('#00FF00') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //藍(lán)色 this.color = '#0000FF'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#0000FF') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //棕色 this.color = '#A52A2A'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#A52A2A') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //紫色 this.color = '#800080'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#800080') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //紫紅色 this.color = '#FF00FF'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#FF00FF') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //深藍(lán)色 this.color = '#00008B'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#00008B') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //深天藍(lán) this.color = '#00BFFF'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#00BFFF') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //綠色 this.color = '#008000'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#008000') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //青綠色 this.color = '#32CD32'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#32CD32') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //橙色 this.color = '#FFA500'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#FFA500') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) Button(' ', { type: ButtonType.Circle }) .onClick(() => { //黃色 this.color = '#FFFF00'; this.context.strokeStyle = this.color; this.isEraserMode = false; }) .backgroundColor('#FFFF00') .width('40vp') .width('40vp') .margin($r('app.float.wh_value_10')) }.padding('10vp') } .scrollable(ScrollDirection.Horizontal) // 設(shè)置滾動條水平方向滾動 .margin($r('app.float.wh_value_5')) Row() { Image('/common/images/eraser.png') .onClick(() => { //橡皮擦模式 this.isEraserMode = true; console.log('gyf eraser button'); }) .width('50vp') .height('50vp') .margin('10vp') Button('清理畫板').onClick(() => { this.context.clearRect(0, 0, 1000, 1000); }) } .margin($r('app.float.wh_value_5')) } .width('100%') .height('25%').alignItems(HorizontalAlign.Start) 三、邏輯代碼 邏輯代碼存在于Canvas的onTouch事件中，通過TouchType的Down、Up、Move來判斷開始、移動和結(jié)束的動作。一筆完整的繪制包含一次Down和Up，其中有若干次的Move。橡皮擦模式通過clearRect接口實(shí)現(xiàn)擦除的功能。

.onTouch((event) => { if (event.type === TouchType.Down) { this.eventType = 'Down'; this.drawing = true; [this.x, this.y] = [event.touches[0].x, event.touches[0].y]; this.context.beginPath(); this.context.lineCap = 'round'; if (this.isEraserMode) { //橡皮擦模式 this.context.clearRect(this.x, this.y, 20, 20); } console.log('gyf Down'); } if (event.type === TouchType.Up) { this.eventType = 'Up'; this.drawing = false; console.log('gyf Up!'); this.context.closePath(); } if (event.type === TouchType.Move) { if (!this.drawing) return; this.eventType = 'Move'; console.log('gyf Move'); if (this.isEraserMode) { //橡皮擦模式 this.context.clearRect(event.touches[0].x, event.touches[0].y, 20, 20); } else { this.context.lineWidth = this.lineWidth; this.context.strokeStyle = this.color; this.context.moveTo(this.x, this.y); this.x = event.touches[0].x; this.y = event.touches[0].y; this.context.lineTo(this.x, this.y); this.context.stroke(); } }})

總結(jié)

本文介紹了如何使用ArkUI框架提供的Canvas組件實(shí)現(xiàn)涂鴉功能。首先，通過Canvas的onTouch事件來跟蹤Down、Move和Up的事件，再設(shè)置CanvasRenderingContext2D的相關(guān)屬性并調(diào)用相關(guān)的方法，最終實(shí)現(xiàn)涂鴉的功能。除了文中分享的涂鴉樣例，開發(fā)者還可以通過拓展其他相關(guān)的屬性和方法，實(shí)現(xiàn)更多好玩的、高性能的樣例。