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

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

OpenHarmony_小贾

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

阅读量964

点赞数 25

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 鸿蒙开发移动开发文章标签： harmonyos 学习前端 ui 鸿蒙开发 Canvas 组件化

本文链接：https://blog.csdn.net/maniuT/article/details/140547931

路径对象，支持通过对象的接口进行路径的描述，并通过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);
    }
}