Как увеличить отдельные элементы холста? - PullRequest
Новая
       7

Как увеличить отдельные элементы холста?

0 голосов
/ 14 января 2019

Я пытаюсь реализовать функцию на моем холсте, используя fabricjs, которая позволит мне увеличивать / уменьшать отдельное изображение, которое было загружено пользователем, и водяной знак, который я добавляю вместе с ним, но не имеющий целого холста увеличить оба объекта одновременно. 

uploadImage = event => {
  let file = event.target.files[0];
  this.state.canvas.clear();
  let URL;
  const reader = new FileReader();
  reader.addEventListener(
    "load",
    () => {
      URL = reader.result;
      fabric.Image.fromURL(URL, myImg => {
        let img1 = myImg.set({
          left: 0,
          top: 0,
          width: 500,
          height: 500
        });
        this.state.canvas.add(img1);
      });
    },
    false
  );
  if (file) {
    reader.readAsDataURL(file);
  }

  fabric.Image.fromURL("watermark.jpeg", oImg1 => {
    oImg1.set({
      left: 0,
      top: 0,
      width: 500,
      height: 100,
      centeredScaling: true,
      hasControls: false,
      lockMovementX: true,
      lockMovementY: true,
      hasControls: false
    });
    this.state.canvas.add(oImg1);
    this.state.canvas.renderAll();
  });

    this.state.canvas.on("mouse:wheel", opt => {
    const delta = opt.e.deltaY;
    const pointer = this.state.canvas.getPointer(opt.e);

    let zoom = this.state.canvas.getZoom();

    zoom = zoom + delta / 200;
    if (zoom > 20) zoom = 20;
    if (zoom < 0.01) zoom = 0.01;
    this.state.canvas.zoomToPoint(
      { x: opt.e.offsetX, y: opt.e.offsetY }, 
      zoom
    );

    opt.e.preventDefault();
    opt.e.stopPropagation();
  });
};

Я попытался просмотреть документы фабрики, но они не имеют большого смысла для меня.

Предполагается увеличить каждое изображение отдельно, а не весь холст.

Да, я знаю, что это плохой код, и, вероятно, не соблюдаю соглашения, я новичок в реагировании / javascript / программирования в целом.

1 Ответ

0 голосов
/ 18 января 2019

Довольно легко масштабировать объекты по отдельности, проверьте мою скрипку, где вы можете навести изображение и увеличить его колесом мыши: http://jsfiddle.net/mmalex/q1m8t2gp/

Zoom FabricJS image by scrolling over it

Ключевым моментом является подписка на mousewheel событие для каждого объекта изображения отдельно. Во-вторых, вам нужно будет перецентрировать изображение и не забыть запустить canvas.renderAll(); в конце. 

oImg.on('mousewheel', function(options) {

  var scrollDirection = options.e.deltaY > 0 ? -1 : 1;

  // on what object it was scrolled?
  let target = canvas.findTarget(options.e.target);

  //updates image scale by +/- 5%
  var marioScale = target.scaleX;
  marioScale += scrollDirection * 0.05;

  var scaledWidth = target.getScaledWidth();
  var scaledHeight = target.getScaledHeight();

  //remember where was the center of the image
  var oldCenter = new fabric.Point(
    target.left + scaledWidth / 2,
    target.top + scaledHeight / 2);

  target.scale(marioScale);

  //after scale center moved, we need to re-center back to old center
  var newScaledWidth = target.getScaledWidth();
  var newScaledHeight = target.getScaledHeight();

  target.left = oldCenter.x - newScaledWidth / 2;
  target.top = oldCenter.x - newScaledHeight / 2;

  canvas.renderAll();
});
...