HarmonyOS Next开发学习手册——Canvas组件开发(Path2D对象)

最新推荐文章于 2024-10-26 10:58:15 发布

原创

最新推荐文章于 2024-10-26 10:58:15 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #学习 #前端 #ui #鸿蒙开发 #Canvas #组件化

路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。

画线段

创建Path2D，使用多条线段组合图形。

<!-- xxx.hml --> 
<div class="container">
  <canvas ref="canvas"></canvas>
</div>

/* xxx.css */
.container {
    flex-direction: column;
    background-color: #F1F3F5;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

canvas {
    width: 600px;
    height: 600px;
    background-color: #fdfdfd;
    border: 5px solid red;
}

// xxx.js
import promptAction from '@ohos.promptAction';

export default {
    onShow() {
        let ctx = this.$refs.canvas.getContext('2d', {
            antialias: true
        });
        let path = ctx.createPath2D();
        // 房顶
        path.moveTo(10, 300);
        path.lineTo(210, 100);
        path.lineTo(410, 300);
        // 屋子
        path.moveTo(10, 300);
        path.lineTo(410, 300);
        path.lineTo(410, 600);
        path.lineTo(10, 600);
        path.closePath();
        // 窗子
        path.moveTo(50, 450);
        path.bezierCurveTo(70, 350, 130, 350, 150, 450);
        path.closePath();
        // 门
        path.moveTo(250, 450);
        path.rect(250, 450, 100, 600);
        path.closePath();
        // 烟囱
        path.moveTo(365, 250);
        path.ellipse(310, 215, 30, 130, 0, Math.PI * 0.04, Math.PI * 1.1, 1);
        // 树
        path.moveTo(485, 450);
        path.quadraticCurveTo(510, 500, 485, 600);
        path.moveTo(550, 450);
        path.quadraticCurveTo(525, 500, 550, 600);
        path.moveTo(600, 535);
        path.arc(520, 450, 85, 0, 6);
        ctx.stroke(path);
    }
}