Flutter【繪制】制作一個掘金Logo組件

掘金logo

掘金官方使用的logo從網頁上看到是個svg文件,官方掘金logo,點擊去可以看到logo和文字都是些path標簽。

svg的原理也是通過路徑繪制出來的圖形,和Flutter路徑繪制原理相似,同樣可以繪制出任何平面圖形,了解svg相關知識,可以看看張老師的svg解析:【Flutter 繪制番外】svg 文件與繪制 (上)。

為了鞏固下Flutter繪制的相關知識,今天我們就用Flutter路徑從頭開始制作封裝一個掘金的logo組件, 掘金的logo看起來很簡單,但是其中還是涉及到了很多繪制以及三角函數的知識的。

繪制菱形

首先我們可以看到掘金最上面是一個菱形,通過量角器測得掘金logo的角度大約為100°,那么菱形的上下角度也就為100°。

為了封裝的通用性,我們設菱形的邊長為side,菱形上方一半的角度為angle= 50°,根據三角函數就可以得到菱形的四個坐標點,通過path路徑進行鏈接。
代碼:

double angle = pi / 18* 5;
// 菱形邊長
double side = 50;
Paint paint = Paint()
  ..style = PaintingStyle.fill
  ..isAntiAlias = true
  ..strokeJoin= StrokeJoin.miter
   ..color = Color(0xff1E80FF).withOpacity(0.7);

// 頂部菱形
Path path = Path();
path.moveTo(-side * sin(angle), 0);
path.lineTo(0, -side * cos(angle));
path.lineTo(side * sin(angle), 0);
path.lineTo(0, side * cos(angle));
path.close();
canvas.drawPath(path, paint);

就可以得到以下效果,設置透明度為了下面計算效果可以看的更加直觀。

繪制折線

接下來繪制菱形下方的折線,折線我們使用非填充畫筆來實現,首先掘金的logo整體關于y軸對稱,角度一致,關鍵要計算折線之間與菱形的距離,首先我們知道菱形四個點的坐標,那么最下面的坐標就是(0, side * cos(angle));, 根據掘金logo的設計,折線的寬度大約為菱形邊長的0.7倍,所以這里我們暫設畫筆的寬度為double paintWidth = side * 0.7;,y軸折線中心點距離菱形底部的距離為下圖紅線部分,這個距離大約為菱形邊長的1.5倍。

左右連接

代碼:

Path path2 = Path();
// 原點距離下方折線中心y軸距離
double h1 = side * cos(angle) + side * 1.5;
path2.moveTo(-h1 * tan(angle), 0);
path2.lineTo(0, h1);
path2.lineTo(h1 * tan(angle), 0);
canvas.drawPath(path2, paint);

接下來繪制最下面的折線,這里為了讓兩條折線之間距離一致,我們需要計算出下圖c點坐標,下圖中b是中點,那么ab=bc,求出ab的長度也就知道c點的坐標了,過a點做bd垂直線交點設為g,那么已知ag等于線寬的1/2,角abg= angle°;,就能得出ab的長度 ab = paintWidth / 2 / sin(angle);,那么也就得到c點坐標=(0, h1+ab);

那么折線之間的距離也就可以算出來了。
代碼:

Path path3 = Path();
double h2 = h1 +
    (paintWidth / 2 / sin(angle) + side * 1.5);
path3.moveTo(-h2 * tan(angle), 0);
path3.lineTo(0, h2);
path3.lineTo(h2 * tan(angle), 0);

效果:

裁剪

上方大致畫出來了效果,接下來需要進行對畫布進行裁剪成以下陰影效果,主要就是計算b點和d點的坐標,涉及到兩條直線的交點和三角函數。

首先a點的值可以通過兩條相交直線求交點公式可以得出,然后過b點做紅線的中垂線先計算出ab的值,已知bd = paintWidth / 2,角bad = 180°-100°=80°,那么就可以得出ab = paintWidth / 2 / sin(pi - angle * 2),然后再分別過a點和b點做垂直三角形,就能得出b點坐標為(a.x - paintWidth / 2 / sin(pi - angle * 2) * sin(angle), a.y + paintWidth / 2 / sin(pi - angle * 2) * cos(angle));

