Question

我有一个复杂的问题（至少对我而言），我一直在努力解决这个问题，但我并没有真正想到这个问题。

我有一个简单的圆圈和一个用画布绘制的方形，有一个允许我调整视角的变换。

问题是，当我单击并拖动时，对象相对于角度的变化移动不正确。

这是我的抽奖代码：

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/

重现行为问题：

首先点击并拖动注意，正方形和圆圈一起正确移动。
现在用鼠标滚轮调整相机的角度，注意它们两者的角度是否正确。
然而，现在在该角度，尝试单击并拖动，并注意世界空间中两个对象之间的断开连接。他们不再正确地一起移动。

侧注：看起来圆圈在角度视图中正确移动但不是正方形。但不知道为什么。

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

谢谢！

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;

更新了代码段：

＆＃13;

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);
}

＆＃13;

#canvas {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

希望这有帮助。

在画布中进行转换，在移动时将精灵保持在正确的位置

1 个答案: