自定义组件之绘制折线图和曲线图

  //绘制坐标系的画笔 
  private mPaintCdt:Paint = new Paint(); 
  //绘制坐标系上刻度点的画笔 
  private mPaintSysPoint:Paint = new Paint(); 
  //绘制折线上的点的画笔 
  private mPaintLinePoint:Paint = new Paint(); 
  //绘制文字的画笔 
  private mPaintText:Paint = new Paint(); 
  //绘制折线的画笔 
  private mPaintLine:Paint = new Paint(); 
  //绘制虚线的画笔 
  private mPaintDash:Paint = new Paint(); 
  //x,y轴的画笔 
  private mPaintSys:Paint = new Paint(); 
  //绘制覆盖区域 
  private mPaintFillArea:Paint = new Paint(); 
//初始化画笔 
  initPaint() { 
    //绘制坐标系的画笔 
    this.mPaintCdt.setStrokeWidth(this.brokenLineSize); 
    this.mPaintCdt.setColor(this.brokenLineColor); 
  
    //绘制远点颜色 
    this.mPaintLinePoint.setColor(this.brokenLineColor); 
  
    //绘制坐标系上刻度点的画笔 
    this.mPaintSysPoint.setColor(this.coordinateSystemColor) 
  
    //x轴与y轴绘制画笔 
    this.mPaintSys.setStrokeWidth(this.coordinateSystemSize) 
    this.mPaintSys.setColor(this.coordinateSystemColor) 
  
    this.mPaintText.textAlign = 'center'; 
    this.mPaintText.strokeStyle = Color.White; 
    this.mPaintText.font = '40px sans-serif' 
  
    this.mPaintLine.lineWidth = this.brokenLineSize; 
    this.mPaintLine.strokeStyle = this.brokenLineColor; 
  
    //绘制虚线的画笔 
    this.mPaintDash.lineWidth = this.dashSize; 
    this.mPaintDash.strokeStyle = this.dashColor; 
  
    //填充区域颜色 
    this.mPaintFillArea.strokeStyle = Color.Yellow; 
    this.mPaintFillArea.lineWidth = this.brokenLineSize; 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Canvas(this.context) 
        .width('100%') 
        .height('40%') 
        .margin({top:10}) 
        .backgroundColor(Color.Blue) 
        .onReady(() => { 
          this.onDraw(); 
        }) 
    } 
    .width('100%') 
    .height('100%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

  setCharPoints(points:List<number>) { 
    this.pointList = new List(); 
    points.forEach((value,index)=> { 
      let point = new Point(); 
      point.x = index; 
      point.y = value; 
      this.pointList.add(point); 
    }) 
  
    //x轴传入的最大坐标 
    this.maxX = this.pointList.length; 
    //Y轴最大坐标 
    this.maxY = 40; 
  
    console.info('points.length =='+this.maxX) 
    //默认x有6格,y有4格 
    this.xScale = this.maxX /6; 
    this.yScale = this.maxY / 4; 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

  //绘制前准备 
  getWidthAndHeight(){ 
    this.mViewHeight = this.context.height; 
    this.mViewWidth = this.context.width; 
    //x轴上需要绘制的刻度个数 
    let numX = this.maxX / this.xScale; 
    //每格的宽度 
    this.everXWidth = (this.mViewWidth - this.marginSize *2) / numX; 
    //y轴上需要绘制的刻度个数 
    let numY = this.maxY / this.yScale; 
    //每隔的高度 
    this.everyYHeight = (this.mViewHeight - this.marginSize * 2) /numY; 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

 //绘制X轴Y周以及圆点 
  drawCoordinate() { 
    //绘制线 
    let mStrokePath:DrawStrokePath = new DrawStrokePath(); 
    mStrokePath.paint = this.mPaintSys; 
    mStrokePath.path = new Path2D(); 
    //绘制远点 
    mStrokePath.path.moveTo(this.marginSize,this.mViewHeight-this.marginSize) 
    mStrokePath.path.lineTo(this.marginSize,5); 
  
    mStrokePath.path.moveTo(this.marginSize,this.mViewHeight-this.marginSize) 
    mStrokePath.path.lineTo(this.mViewWidth - 5, this.mViewHeight - this.marginSize); 
    mStrokePath.draw(this.context) 
  
    //绘制原点 
    let mCircleFillPath:DrawFillPath = new DrawFillPath(); 
    mCircleFillPath.paint = this.mPaintSysPoint; 
    mCircleFillPath.path = new Path2D(); 
    mCircleFillPath.path.arc(this.marginSize, this.mViewHeight-this.marginSize, this.SystemPointRadius, 0, 6.28) 
    mCircleFillPath.draw(this.context) 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

 //然后绘制坐标系上x,y轴刻度标记和小圆点 
  drawCalibration() { 
    //x轴上的点 
    let mCircleFillPath:DrawFillPath = new DrawFillPath(); 
    let mDrawTextPath:DrawTextPath = new DrawTextPath(); 
    mDrawTextPath.paint = this.mPaintText; 
    mCircleFillPath.paint = this.mPaintSysPoint; 
    console.info('everXWidth ==' + this.everXWidth) 
    //绘制X轴的点 
    for (let index = 0; index < this.pointList.length; index++) { 
      mCircleFillPath.path = new Path2D(); 
      mCircleFillPath.path.arc(this.marginSize +index*this.everXWidth, this.mViewHeight-this.marginSize, this.SystemPointRadius, 0, 6.28) 
      mCircleFillPath.draw(this.context); 
      //绘制地下文本 
      mDrawTextPath.point = new Point(); 
      mDrawTextPath.text = this.mXaxisList.get(index-1); 
      mDrawTextPath.point.x = this.marginSize +index*this.everXWidth; 
      mDrawTextPath.point.y = this.mViewHeight-this.marginSize+this.textMarginSize; 
      mDrawTextPath.draw(this.context); 
    } 
  
    //绘制Y轴的点 
    for (let index = 0; index < this.mYaxisList.length; index++) { 
      mCircleFillPath.path = new Path2D(); 
      mCircleFillPath.path.arc(this.marginSize, this.mViewHeight-this.marginSize -  index * this.everyYHeight, this.SystemPointRadius, 0, 6.28) 
      mCircleFillPath.draw(this.context) 
  
      mDrawTextPath.point = new Point(); 
      mDrawTextPath.text = this.mYaxisList.get(index).toString(); 
      mDrawTextPath.point.x = this.marginSize - this.textMarginSize +4; 
      mDrawTextPath.point.y = this.mViewHeight-this.marginSize - index * this.everyYHeight; 
      mDrawTextPath.draw(this.context); 
    } 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

  /** 
   * 绘制折线 
   * 计算绘制点的坐标位置 
   * 绘制点的坐标 =  (传入点的的最大的x，y坐标/坐标轴上的间隔） * 坐标间隔对应的屏幕上的间隔 
   */ 
  drawBrokenLine() { 
    //x轴表示月份，数据统计从一月份开始，0月份数据为零 
    let zeroPoint = new Point(); 
    zeroPoint.x = this.marginSize + this.pointList[0].x/this.xScale * this.everXWidth; 
    zeroPoint.y =  this.mViewHeight-this.marginSize - this.pointList[0].y / this.yScale * this.everyYHeight; 
    //绘制线 
    let mStrokePath:DrawStrokePath = new DrawStrokePath(); 
    mStrokePath.paint = this.mPaintLine; 
    mStrokePath.path = new Path2D(); 
    mStrokePath.path.moveTo(zeroPoint.x,zeroPoint.y) 
    let mCircleFillPath:DrawFillPath = new DrawFillPath(); 
    mCircleFillPath.paint = this.mPaintLinePoint 
  
    for (let index = 1; index < this.mAnimatorValue; index++) { 
      var pointX = this.pointList[index].x * this.everXWidth; 
      var pointY = this.pointList[index].y /this.yScale * this.everyYHeight; 
      console.info('LineCharView pointX ==' + pointX + "and pointY ==" + pointY + "x:=="+this.pointList[index].x + "y: ==" + this.pointList[index].y) 
      let endx = this.marginSize + pointX; 
      let endy = this.mViewHeight - this.marginSize - pointY; 
      mStrokePath.path.lineTo(endx,endy); 
      //绘制圆点 
      mCircleFillPath.path = new Path2D(); 
      mCircleFillPath.path.arc(endx, endy, this.SystemPointRadius, 0, 6.28) 
      mCircleFillPath.draw(this.context) 
    } 
    mStrokePath.draw(this.context) 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

 /** 
   * 曲线我是采用的三阶贝赛尔曲线进行绘制的,先取前后两个点的x的中点,设置给两个额外点的x值,两个额外点的y值分别设置为两个点的y值 
   */ 
  drawCurve() { 
    let zeroPoint = new Point(); 
    zeroPoint.x = this.marginSize + this.pointList[0].x/this.xScale * this.everXWidth; 
    zeroPoint.y =  this.mViewHeight-this.marginSize - this.pointList[0].y / this.yScale * this.everyYHeight; 
    //绘制线 
    let mStrokePath:DrawStrokePath = new DrawStrokePath(); 
    mStrokePath.paint = this.mPaintLine; 
    mStrokePath.path = new Path2D(); 
    mStrokePath.path.moveTo(zeroPoint.x,zeroPoint.y) 
    let mDrawFillPath:DrawFillPath = new DrawFillPath(); 
    mDrawFillPath.paint = this.mPaintFillArea; 
    mDrawFillPath.path = new Path2D(); 
    let mCircleFillPath:DrawFillPath = new DrawFillPath(); 
    mCircleFillPath.paint = this.mPaintLinePoint 
  
    if(this.fillArea) { 
      mDrawFillPath.path.moveTo(this.marginSize, this.mViewHeight - this.marginSize) 
      mDrawFillPath.path.lineTo(zeroPoint.x, zeroPoint.y) 
    } 
    for (let index = 0; index < this.mAnimatorValue -1; index++) { 
      var startX = this.pointList[index].x * this.everXWidth; 
      var startY = this.pointList[index].y /this.yScale * this.everyYHeight; 
      let startPx = this.marginSize + startX; 
      let startPy = this.mViewHeight - this.marginSize - startY; 
      var endX = this.pointList[index+1].x * this.everXWidth; 
      var endY = this.pointList[index + 1].y /this.yScale * this.everyYHeight; 
      let endPx = this.marginSize + endX; 
      let endPy = this.mViewHeight - this.marginSize - endY; 
      let wt = (startPx+ endPx) / 2; 
      mStrokePath.path.bezierCurveTo(wt,startPy,wt,endPy,endPx, endPy); 
      //是否绘制填充区域 
      if(this.fillArea) { 
        this.context.fillStyle = Color.Yellow 
        mDrawFillPath.path.lineTo(startPx, startPy) 
        mDrawFillPath.path.bezierCurveTo(wt,startPy,wt,endPy,endPx, endPy); 
        mDrawFillPath.path.lineTo(endPx,this.mViewHeight - this.marginSize); 
        if(index == this.mAnimatorValue -2 ) { 
          mDrawFillPath.path.closePath(); 
        } 
        console.info('LineCharView this.mAnimatorValue ==' + this.mAnimatorValue); 
      } 
      mDrawFillPath.draw(this.context) 
  
      //绘制圆点 
      mCircleFillPath.path = new Path2D(); 
      mCircleFillPath.path.arc(endPx, endPy, this.SystemPointRadius, 0, 6.28) 
      mCircleFillPath.draw(this.context) 
    } 
    mStrokePath.draw(this.context) 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.

 private initAnimator(maxX: number) { 
    let options:AnimatorOptions = { 
      duration: 1500, 
      easing: "friction", 
      delay: 0, 
      fill: "forwards", 
      direction: "normal", 
      iterations: 2, 
      begin: 0, 
      end:maxX 
    }; 
    this.valueAnimator = Animator.create(options) 
    this.valueAnimator.onframe = (value:number)=> { 
      this.mAnimatorValue = value; 
    } 
    this.valueAnimator.play(); 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.