如何在Flutter CustomPaint中绘制轴外的线。

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

how to draw the lines outside the axis in Flutter CustomPaint

问题

I have a Container with a CustomPaint as the parent. In the CustomPaint I just draw a line on the half surrounding of the Container. The line is drawn with half of its width inside the Container and the other half outside the Container. I want to draw the line completely outside of the Container. How can I achieve this behavior? Thanks in advance.

Here's how it looks like now:
如何在Flutter CustomPaint中绘制轴外的线。

Here's my code:

Center(
  child: CustomPaint(
    painter: SeatDecorator(),
    child: Container(
      width: 150,
      height: 150,
      color: Colors.blue.withOpacity(0.5),
    ),
  ),
)

My CustomPainter:

class SeatDecorator extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeCap = StrokeCap.square
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round
      ..strokeWidth = 8;

    Path path = Path();
    path.moveTo(0, size.height / 2);
    path.lineTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height / 2);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
英文:

I have a Container with a CustomPaint as the parent. In the CustomPaint I just draw a line on the half surrounding of the Container. The line is drawn with half of its width inside the Container and the other half outside the Container. I want to draw the line completely outside of the Container. How can I achieve this behavior? Thanks in advance.

Here's how it looks like now:
如何在Flutter CustomPaint中绘制轴外的线。

Here's my code:

Center(
        child: CustomPaint(
          painter: SeatDecorator(),
          child: Container(
            width: 150,
            height: 150,
            color: Colors.blue.withOpacity(0.5),
          ),
        ),
      )

My CustomPainter:

class SeatDecorator extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeCap = StrokeCap.square
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round
      ..strokeWidth = 8;

    Path path = Path();
    path.moveTo(0, size.height / 2);
    path.lineTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height / 2);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

答案1

得分: 1

The stroke center uses the last point to draw on canvas, you can count half of the strokeWidth while positioning lines.

class SeatDecorator extends CustomPainter {
  SeatDecorator({this.strokeWidth = 8});
  final double strokeWidth;
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeCap = StrokeCap.square
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round
      ..strokeWidth = strokeWidth;

    Path path = Path();
    final halfStrokeWidth = strokeWidth / 2;
    path.moveTo(-halfStrokeWidth, size.height / 2);
    path.lineTo(-halfStrokeWidth, -halfStrokeWidth);
    path.lineTo(size.width + halfStrokeWidth, -halfStrokeWidth);
    path.lineTo(size.width + halfStrokeWidth, size.height / 2);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant SeatDecorator oldDelegate) => oldDelegate.strokeWidth != strokeWidth;
}

You can use ShapeBorder for cases like this.

英文:

The stroke center uses the last point to draw on canvas, you can count half of the strokeWidth while positioning lines.

class SeatDecorator extends CustomPainter {
  SeatDecorator({this.strokeWidth = 8});
  final double strokeWidth;
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeCap = StrokeCap.square
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round
      ..strokeWidth = strokeWidth;

    Path path = Path();
    final halfStrokeWidth = strokeWidth / 2;
    path.moveTo(-halfStrokeWidth, size.height / 2);
    path.lineTo(-halfStrokeWidth, -halfStrokeWidth);
    path.lineTo(size.width + halfStrokeWidth, -halfStrokeWidth);
    path.lineTo(size.width + halfStrokeWidth, size.height / 2);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant SeatDecorator oldDelegate) => oldDelegate.strokeWidth != strokeWidth;
}

You can use ShapeBorder for cases like this.

huangapple
  • 本文由 发表于 2023年5月15日 05:16:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76249725.html
匿名

发表评论

匿名网友

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

确定