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

火柴就是我2025-09-08 17:31

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)位于屏幕中央,内容中心居中）。效果图如下: