javascript - 在 Canvas 中变换以在移动时将 Sprite 保持在正确的位置

Question

我有一个复杂的问题(至少对我来说是这样)，我一整天都在努力解决这个问题，但我并没有真正找到解决办法。

我在 Canvas 上绘制了一个简单的圆和一个正方形，并通过转换使我可以改变视角。

问题是，当我单击并拖动时，对象没有根据 Angular 变化正确移动。

这是我的绘制代码:

function draw(){

  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.save();

  ctx.setTransform(1,0,0,1,canvas.width/2,canvas.height/2);  

  ctx.beginPath();

  var x  = (object.x - (camera.x/1)) * camera.scale;
      x *= transform.x;
  var y  = (object.y - (camera.y/1)) * camera.scale;
      y *= transform.y;

  ctx.rect(x-5, y-5,10,10);
  ctx.fill();

  ctx.restore();
  ctx.save();

  ctx.beginPath();

  ctx.setTransform(transform.x,0,0,transform.y,canvas.width/2,canvas.height/2); 

  var x  = (origin.x - (camera.x/1)) * camera.scale;
      x *= transform.x;
  var y  = (origin.y - (camera.y/1)) * camera.scale;
      y *= transform.y;      

  ctx.arc(x,y,radius,0,Math.PI*2);
  ctx.stroke();

  ctx.restore();

  window.requestAnimationFrame(draw); 

}

鉴于在没有上下文的情况下可能很难理解我在说什么，而且只看我的代码，我在这里提供了一个工作演示:

https://jsfiddle.net/h9vf9jd4/

重现行为问题:

1. 首先点击并拖动注意正方形和圆形一起正确移动。
2. 现在用鼠标滚轮来调整相机的 Angular ，注意它们的 Angular 正确地结合在一起。
3. 但是，现在以那个 Angular ，尝试单击并拖动，并注意世界空间中两个对象之间的断开连接。他们不再一起正确移动。

旁注:在斜 View 中，圆似乎正确移动，但不是正方形。但不知道为什么。

所以这就是我卡住的地方，不知道如何解决。我希望有人熟悉这个东西知道如何解决它!

谢谢!

Answer 1

因为您已经设置了转换，所以您不再需要它。

只需删除以下两行:

 var x = (origin.x - (camera.x / 1)) * camera.scale;
 //x *= transform.x;
 var y = (origin.y - (camera.y / 1)) * camera.scale;
 //y *= transform.y;

更新的片段:

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  radius = 150;
canvas.addEventListener('contextmenu', function(e) {
  e.preventDefault();
}, false);
canvas.addEventListener('wheel', function(e) {

  if (e.deltaY < 0) {
    transform.y += 0.05;
  } else {
    transform.y -= 0.05;
  }
  if (transform.y < 0.7) {
    transform.y = 0.7;
  }
  if (transform.y > 1) {
    transform.y = 1;
  }

}, false);


ctx.strokeStyle = '#000000';
ctx.fillStyle = '#000000';
var origin = {
  'x': 50,
  'y': 30
}

var object = {
  'x': origin.x + radius,
  'y': origin.y - radius
};
var transform = {
  'x': 1,
  'y': 1
}
var camera = {
  'x': 0,
  'y': 0,
  'scale': 1
}


function draw() {

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, canvas.width / 2, canvas.height / 2);
  ctx.beginPath();

  var x = (object.x - (camera.x / 1)) * camera.scale;
  x *= transform.x;
  var y = (object.y - (camera.y / 1)) * camera.scale;
  y *= transform.y;

  ctx.rect(x - 5, y - 5, 10, 10);
  ctx.fill();

  ctx.restore();
  ctx.save();

  ctx.beginPath();
  ctx.setTransform(transform.x, 0, 0, transform.y, canvas.width / 2, canvas.height / 2);

  var x = (origin.x - (camera.x / 1)) * camera.scale;
  //x *= transform.x;
  var y = (origin.y - (camera.y / 1)) * camera.scale;
  //y *= transform.y;

  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.stroke();

  ctx.restore();

  window.requestAnimationFrame(draw);


}

draw();


//element.addEventListener('mousedown', function(e) { cameraAngle(e,this);}, false);
canvas.addEventListener('mousedown', function(e) {
  moveCamera(e, this);
}, false);

function moveCamera(evt, el) {
  var x = evt.offsetX,
    y = evt.offsetY;


  function update(e) {
    var difx = x - e.offsetX,
      dify = y - e.offsetY;

    x = e.offsetX;
    y = e.offsetY;

    camera.x += difx;
    camera.y += dify;
  }

  function clear() {
    el.removeEventListener('mousemove', update, false);
    this.removeEventListener('mouseup', clear, false);
  }
  el.addEventListener('mousemove', update, false);
  document.body.addEventListener('mouseup', clear, false);
}

#canvas {
  border: 1px solid black;
}

<canvas id="canvas" width="600" height="600"></canvas>

希望这对您有所帮助。