HarmonyOS Codelab 优秀样例——溪村小镇（ArkTS）

6.1 区域导览卡片

区域导览页展示了一个由各个区域导览卡片组成的可上下滑动的轮播图，效果如图所示：

轮播效果是Stack组件结合拖动手势来实现的，根据手势拖动的距离来判断是否需要切换图片，同时根据手势拖动的方向来决定是切换到上一张还是下一张图片。在图片切换的过程中，会根据图片和最上层图片的下标的差值，来计算它的模糊度、透明度、纵向偏移量、宽度等属性值。

// ZonesComponent.ets
Stack() {
  ForEach(this.zonesList, (item: ZonesItem, index: number) => {
    Row() {
      Image(item.thumbnail)
        ...
        .shadow({
          radius: Const.SHADOW_RADIUS,
          color: `rgba(0,0,0,0.3)`,
          offsetY: Const.SHADOW_RADIUS / Const.DOUBLE_NUM
        })
        // 图片透明度
        .opacity(1 - Math.min(ZoneConst.HALF_COUNT,
          Math.abs(this.getImgCoefficients(index))) * ZoneConst.OPACITY_COEFFICIENTS)
    }
    // 图片宽度
    .width(index != this.aheadIndex && this.getImgCoefficients(index) === 0 ? 
      Const.SWIPER_DEFAULT_WIDTH : 
      `${ZoneConst.ITEM_WIDTH - ZoneConst.OFFSET_COEFFICIENTS * Math.abs(this.getImgCoefficients(index))}%`)
    .offset({ x: 0, y: this.getOffSetY(index) })
    .zIndex(index != this.aheadIndex && this.getImgCoefficients(index) === 0 ? 
      0 : ZoneConst.HALF_COUNT - Math.abs(this.getImgCoefficients(index)))
    // 毛玻璃效果
    .blur(ZoneConst.OFFSET_COEFFICIENTS * Math.abs(this.getImgCoefficients(index)))
  }, (item: ZonesItem) => JSON.stringify(item))
}
.gesture(
  // 添加手势，通过手势实现图片的动态效果
  PanGesture({ direction: PanDirection.Vertical })
    .onActionStart((event: GestureEvent) => {
      this.changedIndex = false;
      this.handlePanGesture(event.offsetY);
    })
    .onActionUpdate((event: GestureEvent) => {
      this.handlePanGesture(event.offsetY);
    })
    .onActionEnd(() => {
      animateTo({
        duration: Const.SWIPER_DURATION,
      }, () => {
        this.marginBottom = 0;
      });
    })
...
)
 
// 计算图片和最上方图片的下标相对差值
getImgCoefficients(index: number): number {
  let coefficient = this.aheadIndex - index;
  let tempCoefficient = Math.abs(coefficient);
  if (tempCoefficient <= ZoneConst.HALF_COUNT) {
    return coefficient;
  }
  let dataLength = this.zonesList.length;
  let tempOffset = dataLength - tempCoefficient;
  if (tempOffset <= ZoneConst.HALF_COUNT) {
    if (coefficient > 0) {
      return -tempOffset;
    }
    return tempOffset;
  }
  return 0;
}
 
// 计算图片y轴方法的偏移量
getOffSetY(index: number): number {
  let offsetIndex = this.getImgCoefficients(index);
  let tempOffset = Math.abs(offsetIndex);
  let offsetY = this.marginBottom / (tempOffset + 1);
  if (tempOffset === 1) {
    offsetY += -offsetIndex * ZoneConst.MAX_OFFSET_Y;
  } else if (tempOffset === ZoneConst.HALF_COUNT) {
    offsetY += -offsetIndex * (ZoneConst.MAX_OFFSET_Y - ZoneConst.OFFSET_COEFFICIENTS);
  }
  return offsetY;
}
 
// 动态滚动切换最上方图片
startAnimation(isUp: boolean): void {
  animateTo({
    duration: Const.SWIPER_DURATION,
  }, () => {
    let dataLength = this.zonesList.length;
    let tempIndex = isUp ? this.aheadIndex + 1 : dataLength + this.aheadIndex - 1;
    this.aheadIndex = tempIndex % dataLength;
    this.marginBottom = 0;
  });
}
 
// 判断是否需要切换最上方图片
handlePanGesture(offsetY: number): void {
  if (Math.abs(offsetY) < ZoneConst.MAX_MOVE_OFFSET) {
    this.marginBottom = offsetY;
  } else {
    if (this.changedIndex) {
      return;
    }
    this.changedIndex = true;
    this.startAnimation(offsetY < 0);
  }
}

在区域导览页点击跳转到区域详情页时，使用pageTransition函数实现了界面跳转过程中的动画效果，效果如图所示：

为实现图中效果，需要在区域导览所在的@Entry界面和详情页所在的@Entry界面里使用pageTransition函数来改变他们入场和出场时的方向、缩放大小和透明度等。

// MainPage.ets
@Entry
@Component
struct MainPage {
  pageTransition() {
    PageTransitionEnter({ duration: Const.SHARED_DURATION })
      .slide(SlideEffect.Top);
    PageTransitionExit({ delay: Const.EXIT_DELAY })
      .opacity(0);
  }
}
 
// IntroductionPage.ets
@Entry
@Component
struct IntroductionPage {
  pageTransition() {
    PageTransitionEnter({ duration: Const.SHARED_DURATION })
      .slide(SlideEffect.Bottom)
      .scale({
        x: 0,
        y: 0,
        z: 0,
        centerX: Const.HALF_PERCENT,
        centerY: Const.HALF_PERCENT
      });
    PageTransitionExit({ delay: Const.SWIPER_DURATION })
      .slide(SlideEffect.Bottom)
      .scale({
        x: 0,
        y: 0,
        z: 0,
        centerX: Const.HALF_PERCENT,
        centerY: Const.HALF_PERCENT
      });
  }
}

6.2 区域详情页

区域详情页包括首图轮播、滑动缩放、标题吸顶以及图片查看等功能，效果如图所示：

首先通过imageHeight属性设置轮播的启用与禁用，imageHeight为全屏时轮播启用，左右滑动可以查看不同区域的介绍信息，当imageHeight小于全屏时轮播禁用。

// SwiperListItem.ets
@Component
export default struct SwiperListItem {
  @Prop imageHeight: number;
  ...
 
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Swiper(this.swiperController) {
        ...
      }
      ...
      .indicator(this.imageHeight < CommonConstants.FULL_PERCENT_NUMBER ? false : new DotIndicator())
      .disableSwipe(this.imageHeight < CommonConstants.FULL_PERCENT_NUMBER ? true : false)
    }
  }
}

接着根据List触屏滑动的偏移量，计算滑动缩放的比例。onScrollFrameBegin方法接收offset参数，返回List的实际偏移量。其中offset大于0为向上滑动，图片缩小；小于0为向下滑动，图片放大。

// IntroductionPage.ets
import { Animation } from '../common/utils/Animation';
...
 
@Entry
@Component
struct IntroductionPage {
  @State listPosition: number = Const.LIST_POSITION_BEGIN;
  @State imageHeight: number = Const.FULL_PERCENT_NUMBER;
  @State arrowIconOpacity: number = Const.OPACITY_MAX;
  ...
 
  build() {
    Column() {
      Stack({ alignContent: Alignment.Bottom }) {
        Column() {
          List({ scroller: this.scrollerForList }) {
            ...
          }
          .onScrollFrameBegin((offset: number, state: ScrollState) => {
            let realOffset = Animation.controlImageScale.call(this, offset, state);
            return { offsetRemain: realOffset };
          })
          ...
        }
      }
    }
  }
}

在滑动缩放过程中，为避免首图滑出屏幕顶端，需要设置List实际偏移量为0。并且基于offset值实时更新imageHeight与arrowIconOpacity实现缩放。

// Animation.ets
import { Const} from '../constants/CommonConstants';
 
export class Animation {
  public static controlImageScale(this, offset: number, state: ScrollState): number {
    if ((offset > 0) && (this.imageHeight > CommonConstants.MIN_IMAGE_HEIGHT)) {
      // 图片缩小逻辑
      let offsetHeight = (Math.abs(offset) * CommonConstants.FULL_PERCENT_NUMBER) / Number(this.screenHeight);
      let heightOffset = this.imageHeight - CommonConstants.MIN_IMAGE_HEIGHT > offsetHeight ?
        offsetHeight : this.imageHeight - CommonConstants.MIN_IMAGE_HEIGHT;
      this.imageHeight = this.imageHeight - heightOffset;
      this.arrowIconOpacity = this.arrowIconOpacity -
        heightOffset / (CommonConstants.FULL_PERCENT_NUMBER - CommonConstants.MIN_IMAGE_HEIGHT);
      // 返回实际偏移量0
      return 0;
    }
    if ((this.listPosition === CommonConstants.LIST_POSITION_BEGIN) && (offset < 0)
      && (this.imageHeight < CommonConstants.FULL_PERCENT_NUMBER)) {
      // 图片放大逻辑
      let offsetHeight = (Math.abs(offset) * CommonConstants.FULL_PERCENT_NUMBER) / Number(this.screenHeight);
      let heightOffset = CommonConstants.FULL_PERCENT_NUMBER - this.imageHeight > offsetHeight ?
        offsetHeight : CommonConstants.FULL_PERCENT_NUMBER - this.imageHeight;
      this.imageHeight = this.imageHeight + heightOffset;
      this.arrowIconOpacity = this.arrowIconOpacity +
        heightOffset / (CommonConstants.FULL_PERCENT_NUMBER - CommonConstants.MIN_IMAGE_HEIGHT);
      // 返回实际偏移量0
      return 0;
    }
    ...
    // 返回传参offset，此时缩放过程完毕
    return offset;
  }
}

