Question

我正在使用ctx.translate(x, y)在画布游戏中移动“相机”。但是由于某种原因，这是行不通的。

这就是我正在使用的：

setCameraPos: function(x, y) {
        //ctx.save()
        ctx.translate(x, y)
        ctx.setTransform(1, 0, 0, 1, 0, 0)
        //ctx.restore()
}

它根本不起作用。它不会改变相机的位置。有什么错误吗？完全没有错误。我正在使用Electron 3.0.3 Beta。

我接受任何图书馆。

const canvas = document.getElementById('main')
const ctx = canvas.getContext('2d')


ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 30, 30)
// This doesn't work | VVV
ctx.translate(20, 20)
ctx.setTransform(1, 0, 0, 1, 0, 0)

#main {
  background-color: black;
}

<canvas id="main">

</canvas>

Answer 1

根据您提供的内容，翻译操作将无法在任何地方使用，不仅在Electron中可用。

ctx.setTransform()方法将转换矩阵设置为绝对值，当前矩阵将被丢弃，传递的值将被设置为矩阵值。
1, 0, 0, 1, 0, 0是本机矩阵变换的值（即未变换）。

因此，调用ctx.setTransform(1, 0, 0, 1, 0, 0)会将您的变换矩阵重置为其默认值，并对所有相对的 translate（）， rotate（）或 transform进行调用（）没用。

这些方法之所以相对，是因为它们加起来等于当前矩阵值。例如，

ctx.translate(10, 10);
// here next drawing will be offset by 10px in both x and y direction
ctx.translate(40, -10);
// this adds up to the current 10, 10, so we are now offset by 30, 0

如果您希望您的 translate 工作，请不要在此处调用setTransform，甚至不要将其替换为setTransform(1, 0, 0, 1, 20, 20)

此外，在代码段中，绘制完后即可设置转换矩阵。转换将仅应用于下一个图形，而不应用于先前的图形。

现在，您可能处于动画循环中，并且需要在每个循环中重置矩阵。在这种情况下，请在绘图循环的开始处调用ctx.setTransform(1,0,0,1,0,0)作为最后一个操作，并在绘图之前调用 translate（）。

const canvas = document.getElementById('main');
const ctx = canvas.getContext('2d');
let x = 0;
ctx.fillStyle = 'red'
anim();

function draw() {
  // reset the matrix so we can clear everything
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //set the transform before drawing
  ctx.translate(x - 30, 20)
  //which is actually the same as 
  //ctx.setTransform(1, 0, 0, 1, x, 20);
  ctx.fillRect(0, 0, 30, 30);
}
function anim() {
  x = (x + 2) % (canvas.width + 60);
  draw();
  requestAnimationFrame(anim);
}

#main {
  background-color: black;
}

<canvas id="main"></canvas>

JavaScript上下文翻译不适用于电子

1 个答案: