Harmony 复杂图形自绘制

1.制作图形绘制控件：

  build(){
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
      Canvas(this.context)
        .width(Const.FULL_PERCENT)
        .height(Const.FULL_PERCENT)
        .backgroundColor($r('app.color.shot_lib_background'))
        .onReady(() =>{
          this.intervalId = setInterval(()=>this.drawCanvas(),REFLESH_INTERVAL)

        })
    }
    .width(Const.FULL_PERCENT).height(Const.FULL_PERCENT)
  }

其中的计时器刷新，请参照《Harmony Timer计时器》

2.完成drawCanvas()函数

  drawCanvas()
  {
    this.TotalScore = 0;
    this.setBaStyle(this.shotBaStyle);



    this.PaintContent();
    this.DrawBullets();

    this.DrawPlain();
  }


PaintContent(){
    //暂不使用离屏渲染
    // //可以在这里绘制内容
    // this.offContext.strokeRect(50, 50, 200, 150);
    // //将离屏绘值渲染的图像在普通画布上显示
    // let image = this.offContext.transferToImageBitmap();
    // this.context.transferFromImageBitmap(image);
    hilog.info(0x0000,'TestTag','sdfsdf')
    let context1 = this.context;
    let width = this.context.width;
    let height = this.context.height;

    context1.clearRect(0,0,width,height)
    context1.save()
    let centerx = width/2.0;
    let centery = height/2.0;
    function R3(input:number):number{
    return input/54.0;
    }

    let rad_i=0;
    if(this.shotBaStyle === 0)
    {
      rad_i = this.imgWidth/10;
      this.m_Rad_i = rad_i;

      this.drawImgLeft = centerx-R3(250)*rad_i;
      this.drawImgBottom = centery+R3(250)*rad_i;
      this.drawImgWidth = 500;
      this.drawImgHeight = 500;


      context1.fillStyle = '#0b460d';
      //this.context.fillRect(centerx-R3(100)*rad_i,centery-R3(100)*rad_i,R3(200)*rad_i,R3(200)*rad_i);
      let region1 = new Path2D();
      region1.moveTo(centerx-R3(250)*rad_i,centery+R3(8.82)*rad_i);
      region1.lineTo(centerx-R3(250)*rad_i,centery+R3(250)*rad_i);

      region1.lineTo(centerx+R3(250)*rad_i,centery+R3(250)*rad_i);
      region1.lineTo(centerx+R3(250)*rad_i,centery+R3(8.82)*rad_i);

      region1.lineTo(centerx+R3(108.87)*rad_i,centery-R3(68.28)*rad_i);
      region1.lineTo(centerx+R3(116.5)*rad_i,centery-R3(113.7)*rad_i);
      let r = R3(183.23)*rad_i;
      region1.arc(centerx,centery-R3(66.55)*rad_i,r,(270+33)/180*Math.PI,(270-33)/180*Math.PI,true);

      region1.lineTo(centerx-R3(116.5)*rad_i,centery-R3(113.7)*rad_i);
      region1.lineTo(centerx-R3(108.87)*rad_i,centery-R3(68.28)*rad_i);

      region1.closePath();
      context1.fill(region1)
      context1.clip(region1);
      context1.strokeStyle ='#ffffff';
      context1.lineWidth = rad_i*R3(2);
      let region2 = new Path2D();
      r = R3(300)*rad_i;
      region2.arc(centerx,centery+R3(50.3)*rad_i,r,0,2*Math.PI);
      context1.stroke(region2);

      let region3 = new Path2D();
      r = R3(250)*rad_i;
      region3.arc(centerx,centery+R3(50.3)*rad_i,r,0,2*Math.PI);
      context1.stroke(region3);

      let region4 = new Path2D();
      r = R3(200)*rad_i;
      region4.arc(centerx,centery+R3(50.3)*rad_i,r,0,2*Math.PI);
      context1.stroke(region4);

      let region5 = new Path2D();
      r = R3(200)*rad_i;
      region5.arc(centerx,centery+R3(50.3)*rad_i,r,0,2*Math.PI);
      context1.stroke(region5);

      let region6 = new Path2D();
      r = R3(150)*rad_i;
      region6.arc(centerx,centery+R3(50.3)*rad_i,r,0,2*Math.PI);
      context1.stroke(region6);

      let region7 = new Path2D();
      r = R3(100)*rad_i;
      region7.arc(centerx,centery+R3(50.3)*rad_i,r,0,2*Math.PI);
      context1.stroke(region7);

      let region8 = new Path2D();
      r = R3(50)*rad_i;
      region8.arc(centerx,centery+R3(50.3)*rad_i,r,0,2*Math.PI);
      context1.fillStyle='#ffffff';
      context1.fill(region8);
      context1.textAlign = 'left';
      context1.textBaseline='middle';
      context1.font = fp2px(R3(30)*rad_i)+'px sans-serif';
      let label = '10';
      //let textwidth = context1.measureText(label).width;
      //let label1 = ''+this.shotposList.length//
      let posx = centerx - R3(18)*rad_i;
      let posy = centery + R3(53)*rad_i;
      context1.fillStyle = '#000000';
      context1.fillText(label,posx,posy);

      context1.fillStyle = '#ffffff';
      for(let i=0; i<4; i++)
      {
        label = ''+(9-i);
        posx = centerx - R3(18)*rad_i  - R3(20)*rad_i - (i+1)*R3(50)*rad_i;
        context1.fillText(label,posx,posy);
        posx = centerx - R3(18)*rad_i  + R3(30)*rad_i + (i+1)*R3(50)*rad_i;
        context1.fillText(label,posx,posy);
      }
    }
}