介绍信息包括风格、建筑以及地理位置三部分，其中标题部分吸顶，并且需要根据滑动偏移量更新图标。通过scaleIcon数组设置不同标题图标的缩放比，在changeTitleIcon方法中基于偏移量改变scaleIcon数组的值。

// IntroductionPage.ets
import { Animation } from '../common/utils/Animation';
...
@Entry
@Component
struct IntroductionPage {
  @State scaleIcon: Array<number> = [Const.OPACITY_MAX, Const.OPACITY_MIN,
    Const.OPACITY_MIN];
  ...
 
  @Builder StickyHeader() {
    Column() {
      ...
    }
  }
 
  @Builder StickyFooter() {
    Column()
      .height($r('app.float.introduction_page_padding_bottom'))
    }
  }
 
  build() {
    Column() {
      Stack({ alignContent: Alignment.Bottom }) {
        Column() {
          List({ scroller: this.scrollerForList }) {
            ...
          }
          .onScroll(() => {
            this.startAnimation();
          })
        }
      }
    }
  }
 
  // 标题图标动画部分
  startAnimation() {
    Animation.changeTitleIcon.apply(this);
  }
  ...
}

计算offsetSum整体偏移量，当滑动到相应介绍模块时改变iconTitle与scaleIcon。

// Animation.ets
import { CommonConstants as Const} from '../constants/CommonConstants';
 
export class Animation {
  public static changeTitleIcon(this) {
    this.offsetSum = this.scrollerForList.currentOffset().yOffset;
    ...
 
    // 滑动设置listPosition标注当前所在listitem的索引
    if (this.offsetSum > Const.OFFSET_SUM_THRESHOLD) {
      this.listPosition = Const.LIST_POSITION_MIDDLE;
    }
 
    if (this.offsetSum > firstStarLine + Const.FIXED_ITEM_HEIGHT / 2) {
      this.geographicPicType = Const.GEOGRAPHY_LIGHT;
    }
 
    if (this.offsetSum <= firstStarLine + Const.FIXED_ITEM_HEIGHT / 2) {
      this.geographicPicType = Const.GEOGRAPHY_DARK;
    }
    // 基于总偏移量更新scaleIcon与iconTitle属性
    if ((this.currentListIndex === 2) && (this.offsetSum <= firstStarLine)) {
      this.iconTitle = Const.ICON_SUBTITLE_ARRAY[0];
      this.scaleIcon = [Const.OPACITY_MAX, Const.OPACITY_MIN, Const.OPACITY_MIN];
    }
    if ((this.currentListIndex === 2) && (this.offsetSum > firstStarLine) && (this.offsetSum < secondStarLine)) {
      this.iconTitle = Const.ICON_SUBTITLE_ARRAY[1];
      this.scaleIcon = [Const.OPACITY_MIN, Const.OPACITY_MAX, Const.OPACITY_MIN];
    }
    if ((this.currentListIndex === 2) && (this.offsetSum >= secondStarLine) && (this.offsetSum < thirdStarLine)) {
      this.iconTitle = Const.ICON_SUBTITLE_ARRAY[2];
      this.scaleIcon = [Const.OPACITY_MIN, Const.OPACITY_MIN, CommonConstants.OPACITY_MAX];
    }
  }
  ...
}

6.3 查看大图

在区域详情页的“设计风格”部分，提供了一个可以左右滑动查看的图库，展示了该区域的建筑风貌。点击当前展示的图片，将打开可以查看大图的弹窗，可以左右滑动查看对应图片的高清大图，支持双指缩放和拖动。

