image - Flutter/Dart 中有没有办法显示图像的一部分
问题描述
在 Flutter 中开发纸牌游戏。在 5 x 12 网格中拥有一张带有完整卡片组的大型图形。第五排是百搭牌和卡片背面。与拥有 60 个单独的文件相比,它在资源上的效率更高。
我想一次只显示一张卡片。我想指定 xy 作为图像的开始位置,然后指定高度/宽度来显示多少。
试过这个想法,铭文会根据大小和矩形从 .topLeft 移动对齐方式。
https://api.flutter.dev/flutter/painting/Alignment/inscribe.html
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRect(
child: Align(
alignment: Alignment.topLeft.inscribe(
Size(100, 100), Rect.fromLTWH(0, 0, 100, 100)),
heightFactor: 0.5,
child: Image.asset(
'images/Deck1.png',
),
),
),
RaisedButton(
但是在这一行出现编译错误
Compiler message:
lib/screens/home/home.dart:34:50: Error: The argument type 'Rect' can't be assigned to the parameter type 'AlignmentGeometry'.
- 'Rect' is from 'dart:ui'.
- 'AlignmentGeometry' is from 'package:flutter/src/painting/alignment.dart' ('../../Developer/flutter/packages/flutter/lib/src/painting/alignment.dart').
alignment: Alignment.topLeft.inscribe(
解决方案
您可以在下面复制粘贴运行完整代码
您可以使用包https://pub.dev/packages/flame来使用Sprite
此示例要正常工作,您需要将 png https://raw.githubusercontent.com/flame-engine /flame/master/doc/examples/animation_widget/assets/images/minotaur.png在assets/images
文件夹中
这png
有 1row
和19
列
加载后SpriteSheet
,您可以显示SpriteWidget
并定义position
要显示的图片
SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 5))
代码片段
final _animationSpriteSheet = SpriteSheet(
imageName: 'minotaur.png',
columns: 19,
rows: 1,
textureWidth: 96,
textureHeight: 96,
);
...
Container(
width: 200,
height: 200,
child: SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 0)),
),
Container(
width: 200,
height: 200,
child: SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 5)),
),
您可以参考文档源中的详细信息https://medium.com/flutter-community/sprite-sheet-animations-in-flutter-1b693630bfb3
工作演示
完整代码
import 'dart:async';
import 'package:flame/anchor.dart';
import 'package:flame/flame.dart';
import 'package:flame/animation.dart' as animation;
import 'package:flame/sprite.dart';
import 'package:flame/spritesheet.dart';
import 'package:flame/position.dart';
import 'package:flame/widgets/animation_widget.dart';
import 'package:flame/widgets/sprite_widget.dart';
import 'package:flutter/material.dart';
Sprite _sprite;
Sprite _sprite1;
animation.Animation _animation;
final _animationSpriteSheet = SpriteSheet(
imageName: 'minotaur.png',
columns: 19,
rows: 1,
textureWidth: 96,
textureHeight: 96,
);
void main() async {
WidgetsFlutterBinding.ensureInitialized();
_sprite = await Sprite.loadSprite('minotaur.png', width: 96, height: 96);
await Flame.images.load('minotaur.png');
_animation = _animationSpriteSheet.createAnimation(
0,
stepTime: 0.2,
to: 19,
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animation as a Widget Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Position _position = Position(256.0, 256.0);
@override
void initState() {
super.initState();
changePosition();
}
void changePosition() async {
await Future.delayed(const Duration(seconds: 1));
setState(() {
_position = Position(10 + _position.x, 10 + _position.y);
print(_position.toString());
});
}
void _clickFab(GlobalKey<ScaffoldState> key) {
key.currentState.showSnackBar(
const SnackBar(
content: const Text('You clicked the FAB!'),
),
);
}
@override
Widget build(BuildContext context) {
final key = GlobalKey<ScaffoldState>();
return Scaffold(
key: key,
appBar: AppBar(
title: const Text('Animation as a Widget Demo'),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('Hi there! This is a regular Flutter app,'),
const Text('with a complex widget tree and also'),
const Text('some pretty sprite sheet animations :)'),
Container(
width: 200,
height: 200,
child: AnimationWidget(animation: _animation),
),
const Text('Neat, hum?'),
const Text(
'By the way, you can also use static sprites as widgets:'),
Container(
width: 200,
height: 200,
child: SpriteWidget(sprite: _sprite),
),
Container(
width: 200,
height: 200,
child: SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 0)),
),
Container(
width: 200,
height: 200,
child: SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 5)),
),
const Text('Sprites from Elthen\'s amazing work on itch.io:'),
const Text('https://elthen.itch.io/2d-pixel-art-minotaur-sprites'),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => _clickFab(key),
child: const Icon(Icons.add),
),
);
}
}
推荐阅读
- python - 导入 Boost Python 模块时出错 (function_impl_base9max_arityEv)
- c++ - 使用 occi 库将 c++ 程序与 Oracle 连接
- android - 布局问题并帮助我解决在所有设备中扩展的问题
- sql-server - 在 ubuntu 上配置 MSSQL Server - 无法打开或读取持久注册表:\SystemRoot\security.hiv
- rrdtool - 如何创建具有特定时间的rrd文件?
- javascript - 无法创建 HTML
- authentication - 如何实现跨域单点登录
- java - 更新 Intellij 2019.1 后未指定模块
- ios - 通过 Facebook 登录不适用于我的 iOS 应用
- r - rtruncnorm 中的经验参数