跟着官方demo 学flame 之 word 坐标系以及Camera的一些属性

ini 复制代码
//计算放大比例 让试图充满宽或者高
final zoomLevel = min(
  canvasSize.x / trackSize.x,
  canvasSize.y / trackSize.y,
);
startCamera = CameraComponent(world: world)
  ..viewfinder.position = Vector2(0, 0) //指定相机瞄准的坐标
  ..viewfinder.anchor = Anchor.bottomLeft //指定瞄准的位置在屏幕的位置
  ..viewfinder.zoom = zoomLevel - 0.2;//指定放大的倍数
add(startCamera);

前情提要:1 word 的世界是以左下角为(0,0) 向右 向下 为正。

2 这里的视图内容是一个(0,0)-(500,500)的区域

js 复制代码
 ..viewfinder.position = Vector2(0, 0) //指定相机瞄准的坐标
 ..viewfinder.anchor = Anchor.bottomLeft //指定瞄准的位置在屏幕的位置

指定相机瞄准(0,0),且相机位于左下角。效果图如下

js 复制代码
 ..viewfinder.position = Vector2(0, 0) //指定相机瞄准的坐标
 ..viewfinder.anchor = Anchor.center //指定瞄准的位置在屏幕的位置

指定相机瞄准(0,0),且相机居中(也就是相机瞄准的(0,0)位于屏幕中央)。效果图如下

ini 复制代码
..viewfinder.position = Vector2(250, 250)
..viewfinder.anchor = Anchor.center

指定相机瞄准(250,250),且相机居中(也就是相机瞄准的(250,250)位于屏幕中央,内容中心居中)。效果图如下:

相关推荐
新镜4 小时前
【Flutter】drag_select_grid_view: ^0.6.2 使用
flutter
程序员老刘4 小时前
Google突然“变脸“,2026年要给全球开发者上“紧箍咒“?
android·flutter·客户端
鹏多多.9 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
新镜1 天前
【Flutter】RefreshIndicator 无法下拉刷新问题
flutter
星秋Eliot1 天前
Flutter的三棵树
前端·flutter
humiaor1 天前
Flutter之riverpod状态管理Widget UI详解
flutter·consumer·widget·hooks·provider·riverpod·hookwidget
农夫三拳_有点甜1 天前
Flutter Stack 组件总结
flutter
MaoJiu1 天前
Flutter混合开发:在iOS工程中嵌入Flutter Module
flutter·ios
新镜1 天前
【Flutter】flutter_local_notifications并发下载任务通知实践
flutter