ImageAnimate自定义组件提供了左右滑动查看的图库功能，为了实现查看大图的弹窗，在此组件内添加自定义弹窗控制器，并通过点击事件打开弹窗。

// ImageAnimate.ets
// 导入自定义弹窗组件
import { ImageView } from '../view/ImageViewComponent';
 
@Component
export default struct ImageAnimation {
  // 添加自定义弹窗控制器
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: ImageView({ currentImageId: this.currentIndex }),
    customStyle: true,
    alignment: DialogAlignment.Bottom,
  });
 
  build(){
    Stack() {
      ForEach(this.introductionData.imageList, (item: ResourceStr, index: number) => {
        Row() {
          ...
        }
        .onClick(() => {
          // 打开弹窗
          this.dialogController.open();
        })
      }, item => JSON.stringify(item))
    }
  }
}

在自定义弹窗中，使用Swiper组件实现滑动查看大图的功能，使用Image组件通过控制组件大小实现缩放功能。两者作为Stack的子组件，通过手势识别判断当前是滑动查看不同大图的操作还是图片缩放和拖动的操作，控制对应组件的显隐，来实现对应功能。

// ImageViewComponent.ets
@CustomDialog
export struct ImageView {
  build() {
    Stack(){
      Swiper() {
        ForEach(this.introductionData.imageList, (item: Resource) => {
          Column() {
            Blank()
              .onClick(() => {
                // 使用Blank组件填充空白处，点击可以关闭弹窗
                this.controller.close();  
              })
 
            Image(item)
              .gesture(
                // 触发捏合手势
                PinchGesture()
                  .onActionStart(() => {
                    // 识别到手势操作，将isGesture设为true
                    this.isGesture = true;
                  })
                  .onActionUpdate((event: GestureEvent) => {
                    // 随着捏合操作的过程，逐渐调整图片缩放倍数
                    this.imgScale = this.curScale * event.scale;
                  })
                  .onActionEnd(() => {
                    // 为了避免图片无限缩放，在捏合操作结束时控制缩放倍数的值
                    this.limitScale(false);
                  })
              )
              // 根据isGesture的值来控制显隐
              .visibility(this.isGesture ? Visibility.Hidden : Visibility.Visible)
 
            Blank()
              .onClick(() => {
                this.controller.close();
              })
          }
          ...
        }, item => JSON.stringfy(item))
      }
      ...
      .onChange((index: number) => {
        // swiper滑动时记录切换的index
        this.curIndex = index;
      })
 
      Row() {
        // 根据切换的index显示对应的图片
        Image(this.introductionData.imageList[this.curIndex])
          .objectFit(ImageFit.Contain)
          // 控制图片缩放倍数
          .scale({ x: this.imgScale, y: this.imgScale }) 
          // 控制图片偏移值
          .translate({ x: this.imgOffsetX, y: this.imgOffsetY })
          .onComplete((event) => {
            this.imgWidth = event.width;
            this.imgHeight = event.height;
            // 根据图片宽高计算图片不缩放时的实际高度
            this.displayHeight = this.deviceWidth * this.imgHeight / this.imgWidth;
          })
      }
      .gesture(
        // 触发捏合手势
        PinchGesture()
          .onActionUpdate((event: GestureEvent) => {
            // 随着捏合操作的过程，逐渐调整图片缩放倍数
            this.imgScale = this.curScale * event.scale;
          })
          .onActionEnd(() => {
            // 为了避免图片偏移超出屏幕边界，检测到偏移值到达最大时停止继续偏移
            this.detectBoundary();
            // 为了避免图片无限缩放，在捏合操作结束时控制缩放倍数的值，并重置偏移值
            this.limitScale(true);
          })
      )
      .gesture(
        // 触发拖动手势
        PanGesture()
          .onActionStart(() => {
            // 记录先前的偏移值
            this.preOffsetX = this.imgOffsetX;
            this.preOffsetY = this.imgOffsetY;
          })
          .onActionUpdate((event: GestureEvent) => {
            // 随着拖动操作的过程，不断改变图片偏移值
            this.imgOffsetX = this.preOffsetX + event.offsetX;
            this.imgOffsetY = this.preOffsetY + event.offsetY;
          })
          .onActionEnd(() => {
            // 为了避免图片偏移超出屏幕边界，检测到偏移值到达最大时停止继续偏移
            this.detectBoundary();
          })
      )
      // 根据isGesture的值来控制显隐
      .visibility(this.isGesture ? Visibility.Visible : Visibility.Hidden)
    }
    ...
  }
}

七、小火车

// TrainsComponent.ets
build() {
  Navigation() {
    Column({ space: Const.TRAIN_SPACE }) {
      Image($r('app.media.ic_train_map'))
        .aspectRatio(Const.TRAIN_ASPECT_RATIO)
        .objectFit(ImageFit.Cover)
        .borderRadius(Const.TRAIN_BORDER_RADIUS)
 
      List({ space: Const.TRAIN_SPACE }) {
        ForEach(this.trainsMapData, (item: TrainsMap, index: number) => {
          ListItem() {
            Column({ space: Const.TRAIN_SPACE }) {
	      ...
              if (this.fetchShowMap(index)) {
                // 小火车运行轨迹组件
                TrainsTrack({ trainsInfo: this.trainsMapData[index], trainLine: index })
              }
            }
            ...
          }
        }, item => JSON.stringify(item))
      }
      .layoutWeight(1)
      .edgeEffect(EdgeEffect.None)
    }
    .padding({ left: Const.TRAIN_PADDING_LEFT, right: Const.TRAIN_PADDING_RIGHT })
    .height(Const.FULL_SIZE)
    .backgroundColor($r("app.color.train_background"))
  }
  .title(Const.TRAIN_TITLE)
  .titleMode(NavigationTitleMode.Full)
  .hideToolBar(true)
  .hideBackButton(true)
  .backgroundColor($r("app.color.train_background"))
}

// TrainsTrack.ets
build() {
  Stack() {
    // 小火车运行背景轨迹
    Canvas(this.context)
      .width(Const.FULL_SIZE)
      .aspectRatio(Const.CANVAS_ASPECT_RADIO)
      .borderRadius(Const.CANVAS_BORDER_RADIUS)
      .onReady(() => {
        ...
      })
 
    Image(Const.ARROW_URL)
      .width(Const.ARROW_WIDTH)
      .height(Const.ARROW_HEIGHT)
      .position({
        x: this.trainX + this.bgX - Const.ARROW_OFFSET_X,
        y: this.trainY + this.bgY - Const.ARROW_OFFSET_Y
      })
      .rotate({
        x: 0,
        y: 0,
        z: 1,
        angle: this.rotateAngle
      })
    
    // 小火车导航图
    Canvas(this.contextTrainLine)
      .width(Const.FULL_SIZE)
      .aspectRatio(Const.CANVAS_ASPECT_RADIO)
      .borderRadius(Const.CANVAS_BORDER_RADIUS)
      .onReady(() => {
        ...
      })
  }
}

// TrainsTrack.ets
aboutToAppear() {
  this.sumDistance = TrainsMapModel.calcDistance(this.trainsInfo.lineData);
  ...
}
// TrainsMapModel.ets
calcDistance(data: Position[]): number {
  let sumDistance: number = 0;
  const length = data.length;
  data.forEach((item: Position, index: number) => {
    const startX = item.x;
    const startY = item.y;
    const endX = index === length - 1 ? data[0].x : data[index + 1].x;
    const endY = index === length - 1 ? data[0].y : data[index + 1].y;
    if (Math.abs(startX - endX) >= Math.abs(startY - endY)) {
      sumDistance += Math.abs(startX - endX);
    } else {
      sumDistance += Math.abs(startY - endY);
    }
  })
  return sumDistance;
}