3.控件中的参数定义以及参数初始化

  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  //用来创建OffscreenCanvasRenderingContext2D对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
  private offContext: OffscreenCanvasRenderingContext2D = null;

  private canvasWidth:number = 0;
  private canvasHeight:number = 0;
  private imgWidth:number = 0;
  private imgHeight:number = 0;
  private imgRect:ImgRect = new ImgRect(0,0,0,0);


  private drawImgLeft:number = 0;
  private drawImgBottom:number = 0;
  private drawImgWidth:number = 0;
  private drawImgHeight:number = 0;
  private m_Rad_i:number = 0;
  private TotalScore:number = 0;
  private CurrentScore:number = 0;

  @Consume BarId:number;
  @Consume shotBaStyle:number;
  @Consume bulletType:number;
  @Consume shotposList:Array<ShotPosItem>;
  @Consume onLine:number;

  private intervalId:number = 0;

  setBaStyle(_baStyle:number)
  {
    let width = this.context.width;
    let height  = this.context.height;
    let ratio = 1;
    if(_baStyle === 0)
    {
      ratio = 1;
    }else if(_baStyle === 1)
    {
      ratio = 1;
    }
    else if(_baStyle === 2)
    {
      ratio = 1/2.0;
    }



    let _imgWidth = 0;
    let _imgHeight = 0;
    _imgHeight = width/ratio;
    if(_imgHeight<height)
    {
      _imgWidth = width*0.98;
      _imgHeight = _imgHeight*0.98;
      this.imgRect.left = 0;
      this.imgRect.right = width;
      this.imgRect.top = (height-_imgHeight)/2;
      this.imgRect.bottom = height-(height-_imgHeight)/2;
    }
    else
    {
      _imgHeight = height*0.98;
      _imgWidth = height*0.98*ratio;
      this.imgRect.left = (width-_imgWidth)/2;
      this.imgRect.right = width-(width-_imgWidth)/2;
      this.imgRect.top = 0;
      this.imgRect.bottom = height;
    }

    this.imgWidth = _imgWidth as number;
    this.imgHeight = _imgHeight as number;

    // let width1 = this.imgWidth;
    // let height1  = this.imgHeight;
    // hilog.info(0x0000,'TestTag',"info width:"+width1+"  height:"+height1);
    // this.offContext = new OffscreenCanvasRenderingContext2D(width1, height1, this.settings)

  }