缩放到HTML5画布上的特定坐标(Fabric js)

Question

我需要在fabrics js中缩放到画布上的特定坐标(X，Y)。

我知道会有2个函数被调用1. Scaled (x×) 2.将图像移动到某个x，y位置，这样图像看起来就像是在那个坐标上。

我还需要，一旦放大，我指定了一些其他的坐标，它应该缩放到新的坐标。任何小贴士

Answer 1

你可以给自己定义一个相机。

你有一些绝对坐标系，你想把东西从那个系统投影到屏幕上。这是由摄影机对象完成的。相机在你的绝对坐标系中有一个位置，它有一个缩放因子和一个旋转角度。toScreen函数获取绝对坐标，并将其转换为屏幕上的坐标。fromScreen做了相反的事情。moveBy是相对移动，即它在屏幕坐标中移动，而不是在绝对坐标中移动。这是很有用的，例如，如果您有一个图像，并且您希望它跟随鼠标指针，因为鼠标指针坐标是屏幕坐标。因此，您只需计算指针移动了多少，然后使用这些数字的负数在相机上调用moveBy。(否定，因为如果相机向左移动，它产生的图像在屏幕上向右移动)，或者假设您单击屏幕上的一个点，然后希望相机缩放到该点上。然后您只需输入camera.moveBy(pointX, pointY) (其中pointX/Y是鼠标相对于屏幕中心的位置，即相机的位置，因为在屏幕坐标中，相机始终位于位置(0，0))，并根据需要更改缩放因子。顺便说一句。这里的“屏幕”当然是你的画布。屏幕坐标中的pos (0,0)应该是画布的中心。所以要强调的是，画布不是你的绝对坐标系，而是相机将其图像投射到的屏幕。

function Camera() {
  this.x = 0;
  this.y = 0;
  this.zoom = 1;
  this.angle = 0;
}

Camera.prototype.moveTo = function(x, y) {
  this.x = x; this.y = y;
};
Camera.prototype.moveBy = function(x, y) {
  var xy = this.fromScreen(x, y);
  this.moveTo(xy.x, xy.y);
};
Camera.prototype.rotateTo = function(angle) {
  while(angle < 0) angle += 360;
  angle %= 360;
  this.angle = angle;
};
Camera.prototype.rotateBy = function(angle) {
  this.rotateTo(this.angle + angle);
};
Camera.prototype.zoomTo = function(zoom) {
  this.zoom = zoom;
};
Camera.prototype.zoomBy = function(zoom) {
  this.zoom *= zoom;
};
Camera.prototype.toScreen = function(x, y) {
  x -= this.x; y -= this.y;
  if(this.angle !== 0) {
    var rad = Math.PI * this.angle / 180;
    rad = 2 * Math.PI - rad;
    var _x = x * Math.cos(rad) - y * Math.sin(rad),
        _y = x * Math.sin(rad) + y * Math.cos(rad);
    x = _x; y = _y;
  }
  return {x: x * this.zoom,
          y: y * this.zoom}
};
Camera.prototype.fromScreen = function(x, y) {
  x /= this.zoom;
  y /= this.zoom;
  if(this.angle !== 0) {
    var rad = Math.PI * this.angle / 180;
    var _x = x * Math.cos(rad) - y * Math.sin(rad),
        _y = x * Math.sin(rad) + y * Math.cos(rad);
    x = _x; y = _y;
  }
  x += this.x; y += this.y;
  return {x: x,
          y: y};
};