Flutter手写笔功能插件onyxsdk_pen的使用

此插件将 Onyx Pen SDK 集成到Flutter中，以提升在绘图应用中的电子墨水屏性能。

大部分SDK功能由于仅限于Onyx设备而被省略。我们仅提供了一个名为OnyxSdkPenArea的部件。该部件的子部件（通常包括一个CustomPaint和GestureDetector）将自动获得流畅的笔画效果。

您需要负责处理用户输入并进行绘制。OnyxSdkPenArea部件只会让内容在Onyx设备上运行得更快。

当在非Onyx Android设备上使用时，OnyxSdkPenArea部件会直接返回其子部件。

开始使用

Android

请参阅以下设置的示例：

android/app/build.gradle

android {
    defaultConfig {
        // Onyx SDK要求最低版本为23
        minSdkVersion 23
    }

    packagingOptions {
        pickFirst 'lib/*/libc++_shared.so'
        pickFirst 'androidsupportmultidexversion.txt'
    }
}

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.adilhanney.saber">

    <!-- 在`application`标签中添加`tools:replace`属性 -->
    <application
        tools:replace="android:label">

    </application>
</manifest>

在我的情况下，编译器报错提示需要tools:replace="android:allowBackup"，所以我将两者合并为tools:replace="android:label,android:allowBackup"。

android/build.gradle

allprojects {
    repositories {
        google()
        mavenCentral()

        // 添加这两行
        maven {
            url "https://jitpack.io"
        }
        maven {
            url "http://repo.boox.com/repository/maven-public/"
            allowInsecureProtocol true
        }
    }
}

pubspec.yaml

dependencies:
  onyxsdk_pen: ^1.0.3

lib/main.dart

// 将可绘制的小部件包裹在OnyxSdkPenArea部件中，例如：
OnyxSdkPenArea(
  child: GestureDetector(
    onPanUpdate: (details) {},
    child: CustomPaint(
      painter: MyPainter(points),
    ),
  ),
),

您可以选择在应用程序的main函数中运行init方法来初始化Onyx SDK。这一步不是必须的，但在非Onyx Android设备上可以提高初始性能。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await OnyxSdkPenArea.init();
  runApp(MyApp());
}

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:onyxsdk_pen/onyxsdk_pen_area.dart';

const String explanation = '''
尝试在Onyx设备上使用我！你应该能够用你的触控笔平滑地在屏幕上绘制。
用手指操作则会像普通应用一样延迟。
''';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await OnyxSdkPenArea.init();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<List<Offset>> strokes = [];

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: OnyxSdkPenArea(
          child: GestureDetector(
            onPanStart: (details) {
              strokes.add([details.localPosition]);
            },
            onPanUpdate: (details) {
              if (strokes.isEmpty) return;
              setState(() {
                strokes.last.add(details.localPosition);
              });
            },
            onPanEnd: (details) {
              setState(() {});
            },
            child: CustomPaint(
              painter: MyPainter(strokes),
              child: const Center(
                child: SelectableText(explanation),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final List<List<Offset>> strokes;
  MyPainter(this.strokes);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 3
      ..strokeCap = StrokeCap.round;
    for (final List<Offset> stroke in strokes) {
      for (int i = 0; i < stroke.length - 1; i++) {
        canvas.drawLine(stroke[i], stroke[i + 1], paint);
      }
    }
  }

  [@override](/user/override)
  bool shouldRepaint(MyPainter oldDelegate) => true;
}