國內(nèi)這兩年3040要問什么487系統(tǒng)發(fā)展331最快,這就莫過于華為bc搭建的鴻蒙系統(tǒng)了。從發(fā)布到升級到HarmonyOS 2.0和HarmonyOS 3.0都是得到常駐發(fā)展的國產(chǎn)系統(tǒng)。那如果用鴻蒙系統(tǒng)執(zhí)行畫圖這個操作,要怎么操作開發(fā)呢?今天就是主要分享這個事情的。
下面為大家介紹兩段關(guān)鍵代碼:
(1) 畫圖功能實現(xiàn)代碼
// 畫布
@Builder Canvas() { ForEach(this.pathInfoArray, (pathInfo) => OnePath({ pathInfo: pathInfo })) // 遍歷構(gòu)建所有畫圖路徑 Stack() // 覆蓋層,用于接收觸摸事件,實現(xiàn)畫圖 .width('100%') .height('100%') .onTouch((event: TouchEvent) => { switch (event.type) { case TouchType.Down: // 按下時,新建一條畫圖路徑 this.pathInfoArray.push(new PathInfo(`M${event.touches[0].x} ${event.touches[0].y}`, this.paintSize, this.paintColor)) break case TouchType.Move: // 移動或抬起時,補充畫圖路徑信息 case TouchType.Up: this.pathInfoArray[this.pathInfoArray.length-1].commands += `L${event.touches[0].x} ${event.touches[0].y}` break } }) }
以上代碼通過Canvas組件定義畫布,再通過onTouch組件監(jiān)聽觸摸事件實現(xiàn)了畫圖功能。
(2) “設(shè)置畫筆”的界面和功能實現(xiàn)代碼
// 設(shè)置畫筆組件 @Builder SetPaint() { Panel(this.showSetPaint) { Column({ space: 30 }) { Row() { Text('畫圖效果:') Path() .width(200) .height(50) .backgroundColor(Color.White) .fillOpacity(0) // 不填充,只要stroke .commands(`M${vp2px(10)} ${vp2px(10)} S${vp2px(100)} ${vp2px(70)} ${vp2px(190)} ${vp2px(10)}`) // stroke路徑,弧線 .strokeWidth(this.paintSize) // stroke寬度 .stroke(this.paintColor) // stroke顏色 } Row() { Text('畫筆大?。?#39;) Slider({ value: this.paintSize, min: this.PAINT_SIZE_MIN, max: this.PAINT_SIZE_MAX }) .onChange((value) => this.paintSize = value) // 改變畫筆大小 .width(200) } Row() { Text('畫筆顏色:') ForEach(this.COLORS, color => { Stack() { Stack() .width(color == this.paintColor ? 26 : 20) // 若是當前畫筆顏色,則放大一點顯示 .height(color == this.paintColor ? 26 : 20) .backgroundColor(color) .onClick(() => this.paintColor = color) // 點擊改變畫筆顏色 } .width(32) .height(32) }) } }.width('100%').margin({ top: 30 }) }.onChange((value: any) => { if (value.mode == 'mini') { // 最小顯示狀態(tài)時隱藏,不隱藏會阻擋觸摸事件 this.showSetPaint = false } }) }
以上代碼通過Panel、Column和Row等容器組件實現(xiàn)了“設(shè)置畫筆”界面的布局。
此界面包含三個部分:畫筆顏色、畫筆大小和畫圖效果。代碼中,通過Stack組件展示畫筆的顏色,通過Slider組件調(diào)整畫筆大小,通過Path組件繪制弧線來展示畫圖效果。最終實現(xiàn)效果如圖5所示。
圖5 “設(shè)置畫筆”界面
到此步,“畫圖”應用就開發(fā)完成啦!感興趣的小伙伴也可以去嘗試開發(fā)哦