flutter - 如何在 CustomPaint 中删除超出的形状？

问题描述

我试图像这样在一个矩形中画一个半圆。

但是在我的代码中，圆形超过了白色矩形到黑色背景上，就像这样

我应该对代码进行哪些更改才能获得像第一张图片一样的结果？

我的代码：-

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
          child: Scaffold(  
            backgroundColor: Colors.black,
            body: Center(  
              child: Container(  
                height: 200,
                width: 200,

                color: Colors.white,
                child: CustomPaint(
                  painter: Circ(),
                    child: Column(  
                    children: <Widget>[

                    ],
                  ),
                ),
              
              ),
            ),
          )
    ),
    );
  }
}

class Circ extends CustomPainter{
  
  @override 
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    
    
    
    paint.color = Colors.blue.withOpacity(0.2);
    
    var center1 = Offset(200,100);
    
    canvas.drawCircle(center1,100, paint); 

    
  }

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

标签： flutter

看来您的圆圈是在您想要限制绘画的区域之外绘制的。

如果您只想在画布的指定部分进行绘画，则称为“剪辑”。

添加剪辑：

canvas.clipRect(Rect.fromLTWH(0, 0, size.width, size.height));

canvas.drawCircle(center1, 100, paint);

这样你的圆圈就不会画在给定大小之外。

flutter - 如何在 CustomPaint 中删除超出的形状？

问题描述

解决方案

推荐阅读