同理d點坐標也可得出。
計算代碼:

Point left = toTwoPoint(Point(-side * sin(angle), 0),
    Point(0, -side * cos(angle)), Point(-h2 * tan(angle), 0), Point(0, h2));
Point right = toTwoPoint(Point(side * sin(angle), 0),
    Point(0, -side * cos(angle)), Point(h2 * tan(angle), 0), Point(0, h2));

Path pathBg = Path();
pathBg.moveTo(0, -side * cos(angle));
pathBg.lineTo(
    left.x.toDouble() - paintWidth / 2 / sin(pi - angle * 2) * sin(angle),
    left.y.toDouble() + paintWidth / 2 / sin(pi - angle * 2) * cos(angle));
pathBg.lineTo(left.x.toDouble(), h2 + (paintWidth / 2 / sin(pi - angle * 2) / sin(angle)));
pathBg.lineTo(right.x.toDouble(), h2 + (paintWidth / 2 / sin(pi - angle * 2)/ sin(angle)));
pathBg.lineTo(right.x.toDouble() + paintWidth / 2 / sin(pi - angle * 2) * sin(angle),

right.y.toDouble() + paintWidth / 2 * cos(angle));
pathBg.close();
// 通過裁剪畫布得到最終效果
 canvas.clipPath(pathBg);

效果:

原始 移到畫布中間

上面我們是通過菱形邊長去求的各個坐標點,現在我們為了使用方便需求是已知組件寬高,求菱形的邊長,這樣組件使用起來才會比較方便精準的控制組件大小,這里就是一些的繁瑣的倒推計算,假設我們的高度是我們設定的height,那么寬度其實是也就確定了,因為角度一旦確立,寬度自然也就確定了,所以這里我們向外暴露兩個屬性,一個組件高度,一個菱形角度即可。

完整源碼:

/// 掘金logo組件
class JueJinLogo extends StatelessWidget {
  final double height; // 組件高度
  final double angle; // 菱形上下角度1/2

  const JueJinLogo({Key? key, this.height = 140, this.angle = pi / 18 * 5})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    double m = 0.7;// 折線線寬相對菱形邊長倍數
    double n = 1.5;// 折線之間線寬相對菱形邊長倍數
    var a = (2 * cos(angle) + m * 0.5 / sin(angle) + 3);
    double side = height / (a + m * 0.5 / sin(pi - angle * 2) / sin(angle));
    double paintWidth = m * side;
    double h2 = side * cos(angle) +
        side * n +
        (paintWidth / 2 / sin(angle) + side * n);
    Point right = PointUtil.toTwoPoint(Point(side * sin(angle), 0),
        Point(0, -side * cos(angle)), Point(h2 * tan(angle), 0), Point(0, h2));
    double width = (right.x.toDouble() +
            paintWidth / 2 / sin(pi - angle * 2) * sin(angle)) *
        2;

    return CustomPaint(
      size: Size(width, height),
      painter: _JueJinLogoPaint(side, angle),
    );
  }
}

class _JueJinLogoPaint extends CustomPainter {
  double side;
  double angle;

  _JueJinLogoPaint(this.side, this.angle);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.translate(size.width / 2, size.height / 2);
    double paintWidth = side * 0.7;
    Paint paint = Paint()
      ..strokeWidth = paintWidth
      ..style = PaintingStyle.fill
      ..isAntiAlias = true
      ..strokeJoin = StrokeJoin.miter
      ..color = Color(0xff1E80FF);

    canvas.save();
    Path path = Path();
    path.moveTo(-side * sin(angle), 0);
    path.lineTo(0, -side * cos(angle));
    path.lineTo(side * sin(angle), 0);
    path.lineTo(0, side * cos(angle));
    path.close();

    Path path2 = Path();
    double h1 = side * cos(angle) + side * 1.5;
    path2.moveTo(-h1 * tan(angle), 0);
    path2.lineTo(0, h1);
    path2.lineTo(h1 * tan(angle), 0);

