8.1：公共属性

绘制类的公共属性和全局公共属性类似，它是绘制类组件所独有的属性，合理利用这些独有的属性，可以有效的开发出众多绚丽的UI效果，ArkUI提供的 8 种绘制类组件均集成自 CommonShapeMethod 类，本节笔者简单介绍下该类的基本属性。

8.1.1：公共属性定义介绍

公共属性都定义在 CommonShapeMethod 内部，源码如下：

export declare class CommonShapeMethod<T> extends CommonMethod<T> {
  stroke(value: Color | number | string | Resource): T;
  fill(value: Color | number | string | Resource): T;
  strokeDashOffset(value: number | string): T;
  strokeLineCap(value: LineCapStyle): T;
  strokeLineJoin(value: LineJoinStyle): T;
  strokeMiterLimit(value: number | string): T;
  strokeOpacity(value: number | string | Resource): T;
  fillOpacity(value: number | string | Resource): T;
  strokeWidth(value: number | string | Resource): T;
  antiAlias(value: boolean): T;
  strokeDashArray(value: Array<any>): T
}

• stroke：设置边框的颜色。

• strokeWidth：设置边框的宽度。

  简单样例如下所示：

  Circle()
    .width(80)
    .height(80)
    .strokeWidth(3)    // 设置边框宽度
    .stroke(Color.Red) // 设置边框颜色
  

  样例运行解脱如下图所示：

  

• fill：设置组件的填充色，默认是黑色。

• strokeOpacity：设置边框的透明度，默认不透明。

• fillOpacity：设置填充区域的透明度，默认不透明。

  简单样例如下所示：

  Circle()
    .width(80)
    .height(80)
    .strokeWidth(3)
    .stroke(Color.Red)
  
  Circle()
    .width(80)
    .height(80)
    .strokeWidth(3)     // 设置边框宽度
    .stroke(Color.Red)  // 设置边框颜色
    .strokeOpacity(0.3) // 设置边框透明度
    .fill(Color.Gray)   // 设置填充色
    .fillOpacity(0.3)   // 设置填充部分的透明度
  

  样例运行结果如下图所示：

  

• strokeDashArray：设置shape的边框间距。

• strokeDashOffset：设置shape的边框绘制起点的偏移量。

• strokeLineCap：设置边框路径端点绘制样式。

• strokeLineJoin：设置边框拐角绘制样式。

• strokeMiterLimit：设置边框锐角绘制成斜角的极限值。

• antiAlias：设置边框是否开启抗锯齿，默认为 true 表示抗锯齿。

  简单样例如下所示：

  Rect()
    .width(150)
    .height(80)
    .strokeWidth(3)
    .stroke(Color.Red)
    .fill(Color.Gray)
  
  Rect()
    .width(150)
    .height(80)
    .strokeWidth(3)                    // 设置边框宽度
    .stroke(Color.Red)                 // 设置边框颜色
    .strokeOpacity(0.3)                // 设置边框透明度
    .fill(Color.Gray)                  // 设置填充色
    .fillOpacity(0.3)                  // 设置填充部分的透明度
    .strokeDashArray([10])             // 设置边框线段间距
    .strokeDashOffset(10)              // 设置边框起始偏移量
    .strokeLineCap(LineCapStyle.Round) // Round样式
    .strokeLineCap(LineCapStyle.Round) // Round样式
  

  样例运行结果如下图所示：

  

8.1.2：小结

本节介绍了绘制类图形组件公共的属性的使用，读者可以自行做下练习，熟悉下每个属性对应的显示样式。

(adsbygoogle = window.adsbygoogle || []).push({});