Question

我需要缩放到fabric js中画布上的特定坐标（X，Y）。

我知道将会调用2个函数 1.缩放（x次） 2.将图像移动到某个x，y位置，使图像显示在该坐标处。

此外我需要一旦放大，我指定一些其他坐标，它应该缩放到新的坐标。任何提示

Answer 1

您可以自己定义相机。

您有一些绝对坐标系，并且您希望将该系统中的内容投影到屏幕上。这是由相机对象完成的。相机在绝对坐标系中的某个位置具有缩放系数和旋转角度。 toScreen函数采用绝对坐标并将它们转换为屏幕上的坐标。 fromScreen反其道而行之。 moveBy是相对移动，即它在屏幕坐标中移动而不是绝对坐标。这很有用，例如，如果你有一个图像，并且你希望它跟随你的鼠标指针，因为鼠标指针坐标是屏幕坐标。因此，您只需计算指针移动了多少，然后在相机上调用moveBy，并使用这些数字的负数。（否定因为如果相机向左移动，它产生的图像会在屏幕上向右移动）或者，假设您单击屏幕上的某个点，然后您希望相机放大到该点。然后你只说camera.moveBy(pointX, pointY)（其中pointX / Y是相对于屏幕中心的鼠标位置，即摄像机的位置，因为在屏幕坐标中摄像机总是在位置（0,0））并更改如果需要缩放系数。顺便说一句。＆＃34;屏幕＆＃34;这当然是你的画布。屏幕坐标中的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};
};

缩放到HTML5画布上的特定坐标（Fabric js）

1 个答案: