CustomPainter — چیست، متدهای paint و shouldRepaint در Flutter

CustomPainter چیست؟

CustomPainter — کلاس پایه Flutter برای پیاده‌سازی گرافیک 2D دلخواه است. این کلاس جایگزین رویکرد بازنویسی onDraw در Android می‌شود و مدل ترسیم انعطاف‌پذیرتر و اعلانی‌تری ارائه می‌دهد. توسعه‌دهنده زیرکلاس CustomPainter را ایجاد می‌کند، متد paint را بازنویسی می‌کند، جایی که Canvas و Size را دریافت می‌کند و تمام عملیات ترسیم را روی Canvas انجام می‌دهد. ویجت CustomPaint فراخوانی paint را مدیریت می‌کند و نتیجه را در درخت ویجت ادغام می‌کند.

تفاوت کلیدی بین CustomPainter و ترسیم مستقیم از طریق Canvas — جداسازی منطق ترسیم (paint) و محرک ترسیم مجدد (shouldRepaint) است. سیستم Flutter هر زمان که ویجت والد تغییر می‌کند shouldRepaint را فراخوانی می‌کند. اگر shouldRepaint false برگرداند، paint فراخوانی نمی‌شود که این باعث صرفه‌جویی در منابع می‌شود. این مکانیسم مشابه shouldRebuild در RenderObject است و بخشی از معماری Flutter با سه درخت آن (Widget، Element، RenderObject) می‌باشد.

CustomPaint — ویجتی است که پارامترهای painter (لایه پس‌زمینه) و foregroundPainter (لایه پیش‌زمینه) را می‌پذیرد. هر دو پارامتر اشیاء CustomPainter را می‌پذیرند. painter پس‌زمینه قبل از ویجت فرزند CustomPaint ترسیم می‌کند و foregroundPainter بعد از آن. این امکان استفاده از CustomPaint را به عنوان یک کانتینر با پس‌زمینه تزئینی یا رویه فراهم می‌کند بدون اینکه امکان جاسازی ویجت‌های معمولی در داخل از دست برود.

Canvas و Paint در Flutter

Canvas — شی‌ء مرکزی برای ترسیم در Flutter است که سطح گرافیکی را کپسوله می‌کند. حدود 40 متد برای ترسیم ارائه می‌دهد: drawLine، drawCircle، drawRect، drawPath، drawArc، drawImage، drawPicture، drawPoints و دیگران. Canvas در Flutter با کلاس مشابه در Android Canvas مطابقت دارد اما با معماری Dart و Flutter Engine سازگار شده است. Canvas در یک سیستم مختصات کار می‌کند که مبدأ (0, 0) گوشه بالا سمت چپ است.

Paint — با متد paint() اشتباه نشود — کلاسی است که سبک ترسیم را تعریف می‌کند: رنگ (color)، ضخامت خط (strokeWidth)، سبک (style: fill یا stroke)، شفافیت، حالت ترکیب (blendMode) و ماسک صاف‌سازی. Paint قبل از ترسیم پیکربندی می‌شود و به متدهای Canvas منتقل می‌شود. مهم: Paint یک شی‌ء قابل تغییر است، اما توصیه می‌شود یک بار ایجاد شده و مجدداً استفاده شود و فقط پارامترهای لازم تغییر داده شوند.

تبدیلات Canvas

Canvas از تبدیلات سیستم مختصات پشتیبانی می‌کند: translate(double dx, double dy) مبدأ مختصات را جابجا می‌کند؛ rotate(double radians) سیستم را می‌چرخاند؛ scale(double sx, double sy) مقیاس را تغییر می‌دهد؛ skew(double sx, double sy) مایل می‌کند. قبل از تبدیل توصیه می‌شود وضعیت Canvas را از طریق save() ذخیره کرده و پس از اتمام از طریق restore() بازیابی کنید. این کار از انباشته شدن تبدیلات در فراخوانی‌های بعدی paint جلوگیری می‌کند.

متدهای paint و shouldRepaint

paint(Canvas canvas, Size size) — متد اجباری که تمام منطق ترسیم در آن پیاده‌سازی می‌شود. پارامتر canvas — سطح گرافیکی برای ترسیم. پارامتر size — اندازه منطقه اختصاص داده شده برای ترسیم (عرض و ارتفاع در پیکسل‌های منطقی). Canvas از پیش طوری پیکربندی شده است که مبدأ مختصات (0,0) با گوشه بالا سمت چپ منطقه ترسیم مطابقت دارد. تمام مختصات نسبت به این مبدأ تعیین می‌شوند.

shouldRepaint(covariant CustomPainter oldDelegate) — متد اجباری که فرکانس ترسیم مجدد را بهینه می‌کند. Flutter shouldRepaint را در هر به‌روزرسانی درخت ویجت که بر CustomPainter تأثیر می‌گذارد فراخوانی می‌کند. اگر متد false برگرداند، تصویر قبلاً ترسیم شده معتبر در نظر گرفته می‌شود و paint فراخوانی نمی‌شود. پیاده‌سازی معمول: return oldDelegate.someField != someField — مقایسه فیلدهای painter قدیم و جدید برای تعیین نیاز به ترسیم مجدد.

برای تصاویر متحرک یا دائماً در حال تغییر (ساعت‌ها، نشانگرهای بارگذاری، نمودارها) shouldRepaint باید در هر تغییر وضعیت true برگرداند. اگر شی‌ء ثابت است (لوگو، آیکون، پس‌زمینه)، shouldRepaint پس از اولین ترسیم false برمی‌گرداند. Flutter به طور خودکار نتیجه paint را ذخیره می‌کند و فقط در صورت تغییر اندازه، شفافیت یا فراخوانی shouldRepaint دوباره ترسیم می‌کند.

مثال ترسیم سفارشی با CustomPainter در Dart

بیایید GaugePainter را ایجاد کنیم — یک نشانگر دایره‌ای سفارشی با پر شدن متحرک. CustomPainter مقدار فعلی (progress از 0.0 تا 1.0) را دریافت می‌کند و یک قوس با گرادیان ترسیم می‌کند. در متد shouldRepaint مقدار progress برای بهینه‌سازی مقایسه می‌شود. CustomPaint در درخت ویجت با پارامتر size برای محدود کردن منطقه ترسیم قرار می‌گیرد.

class GaugePainter extends CustomPainter {
    final double progress;
    final Color startColor;
    final Color endColor;

    GaugePainter({
        required this.progress,
        this.startColor = Colors.blue,
        this.endColor = Colors.cyan,
    });

    @override
    void paint(Canvas canvas, Size size) {
        final center = Offset(size.width / 2,
            size.height / 2);
        final radius = center.dx - 12;
        final bgPaint = Paint()
            ..color = Colors.grey.withOpacity(0.3)
            ..style = PaintingStyle.stroke
            ..strokeWidth = 16
            ..strokeCap = StrokeCap.round;

        final progressPaint = Paint()
            ..shader = LinearGradient(
                colors: [startColor, endColor],
            ).createShader(
                Rect.fromCircle(
                    center, radius))
            ..style = PaintingStyle.stroke
            ..strokeWidth = 16
            ..strokeCap = StrokeCap.round;

        canvas.drawCircle(center, radius, bgPaint);
        canvas.drawArc(
            Rect.fromCircle(center, radius),
            -math.pi / 2,
            2 * math.pi * progress,
            false, progressPaint);
    }

    @override
    bool shouldRepaint(
        GaugePainter oldDelegate) {
        return oldDelegate.progress != progress;
    }
}

CustomPainter با Path برای اشکال پیچیده

مثال یک نمودار موجی را با استفاده از Path ترسیم می‌کند. Path امکان ساخت خطوط دلخواه از خطوط، منحنی‌های Bezier و قوس‌ها را فراهم می‌کند. پس از ساخت، خط با رنگ پر یا با خط حاشیه‌گذاری می‌شود. در مثال، نمودار بر اساس آرایه‌ای از نقاط که شکل موج را شبیه‌سازی می‌کنند ساخته می‌شود.

class WavePainter extends CustomPainter {
    final List<double> values;

    WavePainter({required this.values});

