如何在matter.js中实现RTS游戏视口平移并修正缩放问题？

问题场景 #

使用Matter.js开发类《星际争霸》的RTS游戏，需要实现视口平移功能：画布作为600x600的视口，游戏世界尺寸更大。尝试用Render.lookAt设置视口时，出现显示区域过小且拉伸的问题，目标是精确显示x=50、y=0，宽600、高600的游戏区域。

原有代码 #

创建画布与渲染器：

const canvas = document.getElementById("canvas");

// create a renderer
var render = Render.create({
    //element: document.body,
    canvas: canvas,
    engine: engine,
    options: {
        width: 650,
        height: 600,
        hasBounds: true,
        wireframes: false, // required for images
        background: 'green'//'transparent'
    }
});

canvas.width = 600;
canvas.height = 600;

尝试设置视口的代码：

Render.lookAt(render, [{
    "min": {
        "x": 50,
        "y": 0
    },
    "max": {
        "x": 600,
        "y": 600
    }
}]);

问题原因 #

Render.lookAt的核心逻辑是自动计算缩放比例，让传入的目标边界/物体刚好适配渲染画布的尺寸，这会导致它自动调整zoom值，从而出现拉伸或区域显示异常。此外，原有代码中render.options.width（650）与画布实际尺寸（600）不一致，进一步加剧了缩放计算的错误。

解决方案 #

要实现固定尺寸的视口平移，需要手动设置渲染器的边界并固定缩放比例，而非依赖Render.lookAt的自动适配逻辑：

1. 统一画布与渲染器尺寸
   先设置画布尺寸，再让渲染器的选项尺寸与画布保持一致，避免计算冲突：

   const canvas = document.getElementById("canvas");
   // 先设置画布实际尺寸
   canvas.width = 600;
   canvas.height = 600;
   
   // 创建渲染器，选项尺寸与画布一致
   const render = Render.create({
       canvas: canvas,
       engine: engine,
       options: {
           width: canvas.width,
           height: canvas.height,
           hasBounds: true,
           wireframes: false,
           background: 'green'
       }
   });
   

2. 手动设置精确视口边界
   直接修改render.bounds来定义要显示的游戏区域，同时固定zoom为1，确保无自动缩放：

   // 目标视口：x从50到50+600=650，y从0到0+600=600
   render.bounds = {
       min: { x: 50, y: 0 },
       max: { x: 50 + canvas.width, y: 0 + canvas.height }
   };
   // 固定缩放比例，禁止自动调整
   render.options.zoom = 1;
   
   // 启动渲染
   Render.run(render);
   

3. 实现鼠标拖拽平移（可选）
   若需要支持鼠标拖拽平移视口，只需实时修改render.bounds的坐标即可：

   let isDragging = false;
   let lastMousePos = { x: 0, y: 0 };
   
   canvas.addEventListener('mousedown', (e) => {
       isDragging = true;
       lastMousePos = { x: e.clientX, y: e.clientY };
   });
   
   canvas.addEventListener('mousemove', (e) => {
       if (!isDragging) return;
       const deltaX = e.clientX - lastMousePos.x;
       const deltaY = e.clientY - lastMousePos.y;
       
       // 平移视口：鼠标拖拽方向与视口移动方向相反
       render.bounds.min.x -= deltaX;
       render.bounds.max.x -= deltaX;
       render.bounds.min.y -= deltaY;
       render.bounds.max.y -= deltaY;
       
       lastMousePos = { x: e.clientX, y: e.clientY };
   });
   
   canvas.addEventListener('mouseup', () => {
       isDragging = false;
   });
   

内容的提问来源于stack exchange，提问作者omega