Заменить элементы управления изменением размера и поворотом Fabric.js пользовательскими изображениями?

Я ищу, например, как заменить Fabric.js изменять размер и поворачивать прямоугольники с помощью пользовательских изображений ... кто-нибудь делал это?

Спасибо.


person Rob R    schedule 19.09.2012    source источник
comment
На данный момент это не очень просто, за исключением изменения исходного кода или отображения изображений поверх каждого элемента управления, как в этой демонстрации — fabricjs.com/interaction-with-objects-outside-canvas   -  person kangax    schedule 20.09.2012
comment
Этот вопрос относится к 2012 году. Если вы пришли сюда через Google, вы также можете проверить этот более свежий ответ: stackoverflow.com/ а/24533063/29182   -  person Ziggy    schedule 11.12.2014


Ответы (1)


Вы можете сделать это, переопределив прототип следующим образом:

var topLeftImage = new Image();
topLeftImage.src = 'images/tl.png';

var topRightImage = new Image();
topRightImage.src = 'images/tr.png';

var bottomRightImage = new Image();
bottomRightImage.src = 'images/br.png';

//Warning I modified some other things here as well, please copy this from the sources and modify it then
fabric.Object.prototype.drawCorners = function(ctx) {
  if (!this.hasControls) return;

  var size = this.cornersize,
      size2 = size / 2,
      strokeWidth2 = this.strokeWidth / 2,
      left = -(this.width / 2),
      top = -(this.height / 2),
      _left,
      _top,
      sizeX = size / this.scaleX,
      sizeY = size / this.scaleY,
      paddingX = this.padding / this.scaleX,
      paddingY = this.padding / this.scaleY,
      scaleOffsetY = size2 / this.scaleY,
      scaleOffsetX = size2 / this.scaleX,
      scaleOffsetSizeX = (size2 - size) / this.scaleX,
      scaleOffsetSizeY = (size2 - size) / this.scaleY,
      height = this.height,
      width = this.width;

  ctx.save();

  ctx.lineWidth = 1 / Math.max(this.scaleX, this.scaleY);

  ctx.globalAlpha = 1; //this.isMoving ? this.borderOpacityWhenMoving : 1;
  ctx.strokeStyle = ctx.fillStyle = '#333333';

  // top-left
  _left = left - scaleOffsetX - strokeWidth2 - paddingX;
  _top = top - scaleOffsetY - strokeWidth2 - paddingY;

  ctx.clearRect(_left, _top, sizeX, sizeY);  
  ctx.drawImage(topLeftImage, _left, _top, sizeX, sizeY);

  // top-right
  _left = left + width - scaleOffsetX + strokeWidth2 + paddingX;
  _top = top - scaleOffsetY - strokeWidth2 - paddingY;

  ctx.clearRect(_left, _top, sizeX, sizeY);  
  ctx.drawImage(topRightImage, _left, _top, sizeX, sizeY);

  // bottom-left
  _left = left - scaleOffsetX - strokeWidth2 - paddingX;
  _top = top + height + scaleOffsetSizeY + strokeWidth2 + paddingY;

  ctx.clearRect(_left, _top, sizeX, sizeY);
  ctx.strokeRect(_left, _top, sizeX, sizeY);

  // bottom-right
  _left = left + width + scaleOffsetSizeX + strokeWidth2 + paddingX;
  _top = top + height + scaleOffsetSizeY + strokeWidth2 + paddingY;

  ctx.clearRect(_left, _top, sizeX, sizeY);
  ctx.drawImage(bottomRightImage, _left, _top, sizeX, sizeY);

  ctx.restore();

  return this;
};
person Alexander Kludt    schedule 12.10.2012
comment
Привет @Alexander Kludt, не могли бы вы подробнее объяснить свой код, куда добавить этот код или переопределить его в библиотеке тканей ..? пожалуйста, порекомендуйте - person Imran Khan; 10.01.2014