鴻蒙OpenHarmony開(kāi)發(fā)實(shí)戰(zhàn)：【MiniCanvas】

介紹

基于OpenHarmony的Cavas組件封裝了一版極簡(jiǎn)操作的MiniCanvas，屏蔽了原有Canvas內(nèi)部復(fù)雜的調(diào)用流程，支持一個(gè)API就可以實(shí)現(xiàn)相應(yīng)的繪制能力，該庫(kù)還在繼續(xù)完善中，也歡迎PR。

使用說(shuō)明

1. 添加MiniCanvas依賴
   在項(xiàng)目entry目錄執(zhí)行如下命令安裝MiniCanvas庫(kù)：

   npm install git+https://gitee.com/ark-ui/MiniCanvas.git
   

2. 引入MiniCanvas

   import { MiniCanvas, Paint, ICanvas } from '@ohos/mini_canvas'
   

3. 使用MiniCanvas

   @Entry @Component struct TestMiniCanvas {
     build() {
       Column() {
         MiniCanvas({
           onDraw: (canvas) = > {
   
           }
         })
       }
       .size({width: "100%", height: "100%"})
     }
   }
   

4. MiniCanvas繪制更多鴻蒙學(xué)習(xí)知識(shí)，可+mau123789，記住是v喔

   // import { MiniCanvas, Paint, ICanvas } from '@ohos/mini_canvas'
   // 源碼方式引入
   import { MiniCanvas, Paint } from "./mini_canvas"
   
   @Entry @Component struct TestMiniCanvas {
     build() {
       Column() {
         MiniCanvas({
           // 在onDraw()方法內(nèi)執(zhí)行繪制
           onDraw: (canvas) = > {
             // 創(chuàng)建畫(huà)筆
             let paint = new Paint()
   
             // 繪制直線
             paint.setColor("#FF0000");
             paint.setStrokeWidth(5);
             canvas.drawLine(10, 10, 280, 10, paint);
   
             // 繪制圓以及圓環(huán)
             canvas.drawCircle(50, 50, 25, paint);
             paint.setStroke(true);
             paint.setStrokeWidth(3);
             canvas.drawCircle(250, 50, 25, paint);
   
             // 繪制橢圓以及橢圓環(huán)
             paint.setStroke(false);
             canvas.drawOval(20, 100, 150, 50, paint)
             paint.setStroke(true);
             paint.setColor(Color.Pink.toString())
             canvas.drawOval(190, 100, 150, 50, paint)
   
             // 繪制矩形
             paint.setStroke(false)
             canvas.drawRect(20, 180, 150, 50, paint)
             paint.setStroke(true)
             paint.setStrokeWidth(5)
             canvas.drawRect(190, 180, 150, 50, paint)
   
             // 繪制圓角矩形
             paint.setStroke(false);
             canvas.drawRoundRect(20, 250, 150, 50, 10, paint)
             paint.setStroke(true);
             canvas.drawRoundRect(190, 250, 150, 50, 10, paint)
   
   
             // 繪制圓弧
             canvas.drawArc(80, 330, 40, 0, 135, paint);
             paint.setStroke(false);
             canvas.drawArc(250, 330, 40, 0, 135, paint);
   
             // 繪制圖片
             let bitmap = new ImageBitmap("pages/test.jpg")
             canvas.drawImage(bitmap, 10, 10, 800, 600, 20, 400, 320, 160, paint)
           },
           // 設(shè)置畫(huà)布的屬性
           attribute: {
             id: "mini_canvas",
             width: "100%",
             height: "100%",
             background: "#ffffff",
             clickListener: (event) = > {
               console.log("onClicked: " + JSON.stringify(event));
             },
             touchListener: (event) = > {
               console.log("onTouched: " + JSON.stringify(event));
             }
           },
         })
       }
       .size({width: "100%", height: "100%"})
     }
   }
   

審核編輯 黃宇