如何放大画布的各个元素?

问题描述

我正在尝试使用fabricjs在画布中实现一项功能，该功能将允许我放大/缩小用户上传的单个图像以及要添加的水印，但没有完整的画布同时缩放两个对象.

I'm trying to implement a feature in my canvas using fabricjs that will allow me to zoom in/out an individual image thats been uploaded by a user and the watermark which I'm adding with it but not having the WHOLE canvas zoom both objects at the same time.

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();
  });
};

我已经尝试过fabricjs文档，但是对我来说它们并没有多大意义.

I've tried going through the fabricjs docs but they don't make a great deal of sense to me.

应该分别缩放每个图像而不是整个画布.

It's supposed to zoom each image separately instead of the whole canvas.

是的，我知道它的错误代码，并且很可能不遵循惯例，我通常是React/javascript/programming的新手.

Yes I know its bad code and probably doesn't follow convention, I'm new to react/javascript/programming in general.

推荐答案

单独缩放对象非常容易，请检查我的小提琴，您可以在其中将图像悬停并通过鼠标滚轮进行缩放: http://jsfiddle.net/mmalex/q1m8t2gp/

It is quite easy to scale objects individually, check my fiddle where you can hover the image and zoom it by mouse wheel: http://jsfiddle.net/mmalex/q1m8t2gp/

关键是分别在每个图像对象上订阅mousewheel事件.其次，您需要重新定位图像，不要忘记最后运行canvas.renderAll();.

The key point is to subscribe on mousewheel event on each image object separately.Secondly, you would need to re-center image and not forget to run canvas.renderAll(); in the end.

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();
});

这篇关于如何放大画布的各个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！