????國慶節(jié)馬上就要到了拉庵，為了慶祝偉大祖國的生日冈涧，現(xiàn)在朋友圈的各位大佬們也都更新了社交的頭像碰煌，漸變色的紅旗相當(dāng)有格調(diào)，今天小菜通過 Flutter 方式自定義一個(gè)簡單的漸變國旗頭像舌镶；

ACEStarPage

1. 國旗范圍及輔助線

????首先繪制國旗是一件非常嚴(yán)肅的事情柱彻，小菜特意在維基百科上查詢了官方國旗的介紹，也算是增加了一些知識點(diǎn)餐胀；

• 先將旗面劃分為 4 個(gè)等分長方形哟楷，再將左上方長方形劃分長寬 15×10 個(gè)方格；
• 大五角星的中心位于該長方形上 5 下 5否灾、左 5 右 10 之處卖擅。大五角星外接圓的直徑為 6 單位長度；
• 四顆小五角星的中心點(diǎn)，第一顆位于上 **2 下 8惩阶、左 10 右 5挎狸，第二顆位于上 4 下 6、左 12 右 3断楷，第三顆位于上 7 下 3锨匆、左 12 右 3，第四顆位于上 9 下 1冬筒、左 10 右 5 之處恐锣；
• 每顆小五角星外接圓的直徑均為 2 單位長度。四顆小五角星均有一角尖正對大五角星的中心點(diǎn)舞痰；
• 中央政府網(wǎng)站上的國旗用顏色分別是 #DE2910 和 #FFDE00土榴；
  

????頭像一般是正方形，小菜預(yù)先將正方形頭像區(qū)域水平豎直方向分割為 30 份响牛，其中橙色左上角區(qū)域?yàn)閲炖L制范圍玷禽；

_drawLines(canvas, size) {
  Path _path = Path();
  for (int i = 0; i < size.height / _subWidth + 1; i++) {
    _path.moveTo(0, _subWidth * i);
    _path.lineTo(size.width, _subWidth * i);
  }
  for (int i = 0; i < size.width / _subWidth + 1; i++) {
    _path.moveTo(_subWidth * i, 0);
    _path.lineTo(_subWidth * i, size.height);
  }
  canvas.drawPath(_path, _paint);
  
  Path _path2 = Path();
  _path2.moveTo(size.width / 4 * 3, 0);
  _path2.lineTo(size.width / 4 * 3, size.height);
  _path2.moveTo(0, size.height / 2);
  _path2.lineTo(size.width, size.height / 2);
  canvas.drawPath(
      _path2, _paint..color = Colors.deepOrange..strokeWidth = 1.0);
}

2. 確定五角星位置

????根據(jù)第一步規(guī)則和繪制好的輔助線，確定五角星位置與尺寸呀打，小菜繪制了幾個(gè)空心圓來輔助定位矢赁；

_drawCircle(canvas) {
  canvas.drawCircle(
      Offset(5 * _subWidth, 5 * _subWidth),
      3 * _subWidth,
      _paint..color = Colors.deepOrange..strokeWidth = 1);
  canvas.drawCircle(
      Offset(10 * _subWidth, 2 * _subWidth),
      _subWidth,
      _paint..color = Colors.deepOrange..strokeWidth = 1);
  canvas.drawCircle(
      Offset(12 * _subWidth, 4 * _subWidth),
      _subWidth,
      _paint..color = Colors.deepOrange..strokeWidth = 1);
  canvas.drawCircle(
      Offset(12 * _subWidth, 7 * _subWidth),
      _subWidth,
      _paint..color = Colors.deepOrange..strokeWidth = 1);
  canvas.drawCircle(
      Offset(10 * _subWidth, 9 * _subWidth),
      _subWidth,
      _paint..color = Colors.deepOrange..strokeWidth = 1);
}

3. 繪制五角星

????對于五角星的繪制相對復(fù)雜一些，小菜采用了最基本的 Canvas 的 drawPath 方式繪制一個(gè)封閉的五角星聚磺，其中每個(gè)角為 36 度坯台；然后配合 dart.math 中三角函數(shù)進(jìn)行各個(gè)點(diǎn)位的確定炬丸，這個(gè)是單純的數(shù)學(xué)計(jì)算瘫寝，小菜不做深入討論，只是優(yōu)先繪制五角星稠炬；

_drawStar(canvas, radius, rotate) {
  Path _path = new Path();
  double moveToX = radius + math.cos(math.pi / 10) * radius;
  double moveToY = radius - math.sin(math.pi / 10) * radius;
  _path.moveTo(moveToX, moveToY);
  _path.lineTo(radius + math.cos(math.pi * 9 / 10) * radius,
      radius - math.sin(math.pi * 9 / 10) * radius);
  _path.lineTo(radius + math.cos(math.pi * 17 / 10) * radius,
      radius - math.sin(math.pi * 17 / 10) * radius);
  _path.lineTo(radius + math.cos(math.pi * 5 / 10) * radius,
      radius - math.sin(math.pi * 5 / 10) * radius);
  _path.lineTo(radius + math.cos(math.pi * 13 / 10) * radius,
      radius - math.sin(math.pi * 13 / 10) * radius);
  _path.close();
  
  canvas.drawPath(
      _path, _paint..style = PaintingStyle.fill..color = Color(0xFFFFDE00));
}

????小菜在繪制過程是焕阿，起始位置做了一個(gè)平移，因此展示是在左上角位置首启，為了平移至各個(gè)位置暮屡，并且為了后期角度旋轉(zhuǎn)方便，小菜在繪制時(shí)先將位置平移至左上角笛卡爾坐標(biāo)系原點(diǎn)毅桃，在進(jìn)行五角星繪制褒纲；繪制完成之后再通過 translate() 平移至各個(gè)圓心位置；

_drawStar(canvas, radius, rotate) {
    ...
    canvas.translate(-radius, -radius);
    canvas.drawPath(
      _path, _paint..style = PaintingStyle.fill..color = Color(0xFFFFDE00));
    canvas.translate(radius, radius);
}

_drawAllStar(canvas) {
  canvas.translate(5 * _subWidth, 5 * _subWidth);
  _drawStar(canvas, _subWidth * 3, 0.0);
  canvas.translate(-5 * _subWidth, -5 * _subWidth);

  canvas.translate(10 * _subWidth, 2 * _subWidth);
  _drawStar(canvas, _subWidth, math.pi * (math.atan(3 / 5)));
  canvas.translate(-10 * _subWidth, -2 * _subWidth);

  canvas.translate(12 * _subWidth, 4 * _subWidth);
  _drawStar(
      canvas, _subWidth, math.pi * (math.atan(1 / 7)) + math.pi * 5 / 10);
  canvas.translate(-12 * _subWidth, -4 * _subWidth);

  canvas.translate(12 * _subWidth, 7 * _subWidth);
  _drawStar(
      canvas, _subWidth, math.pi * (math.atan(2 / 7)) + math.pi * 5 / 10);
  canvas.translate(-12 * _subWidth, -7 * _subWidth);

  canvas.translate(10 * _subWidth, 9 * _subWidth);
  _drawStar(canvas, _subWidth, math.pi * (math.atan(3 / 5)));
  canvas.translate(-10 * _subWidth, -9 * _subWidth);
}

_drawStar(canvas, radius, rotate) {
    ...
    canvas.rotate(rotate);
    canvas.translate(-radius, -radius);
    canvas.drawPath(
      _path, _paint..style = PaintingStyle.fill..color = Color(0xFFFFDE00));
    canvas.translate(radius, radius);
    canvas.rotate(-rotate);
}

4. 漸變色國旗

????接下來就是對漸變色國旗的繪制，小菜去掉輔助線扎附，再通過之前常用的 ShaderMask 著色器進(jìn)行處理蔫耽，從左上角到右下角一個(gè)漸變透明度的設(shè)置即可；

_flagWid() => ShaderMask(
    shaderCallback: (rect) => LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Colors.white, Colors.white.withOpacity(0.0)],
          stops: [0.2, 0.8],
        ).createShader(rect),
    child: Container(
        width: 300,
        color: Color(0xFFDE2910),
        height: 300,
        child: CustomPaint(painter: ACEStarPainter())));

5. 添加頭像

????最后將頭像通過 Stack 疊加進(jìn)來即可留夜，為了優(yōu)化顯示效果针肥，通過 **** 設(shè)置一個(gè)圓角；至此小菜自定義國旗漸變頭像就基本完成了香伴；

PhysicalModel(
  color: Colors.transparent,
  shape: BoxShape.rectangle,
  clipBehavior: Clip.antiAlias,
  elevation: 6.0,
  borderRadius: BorderRadius.all(Radius.circular(20.0)),
  child: Stack(children: [
    Container(
        width: 300, height: 300,
        child: Image.asset('images/icon_panda.jpeg')),
    _flagWid()
  ]))

????ACEStarPage 案例源碼

????整個(gè)國旗漸變色頭像繪制相對簡單慰枕，各個(gè)技術(shù)點(diǎn)小菜之前都有過介紹，其中透明度也可以隨需求自由調(diào)整即纲；如有錯(cuò)誤具帮，請多多指教！

????祝大家國慶節(jié)快樂低斋！

來源： 阿策小和尚