Flutter渐进式精灵图查看器插件frame_progressive_sprite_viewer的使用

Flutter渐进式精灵图查看器插件frame_progressive_sprite_viewer的使用

Frame Progressive Sprite Viewer

基本的图像和精灵查看器，适用于Brilliant Labs Frame。

展示了TxImageSpriteBlock，它将图像分割为切片，并发送较小的精灵行，可选地允许渐进式/增量渲染，并且在数据包组装期间可能需要更小的峰值内存需求。

帧截图

JPEG量化并缩放到4位精灵 - 自定义调色板

[JPG量化并缩放至4位精灵，自定义调色板]

1位精灵 - 默认调色板

[1位精灵]

2位精灵 - 默认调色板

[2位精灵]

4位精灵 - 默认调色板

[4位精灵]

使用说明

  1. 将设备连接到Frame并启动应用程序。通过文件选择器从设备中选择任何PNG或JPG文件。

    // 导入必要的库
import 'package:flutter/material.dart';
import 'package:frame_progressive_sprite_viewer/frame_progressive_sprite_viewer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? _imageFile;

  Future<void> _pickImage() async {
    final pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
    setState(() {
      _imageFile = pickedFile != null ? File(pickedFile.path) : null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Frame Progressive Sprite Viewer'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('选择图片'),
            ),
            SizedBox(height: 20),
            if (_imageFile != null)
              TxImageSpriteBlock(
                image: _imageFile!,
                bitDepth: 4, // 设置位深度（1, 2, 4）
                useCustomPalette: true, // 是否使用自定义调色板
              ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter渐进式精灵图查看器插件frame_progressive_sprite_viewer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter渐进式精灵图查看器插件frame_progressive_sprite_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


frame_progressive_sprite_viewer 是一个 Flutter 插件，用于实现渐进式加载精灵图的查看器。它允许你逐步加载和显示精灵图，从而提高应用的性能和用户体验。以下是使用 frame_progressive_sprite_viewer 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 frame_progressive_sprite_viewer 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  frame_progressive_sprite_viewer: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:frame_progressive_sprite_viewer/frame_progressive_sprite_viewer.dart';

3. 使用 FrameProgressiveSpriteViewer

你可以使用 FrameProgressiveSpriteViewer 来显示精灵图。以下是一个简单的示例：

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

class SpriteViewerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sprite Viewer Example'),
      ),
      body: Center(
        child: FrameProgressiveSpriteViewer(
          imageProvider: AssetImage('assets/spritesheet.png'),
          frameWidth: 64,
          frameHeight: 64,
          frameCount: 10,
          framesPerRow: 5,
          duration: Duration(milliseconds: 100),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SpriteViewerExample(),
  ));
}

4. 参数说明

  • imageProvider: 精灵图的 ImageProvider，可以是 AssetImage、NetworkImage 等。
  • frameWidth: 精灵图中每个帧的宽度。
  • frameHeight: 精灵图中每个帧的高度。
  • frameCount: 精灵图中的总帧数。
  • framesPerRow: 精灵图中每行的帧数。
  • duration: 每帧之间的时间间隔。

5. 精灵图资源

确保你的精灵图资源已经添加到项目中，并且在 pubspec.yaml 文件中正确配置了资源路径：

flutter:
  assets:
    - assets/spritesheet.png
回到顶部