Flutter高性能2D绘图插件cairo的使用

Flutter高性能2D绘图插件cairo的使用

Dart绑定到Cairo C图形库。

功能

  • 渲染线条、弧线、贝塞尔曲线（三次和二次）。
  • 保存为图像。
  • 变换（旋转、平移、缩放以及其他任何矩阵描述的变换）。
  • 填充和描边（目前仅支持纯色）。

开始使用

1. 下载Cairo

详细信息可以在cairo官网找到。

2. 安装

dart pub install cairo

3. 完成，享受吧！

使用方法

// 加载Cairo C库
CairoLib.load();

// 创建一个640x320的表面/画布
final img = ImageSurface(
  format: ImageFormat.ARGB32,
  width: 640,
  height: 360,
);

// 渲染一个品红色背景
img.rectangle(Point(0, 0), img.width, img.height);
img.sourceColor = Color.magenta;
img.fill();

// 保存图像
img.save('out.png');

// 销毁内存中的图像数据
img.destroy();

对于更复杂的示例，请查看example/文件夹。

其他信息

Cairo的一些函数尚未实现。如果你认为某个函数需要添加，请创建一个问题进行说明。

这个项目是Manim Web的一部分。

完整示例Demo

以下是一个完整的示例代码，展示了如何使用Cairo在Flutter中进行2D绘图：

import 'package:cairo/cairo.dart';

void main() {
  // 加载Cairo C库
  CairoLib.load();

  // 创建一个640x320的表面/画布
  final img = ImageSurface(
    format: ImageFormat.ARGB32,
    width: 640,
    height: 360,
  );

  // 渲染背景
  img.rectangle(Point(0, 0), img.width, img.height);
  img.sourceColor = Color.white;
  img.fill();

  // 开始一个新的路径
  img.startPath();

  // 移动光标（即Cairo的绘制笔）到(100, 100)
  img.moveTo(Point(100, 100));

  // 从(100,100)到(200,200)，然后到(200, 300)的线段
  img.lineTo(Point(200, 200));
  img.lineTo(Point(200, 300));

  // 二次贝塞尔曲线从当前光标位置（这里为200, 300）
  // 到点(420, 300)，控制点在(250, 250)
  // TODO 这似乎会破坏路径关闭
  // TODO 查明原因
  img.quadCurveTo(Point(250, 250), Point(420, 300));

  // 三次贝塞尔曲线从当前光标位置（这里为420, 300）
  // 到点(300, 150)，控制点分别为(400, 200)和(100, 200)
  img.cubicCurveTo(Point(400, 200), Point(100, 200), Point(300, 150));

  // 用一条直线闭合路径
  img.closePath();

  // 沿着路径添加一个3像素宽的品红色边框
  // preserve参数保留路径，以便以后可以再次填充/描边
  img.lineWidth = 3;
  img.sourceColor = Color.magenta;
  img.stroke(preserve: true);

  // 用半透明的青色填充路径（保留）
  img.sourceColor = Color.cyan.withTransparency(0.5);
  img.fill();

  // 保存图像
  img.save('out.png');

  // 销毁内存中的图像数据
  img.destroy();
}

更多关于Flutter高性能2D绘图插件cairo的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter高性能2D绘图插件cairo的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 Cairo 进行高性能 2D 绘图可以通过结合 Flutter 的 dart:ffi 和 Cairo 库来实现。Cairo 是一个流行的 2D 图形库，支持高质量的矢量图形绘制。下面是一个简单的指南，介绍如何在 Flutter 应用中使用 Cairo 进行绘图。

1. 安装 Cairo 库

首先，你需要在你的系统上安装 Cairo 库。在 Ubuntu 上，你可以使用以下命令安装：

sudo apt-get install libcairo2-dev

在 macOS 上，你可以使用 Homebrew 安装：

brew install cairo

在 Windows 上，你可以从 Cairo 官方网站下载预编译的库。

2. 创建 Flutter 项目

创建一个新的 Flutter 项目：

flutter create flutter_cairo_example
cd flutter_cairo_example

3. 添加 dart:ffi 依赖

在 pubspec.yaml 文件中添加 ffi 依赖：

dependencies:
  ffi: ^1.1.2

4. 编写 Dart 代码

接下来，编写 Dart 代码来调用 Cairo 库。首先，创建一个 cairo_bindings.dart 文件，用于加载 Cairo 库并定义相关函数。

import 'dart:ffi';
import 'dart:io';

import 'package:ffi/ffi.dart';

final DynamicLibrary cairoLib = Platform.isLinux
    ? DynamicLibrary.open('libcairo.so.2')
    : Platform.isMacOS
        ? DynamicLibrary.open('libcairo.2.dylib')
        : DynamicLibrary.open('cairo.dll');

typedef NativeCairoCreatePDF = Pointer<Void> Function(Pointer<Utf8>, Double, Double);
typedef NativeCairoCreateSurface = Pointer<Void> Function(Pointer<Void>, Int32, Int32);
typedef NativeCairoCreateContext = Pointer<Void> Function(Pointer<Void>);
typedef NativeCairoSetSourceRGB = Void Function(Pointer<Void>, Double, Double, Double);
typedef NativeCairoPaint = Void Function(Pointer<Void>);
typedef NativeCairoDestroy = Void Function(Pointer<Void>);

final cairoCreatePDF = cairoLib.lookupFunction<NativeCairoCreatePDF, NativeCairoCreatePDF>('cairo_pdf_surface_create');
final cairoCreateSurface = cairoLib.lookupFunction<NativeCairoCreateSurface, NativeCairoCreateSurface>('cairo_image_surface_create');
final cairoCreateContext = cairoLib.lookupFunction<NativeCairoCreateContext, NativeCairoCreateContext>('cairo_create');
final cairoSetSourceRGB = cairoLib.lookupFunction<NativeCairoSetSourceRGB, NativeCairoSetRGB>('cairo_set_source_rgb');
final cairoPaint = cairoLib.lookupFunction<NativeCairoPaint, NativeCairoPaint>('cairo_paint');
final cairoDestroy = cairoLib.lookupFunction<NativeCairoDestroy, NativeCairoDestroy>('cairo_destroy');

5. 使用 Cairo 绘制图形

在 main.dart 中，使用 Cairo 绘制一个简单的图形：

import 'dart:ffi';
import 'dart:io';

import 'package:flutter/material.dart';
import 'cairo_bindings.dart' as cairo;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Cairo Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              drawWithCairo();
            },
            child: Text('Draw with Cairo'),
          ),
        ),
      ),
    );
  }

  void drawWithCairo() {
    final filename = 'example.pdf';
    final width = 600.0;
    final height = 400.0;

    final filenamePtr = filename.toNativeUtf8();
    final surface = cairo.cairoCreatePDF(filenamePtr, width, height);
    final context = cairo.cairoCreateContext(surface);

    cairo.cairoSetSourceRGB(context, 1.0, 0.0, 0.0); // Set color to red
    cairo.cairoPaint(context);

    cairo.cairoDestroy(context);
    cairo.cairoDestroy(surface);

    malloc.free(filenamePtr);

    print('PDF created: $filename');
  }
}

6. 运行项目

运行 Flutter 项目：

flutter run
回到顶部