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

135 阅读1分钟
//计算放大比例 让试图充满宽或者高
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)的区域

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

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

image.png

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

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

image.png

..viewfinder.position = Vector2(250, 250)
..viewfinder.anchor = Anchor.center

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

387b2fcf-8541-4ffa-a65c-972a79b1ab58.png