KnitFlow/assets/scripts/Component/ProcessBar.ts

import { _decorator, CCFloat, Component, Node, Sprite, UITransform } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ProcessBar')
export class ProcessBar extends Component {
   // 进度条
   @property(Sprite)
   processBar = null;
   //  跟随进度条的Node
   @property(Node)
   followNode = null

   // 记录开始坐标
   startPostiton_x = null;
   // 记录进度条总长
   barSize = null
   padding =0

   init(prcent?,padding=0) {
      // // 进度条
      this.padding = padding
      this.initProcessBar(prcent);
   }
   initProcessBar(ratio?: number) {
      ratio = ratio || 0;
      let sprite = this.processBar;

      sprite.fillRange = ratio;
      // 根据比率初始化x坐标一般(0,0)是中心点
      let position = this.processBar.node.parent.position
      // 获取进度条宽度
      let uit: UITransform = this.processBar.getComponent(UITransform)

      let contentSize = uit.contentSize;
      // y坐标调好了，不需要动态生成，只需要计算x的偏移量，默认x - contentSize/2
      let offSet_x = position.x - (contentSize.width * uit.anchorX)+this.padding;
      this.startPostiton_x = offSet_x;
      this.barSize = contentSize.width - 2*this.padding;

   }

   getFollowPostion_x() {
      return this.startPostiton_x + this.barSize * this.processBar.fillRange;
   }

   // @property(CCFloat)
   // set ratio (ratio:number){
   //    this._ratio = ratio
   //    this.init(0, 35)
   //    this.set(ratio)
   // }

   // // @property(CCFloat)
   // get ratio (){
   //    return this._ratio
   // }
   // @property(CCFloat)
   // _ratio:number
 

   set(ratio: number) {
      ratio = Math.min(ratio, 1)
      ratio = Math.max(ratio, 0)
      this.processBar.fillRange = ratio;
      //  // 实际x坐标
      if (this.followNode) {
         // let real_x = this.startPostiton_x + this.barSize * ratio;
         this.followNode?.setPosition(this.getFollowPostion_x(), this.followNode.position.y)
      }

   }
   getFollowNodeW_Pos(){
      return this.followNode?.worldPosition
   }

   // getFollowPosByRatio(ratio){

   // }






}