画倒三角形 [英] Draw inverted triangle

问题描述

我正在 Flutter 中构建一个自定义 TabBar，我正在尝试使用标签下方的特定路径绘制一个倒三角形(作为指标).并使指示器在选中的选项卡上移动.

I'm building a custom TabBar in Flutter and i'm trying to draw an inverted triangle (as indicators) using specific Paths below the label. And to make the indicator move on tab selected.

这是我目前所拥有的

class TriangleTabIndicator extends Decoration {
  final BoxPainter _painter;

  TriangleTabIndicator({@required Color color, @required double radius})
      : _painter = DrawTriangle(color);

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class DrawTriangle extends BoxPainter {
  Paint _paint;

  DrawTriangle(Color color) {
    _paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;
  }

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset triangleOffset =
        offset + Offset(cfg.size.width / 2, cfg.size.height - 10);
    var path = Path();

    path.moveTo(triangleOffset.dx, triangleOffset.dy);
    path.lineTo(triangleOffset.dx + 10, triangleOffset.dy + 10);
    path.lineTo(triangleOffset.dx - 10, triangleOffset.dy + 10);

    path.close();
    canvas.drawPath(path, _paint);
  }
}

上面吐出了一个等腰三角形.现在我需要反转这个三角形.

The above spits out an isosceles triangle. Now i need to invert this triangle.

这是 TabBar 小部件

Here's the TabBar widget

TabBar(
   controller: _tabController,
   indicator: TriangleTabIndicator(color: Colors.white, radius: null),
   isScrollable: true,
   indicatorPadding: EdgeInsets.zero,
   labelPadding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 10.0),
   tabs: <Widget>[],
),

推荐答案

如果你想让三角点向下...

If you want to make the triangle point down...

将您的 paint 方法更改为此代码:

change your paint method to this code:

  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset triangleOffset = offset + Offset(cfg.size.width / 2, cfg.size.height);
    var path = Path();

    path.moveTo(triangleOffset.dx, triangleOffset.dy);
    path.lineTo(triangleOffset.dx + 10, triangleOffset.dy - 10);
    path.lineTo(triangleOffset.dx - 10, triangleOffset.dy - 10);
    path.close();

    canvas.drawPath(path, _paint);
  }

这篇关于画倒三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！