// TrainsMapModel.ets
travelDistance(distance: number, startTime: string, line: number): number {
  let ret: number = 0;
  const date = new Date();
  const dateStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} `;
  const startDate = new Date(dateStr + startTime).getTime();
  const currentDate = date.getTime();
  const diff = currentDate - startDate;
 
  switch (line) {
    case TrainsLine.LINE_ONE:
      ret = distance * (diff % (Const.LINE_ONE_TIME)) / (Const.LINE_ONE_TIME);
      break;
    case TrainsLine.LINE_TWO:
      ret = distance * (diff % (Const.LINE_TWO_TIME)) / (Const.LINE_TWO_TIME);
      break;
    case TrainsLine.LINE_THREE:
      ret = distance * (diff % (Const.LINE_THREE_TIME)) / (Const.LINE_THREE_TIME);
      break;
    default:
      ret = 0;
  }
  return Number(ret.toFixed(2));
}

// TrainsTrack.ets
calcFirstDistance(data: Position[], travelDistance: number) {
  let sumDistance: number = 0;
  const length = data.length;
 
  for (let index = 0;index < length; index++) {
    if (sumDistance > travelDistance) {
      this.currentIndex = index - 1;
      this.trainX = data[index - 1].x;
      this.trainY = data[index - 1].y;
      this.calcPosition(this.trainX, this.trainY, this.canvasWidth, this.canvasHeight);
      break;
    } else {
      const startX = data[index].x, startY = data[index].y;
      const endX = index === length - 1 ? data[0].x : data[index+1].x,
        endY = index === length - 1 ? data[0].y : data[index+1].y;
      if (Math.abs(startX - endX) >= Math.abs(startY - endY)) {
        sumDistance += Math.abs(startX - endX);
      } else {
        sumDistance += Math.abs(startY - endY);
      }
    }
  }
}

// TrainsMapModel.ets
calcDelay(distance: number, line: number): number {
  let ret: number = 0;
  switch (line) {
    case TrainsLine.LINE_ONE:
      ret = Const.LINE_ONE_TIME / distance;
      break;
    case TrainsLine.LINE_TWO:
      ret = Const.LINE_TWO_TIME / distance;
      break;
    case TrainsLine.LINE_THREE:
      ret = Const.LINE_THREE_TIME / distance;
      break;
    default:
      ret = 0;
  }
  return ret;
}
 

// TrainsTrack.ets
drawTrainPosition() {
  if (Math.abs(this.trainX - this.positionEnd.x) <= Const.AVERAGE_ERROR &&
  Math.abs(this.trainY - this.positionEnd.y) <= Const.AVERAGE_ERROR) {
    this.trainX = this.positionEnd.x;
    this.trainY = this.positionEnd.y;
    if (this.currentIndex === this.trainsInfo.lineData.length - 2) {
      this.currentIndex = 0;
    } else {
      this.currentIndex += 1;
    }
  }
  this.positionStart = this.trainsInfo.lineData[this.currentIndex];
  this.positionEnd = this.trainsInfo.lineData[this.currentIndex + 1];
  this.rotateAngle = Const.BASIC_ROTATE_ANGLE + TrainsMapModel.fetchDirection(this.positionStart.x, this.positionStart.y, this.positionEnd.x, this.positionEnd.y);
 
  this.contextTrainLine.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  this.trainX += TrainsMapModel.fetchRatioX(this.positionStart, this.positionEnd);
  this.trainY += TrainsMapModel.fetchRatioY(this.positionStart, this.positionEnd);
  this.calcPosition(this.trainX, this.trainY, this.canvasWidth, this.canvasHeight);
  this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  this.context.drawImage(this.trainsInfo.imgBg, this.bgX, this.bgY, Const.CANVAS_WIDTH, Const.CANVAS_HEIGHT);
  this.contextTrainLine.drawImage(
    this.imgTrain,
    this.trainX + this.bgX - Const.TRAIN_OFFSET_X,
    this.trainY + this.bgY - Const.TRAIN_OFFSET_Y,
    Const.TRAIN_WIDTH,
    Const.TRAIN_HEIGHT
  );
  this.contextTrainLine.drawImage(
    this.imgCircle,
    this.trainX + this.bgX - Const.CIRCLE_OFFSET_X,
    this.trainY + this.bgY - Const.CIRCLE_OFFSET_Y,
    Const.CIRCLE_WIDTH,
    Const.CIRCLE_HEIGHT
  );
} 
 
build() {
  Stack() {
    ...
    Canvas(this.contextTrainLine)
      .width(Const.FULL_SIZE)
      .aspectRatio(Const.CANVAS_ASPECT_RADIO)
      .borderRadius(Const.CANVAS_BORDER_RADIUS)
      .onReady(() => {
        ...
        setInterval(() => {
          this.drawTrainPosition();
        }, this.delay)
      })
  }
}

// TrainsMapModel.ets
fetchRatioX(start: Position, end: Position): number {
  let diffX = start.x - end.x;
  let diffY = start.y - end.y;
  if (Math.abs(diffX) >= Math.abs(diffY)) {
    return -diffX / Math.abs(diffX);
  } else {
    return -Number((diffX / Math.abs(diffY)).toFixed(2));
  }
}
 
fetchRatioY(start: Position, end: Position): number {
  let diffX = start.x - end.x;
  let diffY = start.y - end.y;
  if (Math.abs(diffY) >= Math.abs(diffX)) {
    return -diffY / Math.abs(diffY);
  } else {
    return -Number((diffY / Math.abs(diffX)).toFixed(2));
  }
}