ArkTs画三角 - 技术栈

这里提供三种方法：Polygon、Path、border。

方法一：Polygon

先上代码：

lua 复制代码

// 正三角
Polygon({ width: 8, height: 8 })
  .points([[0, 8], [4, 0], [8, 8]])
  .fill('#E7645F')
  

// 倒画三角
Polygon({ width: 8, height: 8 })
  .points([[0, 0], [4, 8], [8, 0]])
  .fill('#6482E6')

正三角效果：

倒三角效果：

Polygon文档可以自己瞅瞅。

Polygon多边形绘制组件，可以简单理解，这玩意需要先定义宽高，也就是你画线的区域大小，初次尝试推荐定义正方形的区域。

有了区域的概念后，接下来就是需要在这上面描点（也就是points，官方叫法：多边形的顶点坐标列表），点描完后（这个就是你画的形状），接着填充你喜爱的颜色就完事了。

实操如下：

注意⚠️：

Polygon里面的单位都是vp，这里主要是提醒和Path里面的单位不同。
points里面点的顺序是可以变的，不会影响形状。

方法二：Path

先上代码：

scss 复制代码

Path()
  .width(px2vp(24))
  .height(px2vp(24))
  // Z: 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 路径绘制的命令字符串，单位 为px。
  .commands(`M12 0 L24 24 L0 24 Z`)
  // .commands(`M${vp2px(4)} 0 L${vp2px(8)} ${vp2px(8)} L0 ${vp2px(8)} Z`)
  .fill('#E7645F')
  // .fillOpacity(0) // 三角形中间空心
  .stroke('#E7645F') // 边框颜色，默认黑色
  // .strokeWidth(3) // 三角形边框

效果：

Path和Polygon有点差异，它有边框，所以需要给stroke属性赋值。

Path文档

Path路径绘制组件，根据绘制路径生成封闭的自定义形状（注意commands最后的Z）。这里解释一下commands，它路径绘制的命令字符串，单位为px。简单的图形绘制，一般就会用到M和L，复杂的可以自行阅读文档。

M：在给定的 (x, y) 坐标处开始一个新的子路径。例如，M 0 0 表示将（0, 0）点作为新子路径的起始点。

L：从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，L 24 24 表示绘制当前点到（24, 24）点的直线，并将（24, 24）点作为新子路径的起始点。

Z：通过将当前路径连接回当前子路径的初始点来关闭当前子路径。

.commands('M12 0 L24 24 L0 24 Z') 解释：从坐标（12，0）开始，画到（24，24），接着从（24，24）开始画到（0，24），Z：关闭连线

实操如下：

注意⚠️：

commands里面点的顺序是不可以变，会影响形状。

方法三：border

ArkTs里面border画三角的整体思想和html上使用border画三角大体一样，这里就不细讲了。

代码：

less 复制代码

Column() {
  Row()
      // width、height一定要赋值，不然border的设置显示不出来
    .width(0)
    .height(0)
    .border({
      // 注意和html不一样，这里的width都需要给值，
      // 如果bottom不给值，就会画一个100 * 50的长方形出来
      width: {
        top: '50vp',
        right: '50vp',
        bottom: '50vp',
        left: '50vp',
      },
      // 这里画向下的三角，所以top赋值你想要的颜色。
      // 其他的right、bottom、left，如果不赋值，就会默认黑色
      // 这里边框赋值，可以使用同背景一样的颜色，也可以使用rgba的透明隐藏
      // 我背景是白色，所以可以有两种赋值方法'#fff'/'rgba(255, 255, 255, 0)'
      color: {
        top: '#E7645F',
        // right: 'rgba(255, 255, 255, 0)',
        right: '#fff',
        bottom: 'rgba(255, 255, 255, 0)',
        left: 'rgba(255, 255, 255, 0)',
      },
      style: {
        top: BorderStyle.Solid,
        right: BorderStyle.Solid,
        left: BorderStyle.Solid,
      }
    })
  Row().width(100).height(50).backgroundColor('#E7645F')
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height(500)

效果：