在 fabricjs canvas 上放大时如何正确放置对象？

Question

我正在使用 fabricjs 加载图像，使用鼠标滚轮放大指针位置，然后单击以添加圆圈。

当没有缩放时，在点击的地方创建对象。放大时，唯一正确放置的圆圈是您放大的位置（缩放后不要移动鼠标，然后单击）。如果在放大时单击其他任何地方，圆圈将放置在其他地方。缩小后可以看到。

我已经浏览了很多相关的堆栈答案。尝试了很多东西。没有解决方案有效。我是fabricjs的新手，整个定位系统似乎不必要的复杂。

如何在放大的情况下将圆圈转到点击图片的位置？

提前致谢。

canvas.on('mouse:wheel', function (opt) {

    var delta = opt.e.deltaY;
    var pointer = canvas.getPointer(opt.e);
    var zoom = canvas.getZoom();
    zoom = zoom - delta * 0.01;
    if (zoom >= 20) {
        zoom = 20;
    }
    if (zoom <= 1) {
        zoom = 1;
        canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
    }

    canvas.zoomToPoint({
        x: opt.e.offsetX,
        y: opt.e.offsetY
    }, zoom);

    canvas.forEachObject(function (o) {
        o.setCoords();
    });

    opt.e.preventDefault();
    opt.e.stopPropagation();
});
canvas.on('mouse:up', function (opt) {
    if (opt.button === 1) {
        circle = new fabric.Circle({
            left: opt.e.offsetX,
            top: opt.e.offsetY,
            radius: 10,
            strokeWidth: 3,
            stroke: 'red',
            fill: null,
            opacity: .5,
            selectable: false,
            originX: 'center',
            originY: 'center'

        });
        circle.setCoords();
        group.addWithUpdate(circle);
        canvas.renderAll();
        canvas.calcOffset();
    }
});

Answer 1

只需将光标设置为圆形对象的输入坐标...

var pointer = canvas.getPointer(opt.e);

    circle = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 10,
      strokeWidth: 3,
      stroke: 'red',
      fill: null,
      opacity: .5,
      selectable: false,
      originX: 'center',
      originY: 'center'
    });

var vw = $('#container').width();
var vh = $('#container').height();

var canvas, group, image = {}; // to be avail throughout

$('#container').append('<canvas id="canvasview" width="' + vw + '" height="' + vh + '"></canvas>');

var canvas = new fabric.Canvas("canvasview", {
  fireRightClick: true,
  stopContextMenu: false
});
canvas.setWidth(vw);
canvas.setHeight(vh);
canvas.imageSmoothingEnabled = false


var ogi = $('img');


$(ogi).on('load', function() {

  // had to do this slop in particular case
  oiw = ogi.width();
  var ogs = ogi.attr('src');
  ogi.remove();
  var img = document.createElement("img");
  img.src = ogs;
  img.setAttribute("id", "photo");

  //image ratio
  var nw = img.width * vh / img.height;

  image = new fabric.Image(img, {});
  image.scaleToHeight(vh);
  image.center();

  var name = new fabric.Text("WALLPAPERIMAGE", {
    left: 0,
    top: 0,
    fontSize: 10,
    cornerSize: 6
  });

  group = new fabric.Group([image, name], {
    lockMovementX: true,
    lockMovementY: true,
    hasControls: false,
    hasBorders: false,
    hasRotatingPoint: false,
    subTargetCheck: true,
    selectable: false
  });
  canvas.add(group);
  group.scaleToHeight(vh);
  group.clipPath = image;
  group.center();
  group.setCoords();
  canvas.renderAll();
});


canvas.on('mouse:wheel', function(opt) {

  var delta = opt.e.deltaY;
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom();
  zoom = zoom - delta * 0.01;
  if (zoom >= 20) {
    zoom = 20;
  }
  if (zoom <= 1) {
    zoom = 1;
    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
  }

  canvas.zoomToPoint({
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom);

  canvas.forEachObject(function(o) {
    o.setCoords();
  });

  opt.e.preventDefault();
  opt.e.stopPropagation();
});
canvas.on('mouse:up', function(opt) {
  if (opt.button === 1) {
    //set your cursor as the input coordinates
    var pointer = canvas.getPointer(opt.e);

    circle = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 10,
      strokeWidth: 3,
      stroke: 'red',
      fill: null,
      opacity: .5,
      selectable: false,
      originX: 'center',
      originY: 'center'

    });
    circle.setCoords();
    group.addWithUpdate(circle);
    canvas.renderAll();
    canvas.calcOffset();
  }
});

#container {
  width: 600px;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>
<img src="https://wallpaper-gallery.net/top/wallpapers-1.jpg" />

在 fabricjs canvas 上放大时如何正确放置对象？

How to get objects correctly placed when zoomed in on fabricjs canvas?

javascript

fabricjs