    @override
    void paint(Canvas canvas, Size size) {
        final path = Path();
        final dx = size.width /
            (values.length - 1);

        path.moveTo(0, size.height);
        for (var i = 0; i < values.length; i++) {
            final x = i * dx;
            final y = size.height *
                (1 - values[i]);
            path.lineTo(x, y);
        }
        path.lineTo(size.width, size.height);
        path.close();

        final fillPaint = Paint()
            ..color = Colors.blue.withOpacity(0.3)
            ..style = PaintingStyle.fill;

        canvas.drawPath(path, fillPaint);
    }

    @override
    bool shouldRepaint(
        WavePainter oldDelegate) {
        return oldDelegate.values != values;
    }
}

ForegroundPainter و backgroundPainter: تفاوت

painter (پس‌زمینه) قبل از ویجت فرزند CustomPaint ترسیم می‌کند. اگر CustomPaint دارای ویجت فرزند (پارامتر child) باشد، painter پس‌زمینه زیر آن نمایش داده می‌شود. این برای تزئین مناسب است: نوارهای پیشرفت، الگوهای پس‌زمینه، واترمارک‌ها. foregroundPainter بعد از ویجت فرزند، یعنی روی آن ترسیم می‌کند. برای رویه‌ها استفاده می‌شود: برجستگی‌ها، ماسک‌ها، خط‌کش‌های اندازه‌گیری، حاشیه‌نویسی.

تفاوت بین painter و foregroundPainter برای Z-order حیاتی است. اگر نیاز به ترسیم چیزی در پشت محتوا دارید — از painter استفاده کنید. اگر روی محتوا — foregroundPainter. در برخی موارد می‌توان از هر دو painter به طور همزمان استفاده کرد: پس‌زمینه از طریق painter، برچسب-رویه از طریق foregroundPainter. این امکان جداسازی منطق لایه‌های گرافیکی مختلف را به دو کلاس جداگانه CustomPainter فراهم می‌کند.

پارامتر size در متد paint برای هر دو painter یکسان است و با اندازه منطقه اختصاص داده شده برای CustomPaint تعیین می‌شود. اندازه می‌تواند به طور صریح از طریق پارامتر size در CustomPaint یا به طور ضمنی از طریق کانتینر والد تعیین شود. اگر size برابر Size.zero باشد، paint فراخوانی نمی‌شود — Flutter ترسیم را برای منطقه صفر نادیده می‌گیرد. این رفتار باید در ظاهر متحرک عنصر در نظر گرفته شود.

بهینه‌سازی عملکرد CustomPainter

قانون اصلی عملکرد CustomPainter — ایجاد نکردن اشیاء در داخل متد paint. Canvas، Paint، Path، Rect، Offset و سایر اشیاء ترسیم باید در سازنده CustomPainter ایجاد یا ذخیره شوند. ایجاد اشیاء در داخل paint منجر به تخصیص حافظه در هر فریم می‌شود که در 60 فریم در ثانیه باعث جمع‌آوری مکرر زباله و لرزش انیمیشن (jank) می‌شود.

ذخیره Path ترسیم خطوط پیچیده تکراری را به طور قابل توجهی تسریع می‌کند. اگر خط بین فریم‌ها تغییر نمی‌کند (مثلاً شبکه پس‌زمینه)، Path را یک بار ایجاد کرده و چندین بار استفاده کنید. RepaintBoundary — ویجت-پوششی که از ترسیم مجدد CustomPainter هنگام تغییر درخت ویجت بالادست جلوگیری می‌کند. اگر CustomPainter ثابت است، آن را در RepaintBoundary برای جداسازی بپیچید.

برای CustomPainter متحرک با ترسیم مجدد مکرر از Ticker یا AnimationController استفاده کنید و shouldRepaint در هنگام تغییر مقدار متحرک true برگرداند. بهینه است که فیلد متحرک را در shouldRepaint مقایسه کنید و بدون نیاز در هر فریم دوباره ترسیم نکنید. ذخیره Rect برای گرادیان‌های پیچیده: اگر گرادیان رنگ‌ها را تغییر نمی‌دهد، می‌توان Shader را از طریق Paint.shader ذخیره کرد.