Flutter绘图插件 pcanvas 的使用

pcanvas 是一个跨平台的画布库，支持在多个平台上进行绘图操作（如Flutter、Web、桌面应用和内存中的图像）。本文将介绍如何在Flutter中使用pcanvas插件。

动机

画布操作通常依赖于特定平台的框架。该插件的主要目的是在多个平台上实现相同的行为，并提高性能和易用性。

平台实现

当创建PCanvas实例时，它会根据平台选择适当的实现：

• PCanvasBitmap: 内存中的位图为画布。
• PCanvasHTML: 使用dart:html的Web画布，基于CanvasElement。
• PCanvasFlutter: 使用dart:ui的Flutter画布，基于CustomPainter。对应的Widget是PCanvasWidget，需要安装pcanvas_flutter包。

使用示例

基本示例

下面是一个简单的示例，展示了如何在Flutter中使用pcanvas插件绘制图形并保存为PNG文件。

import 'dart:io';
import 'package:pcanvas/pcanvas.dart';

void main() async {
  // 创建一个800x600尺寸的画布
  var pCanvas = PCanvas(800, 600, MyCanvasPainter());

  // 等待画布加载完成
  await pCanvas.waitLoading();

  // 绘制画布
  pCanvas.callPainter();

  // 获取画布像素数据
  var pixels = await pCanvas.pixels;
  print('-- pixels: $pixels');

  // 将画布转换为PNG格式
  var pngData = await pCanvas.toPNG();
  print('-- PNG data: ${pngData.lengthInBytes} bytes');

  // 将PNG数据保存到文件
  var file = File('/tmp/pcanvas_example_bitmap.png');
  file.writeAsBytesSync(pngData);
  print('-- Saved to $file');
}

class MyCanvasPainter extends PCanvasPainter {
  late PCanvasImage img1;
  late PCanvasImage img2;

  @override
  Future<bool> loadResources(PCanvas pCanvas) async {
    var img1URL = 'https://i.postimg.cc/k5TnC1H9/land-scape-1.jpg';
    var img2URL = 'https://i.postimg.cc/L5sFmw5R/canvas-icon.png';

    pCanvas.log('** Loading images...');

    img1 = pCanvas.createCanvasImage(img1URL);
    img2 = pCanvas.createCanvasImage(img2URL);

    var images = [img1, img2];
    await images.loadAll();

    for (var img in images) {
      pCanvas.log('-- Loaded image: $img');
    }

    pCanvas.log('** Loaded images!');
    return true;
  }

  @override
  bool paint(PCanvas pCanvas) {
    // 清除画布背景色为灰色
    pCanvas.clear(style: PStyle(color: PColor.colorGrey));

    // 在指定区域内绘制图片
    pCanvas.drawImageFitted(img1, 0, 0, pCanvas.width ~/ 2, pCanvas.height);

    // 在指定区域内以0.15的比例绘制图片
    pCanvas.centered(
      area: PRectangle(0, 0, pCanvas.width ~/ 2, pCanvas.height * 0.50),
      dimension: img2.dimension,
      scale: 0.15,
      (pc, p, sz) => pc.drawImageScaled(img2, p.x, p.y, sz.width, sz.height),
    );

    // 在(10,10)位置填充一个红色透明度为0.3的矩形
    pCanvas.fillRect(
        10, 10, 20, 20, PStyle(color: PColor.colorRed.copyWith(alpha: 0.30)));

    // 在(40,10)位置填充一个绿色矩形
    pCanvas.fillRect(40, 10, 20, 20, PStyle(color: PColor.colorGreen));

    var fontPR = PFont('Arial', 14);
    var textPR = 'devicePixelRatio: ${pCanvas.devicePixelRatio}';

    // 测量文本大小
    var m = pCanvas.measureText(textPR, fontPR);

    // 在(10,55)位置绘制文本
    pCanvas.drawText(textPR, 10, 55, fontPR, PStyle(color: PColor.colorBlack));

    // 绘制围绕文本的矩形边框
    pCanvas.strokeRect(10 - 2, 55 - 2, m.actualWidth + 4, m.actualHeight + 4,
        PStyle(color: PColor.colorYellow));

    var fontHello = PFont('Arial', 24);
    var textHello = 'Hello World!';

    // 在指定区域内绘制带有阴影的文本
    pCanvas.centered(
      area: PRectangle(0, 0, pCanvas.width ~/ 2, pCanvas.height * 0.30),
      dimension: pCanvas.measureText(textHello, fontHello),
      (pc, p, sz) {
        pc.drawText(textHello, p.x + 2, p.y + 2, fontHello,
            PStyle(color: PColorRGBA(0, 0, 0, 0.30)));
        pc.drawText(
            textHello, p.x, p.y, fontHello, PStyle(color: PColor.colorBlue));
      },
    );

    var path = [100, 10, const Point(130, 25), 100, 40];

    // 绘制路径
    pCanvas.strokePath(path, PStyle(color: PColor.colorRed, size: 3),
        closePath: true);

    return true;
  }
}

在Flutter中使用PCanvasWidget

为了在Flutter应用中使用PCanvas，你需要安装pcanvas_flutter包，并使用PCanvasWidget来构建UI。

首先，在pubspec.yaml中添加依赖：

dependencies:
  pcanvas_flutter: ^latest_version

然后，在你的Flutter应用中使用PCanvasWidget：

import 'package:flutter/material.dart';
import 'package:pcanvas_flutter/pcanvas_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('PCanvas Example'),
        ),
        body: Center(
          child: PCanvasWidget(
            width: 800,
            height: 600,
            painter: MyCanvasPainter(),
          ),
        ),
      ),
    );
  }
}

class MyCanvasPainter extends PCanvasPainter {
  @override
  Future<bool> loadResources(PCanvas pCanvas) async {
    var imgURL = 'https://i.postimg.cc/k5TnC1H9/land-scape-1.jpg';
    var img = pCanvas.createCanvasImage(imgURL);
    await img.load();
    return true;
  }

  @override
  bool paint(PCanvas pCanvas) {
    pCanvas.clear(style: PStyle(color: PColor.colorWhite));
    pCanvas.drawImageFitted(img, 0, 0, pCanvas.width, pCanvas.height);
    return true;
  }
}

以上就是如何在Flutter项目中使用pcanvas插件的基本步骤。你可以通过修改MyCanvasPainter类来实现更多的绘图效果。