JavaScript перевод текста не работает в электронном

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>