215.HarmonyOS NEXT系列教程之 CircleClass基础类与圆形效果实现原理解析

@Observed
class CircleClass {
  @Track
  width: number;
  @Track
  height: number;
  @Track
  menuLength: number = 0;

  constructor(options: CircleClassConstructorType) {
    this.width = options.width;
    this.height = options.height;
    this.menuLength = options.menuLength;
  }
}

getMinWidth(): number {
  return utilGetMinWidth(this.width, this.height, this.menuLength);
}

getMenuCenterX(index: number): number {
  let itemWidth = this.width / this.menuLength;
  let basicsX = itemWidth * index;
  let centerWidth = itemWidth / 2;
  return basicsX + centerWidth;
}

@Observed
export class ConcaveCircle extends CircleClass {
  @Track
  positionX: number = 0;
  @Track
  positionY: number = 0;
  oldPositionX: number = 0;
  oldPositionY: number = 0;
  @Track
  circleRadius: number = 0;
  @Track
  circleDiameter: number = 0;

  constructor(context: CanvasRenderingContext2D, menuLength: number) {
    super({
      width: context.width,
      height: context.height,
      menuLength: menuLength
    });
    this.initCircleRadius();
    this.resetXY();
  }
}

   initCircleRadius(): void {
     this.circleRadius = this.getMinWidth() / 2 - SURPLUSRADIUS;
     this.circleDiameter = this.circleRadius * 2;
   }

   resetXY(): void {
     this.positionY = -this.circleRadius;
     this.positionX = this.getAutoPositionX(0);
     this.oldPositionX = 0;
     this.oldPositionY = 0;
   }

getAutoPositionX(index: number): number {
  return this.getMenuCenterX(index) - this.circleRadius;
}

setPositionXY(position: RaisedCircleSetPostionXYType): void {
  if (position.x || position.x === 0) {
    this.oldPositionX = this.positionX;
    this.positionX = position.x;
  }
  if (position.y || position.y === 0) {
    this.oldPositionY = this.positionY;
    this.positionY = position.y;
  }
}