    Path path3 = Path();
    double h2 = h1 + (paintWidth / 2 / sin(angle) + side * 1.5);
    path3.moveTo(-h2 * tan(angle), 0);
    path3.lineTo(0, h2);
    path3.lineTo(h2 * tan(angle), 0);

    // 平移組件到畫布中心
    canvas.translate(
        0,
        side * cos(angle) -
            (h2 + (paintWidth / 2 / sin(angle)) + side * cos(angle)) / 2);

    Point left = PointUtil.toTwoPoint(Point(-side * sin(angle), 0),
        Point(0, -side * cos(angle)), Point(-h2 * tan(angle), 0), Point(0, h2));
    Point right = PointUtil.toTwoPoint(Point(side * sin(angle), 0),
        Point(0, -side * cos(angle)), Point(h2 * tan(angle), 0), Point(0, h2));

    Path pathBg = Path();
    pathBg.moveTo(0, -side * cos(angle));
    pathBg.lineTo(
        left.x.toDouble() - paintWidth / 2 / sin(pi - angle * 2) * sin(angle),
        left.y.toDouble() + paintWidth / 2 / sin(pi - angle * 2) * cos(angle));
    pathBg.lineTo(left.x.toDouble(),
        h2 + (paintWidth / 2 / sin(pi - angle * 2) / sin(angle)));
    pathBg.lineTo(right.x.toDouble(),
        h2 + (paintWidth / 2 / sin(pi - angle * 2) / sin(angle)));
    pathBg.lineTo(right.x.toDouble() + paintWidth / 2 * sin(angle),
        right.y.toDouble() + paintWidth / 2 * cos(angle));
    pathBg.close();
    // 裁剪畫布
    canvas.clipPath(pathBg);
    // 繪制菱形以及折線
    canvas.drawPath(path, paint);
    canvas.drawPath(path2, paint..style = PaintingStyle.stroke);
    canvas.drawPath(path3, paint..style = PaintingStyle.stroke);
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant _JueJinLogoPaint oldDelegate) {
    return false;
  }
}

class PointUtil {
  /// 兩點求直線方程
  static double towPointKb(Point<double> p1, Point<double> p2,
      {bool isK = true}) {
    /// 求得兩點斜率
    double k = 0;
    double b = 0;
    // 防止除數 = 0 出現的計算錯誤 a e x軸重合
    if (p1.x == p2.x) {
      k = (p1.y - p2.y) / (p1.x - p2.x - 1);
    } else {
      k = (p1.y - p2.y) / (p1.x - p2.x);
    }
    b = p1.y - k * p1.x;
    if (isK)
      return k;
    else
      return b;
  }

  static Point<double> toTwoPoint(
      Point<double> a, Point<double> b, Point<double> m, Point<double> n) {
    double k1 = towPointKb(a, b);
    double b1 = towPointKb(a, b, isK: false);

    double k2 = towPointKb(m, n);
    double b2 = towPointKb(m, n, isK: false);

    return Point((b2 - b1) / (k1 - k2), (b2 - b1) / (k1 - k2) * k1 + b1);
  }
}

使用
使用也是非常的方便,直接設置組件高度即可。

Widget build(BuildContext context) {
  return Container(
    color: Colors.white,
    child: JueJinLogo(
      height: 200,
    ),
  );
}

效果:

因為這里暴露了角度,所以也可以自定義角度.

當然這里還可以暴露一些顏色、漸變色等一些屬性,就不一一展示了。掌握原理即可。

總結

通過制作掘金logo這個組件,又鞏固了Flutter繪制的的相關知識和一些基礎的三角函數計算知識,同時對封裝組件所需注意的事項也有了加深的理解,那這篇文章就到這里,希望對你在Flutter繪制以及封裝組件方面有所幫助,如有幫助,歡迎點贊,如有疑問,歡迎指正~

作者:老李code
鏈接:https://juejin.cn/post/7165139559875870750

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容