Saya mencoba menggambar setengah lingkaran dalam persegi panjang dengan flutter seperti ini.

enter image description here

Tapi dalam kode saya, Lingkaran melebihi persegi panjang putih ke latar belakang hitam seperti ini

enter image description here

Perubahan apa yang harus saya lakukan pada kode untuk mendapatkan hasil seperti gambar pertama?

Kode saya:-

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;
  }
}


2
Shahbaz 1 Juli 2020, 16:21

1 menjawab

Jawaban Terbaik

Tampaknya lingkaran Anda digambar di luar area yang ingin Anda batasi lukisan Anda.

Jika Anda ingin melukis hanya di bagian tertentu dari kanvas, itu disebut "kliping".

Tambahkan kliping:

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

canvas.drawCircle(center1, 100, paint); 

Dengan cara ini lingkaran Anda tidak akan dicat di luar ukuran yang diberikan.

2
nvoigt 1 Juli 2020, 13:32