如何在Flutter中使用路径和动画绘制数字 ‘6’?

huangapple go评论177阅读模式
英文:

how to draw number '6' using path with animation in flutter?

问题

需要使用Dart绘制完美的数字6形状,请参考下面的代码:

@override
void paint(Canvas canvas, Size size) {
    double ht = size.height;
    double wt = size.width;

    var path = Path();

    path.moveTo(wt / 2 + 5, 5);

    path.cubicTo(wt / 2 + 10, 5, wt / 6, ht / 2, wt / 2, ht - 10);

    path.cubicTo(wt / 2, ht - 10, wt, ht / 1.8, wt / 2 - 25, ht / 2);

    canvas.drawPath(path, _paint);
}

希望对您有所帮助。

英文:

Need to draw perfect 6 shape (ref ima) using dart.

Like this...
如何在Flutter中使用路径和动画绘制数字 ‘6’?

tried below code not giving perfect 6

 
  @override
  void paint(Canvas canvas, Size size) {
    double ht = size.height;
    double wt = size.width;

    var path = Path();

    path.moveTo(wt / 2 + 5, 5);

    path.cubicTo(wt / 2 + 10, 5, wt / 6, ht / 2, wt / 2, ht - 10);

    path.cubicTo(wt / 2, ht - 10, wt, ht / 1.8, wt / 2 - 25, ht / 2);

    canvas.drawPath(path, _paint);
  }

 

答案1

得分: 1

我可以绘制如下图形:

 path.moveTo(wt / 1.4, 40);
    path.cubicTo(wt / 2 + 10, 20, wt / 4, ht / 4, wt / 2.9, ht / 1.4);

    path.addArc(
        Rect.fromCenter(
            center: Offset(wt / 2 + 8, ht / 1.5),
            width: wt / 2.4,
            height: wt / 2.3),
        math.pi,
        (2 * math.pi));

    canvas.drawPath(path, paint);
英文:

I can able to draw as below,

 path.moveTo(wt / 1.4, 40);
    path.cubicTo(wt / 2 + 10, 20, wt / 4, ht / 4, wt / 2.9, ht / 1.4);

    path.addArc(
        Rect.fromCenter(
            center: Offset(wt / 2 + 8, ht / 1.5),
            width: wt / 2.4,
            height: wt / 2.3),
        math.pi,
        (2 * math.pi));

    canvas.drawPath(path, paint);


</details>



huangapple
  • 本文由 发表于 2023年6月26日 14:27:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76554028.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定