Question

当用户选择其中一个裁剪操作比率（SQUARE / PORTRAIT / LANDSCAPE）时，我需要能够切换裁剪器的背景图像。如果我设置三个变量，每个方向一个，并在开关案例中引用该url，它应该工作。我坚持如何设置vars中的图像。此外，jQuery包含在项目中，因此不是问题。

CropOperation.prototype.setSize = function(size) {
var h, height, w, width, _ref;
_ref = this.app.ui.getCanvas().getImageData(), width = _ref.width, height = _ref.height;
this.options.size = size;
this.options.start.set(0.1, 0.1);
this.options.end.set(0.9, 0.9);
switch (size) {
  case "square":
    this.options.ratio = 1;
    orientation = "SQUARE";
    $(".imgly-canvas-cropping-center").css('background-image', 'url("crop-square.png")');
    break;
  case "9:16":
    this.options.ratio = 9 / 16;
    orientation = "PORTRAIT";
    $(".imgly-canvas-cropping-center").css('background-image', 'url("crop-area.png")');
    break;
  case "16:9":
    this.options.ratio = 16 / 9;
    orientation = "LANDSCAPE";
    break;
}
if (this.options.ratio) {
  if (width / height <= this.options.ratio) {
    this.options.start.x = 0.1;
    this.options.end.x = 0.9;
    h = 1 / height * (width / this.options.ratio * 0.8);
    this.options.start.y = (1 - h) / 2;
    this.options.end.y = 1 - this.options.start.y;
  } else {
    this.options.start.y = 0.1;
    this.options.end.y = 0.9;
    w = 1 / width * (this.options.ratio * height * 0.8);
    this.options.start.x = (1 - w) / 2;
    this.options.end.x = 1 - this.options.start.x;
  }
}
return this.emit("updateOptions", this.options);
};

Answer 1

简单回答：我只需将vars的值设置为switch case：

CropOperation.prototype.setSize = function(size) {
var h, height, w, width, _ref;
_ref = this.app.ui.getCanvas().getImageData(), width = _ref.width, height = _ref.height;
this.options.size = size;
this.options.start.set(0.1, 0.1);
this.options.end.set(0.9, 0.9);
switch (size) {
  case "square":
    this.options.ratio = 1;
    orientation = "SQUARE";
    $(".imgly-canvas-cropping-center").css('background-image', 'url("crop-square.png")');
    break;
  case "9:16":
    this.options.ratio = 9 / 16;
    orientation = "PORTRAIT";
    $(".imgly-canvas-cropping-center").css('background-image', 'url("crop-area.png")');
    break;
  case "16:9":
    this.options.ratio = 16 / 9;
    orientation = "LANDSCAPE";
    break;
}
if (this.options.ratio) {
  if (width / height <= this.options.ratio) {
    this.options.start.x = 0.1;
    this.options.end.x = 0.9;
    h = 1 / height * (width / this.options.ratio * 0.8);
    this.options.start.y = (1 - h) / 2;
    this.options.end.y = 1 - this.options.start.y;
  } else {
    this.options.start.y = 0.1;
    this.options.end.y = 0.9;
    w = 1 / width * (this.options.ratio * height * 0.8);
    this.options.start.x = (1 - w) / 2;
    this.options.end.x = 1 - this.options.start.x;
  }
}
return this.emit("updateOptions", this.options);
};

使用开关盒根据情况用css改变背景图像

1 个答案: