javascript - Fabric.js 相对于 getZoom() 和 getWidth()/getHeight() 定位元素

Question

我正在使用 Fabric.js 和 React/Redux，我试图在 Canvas 上实现以下效果:(请注意，我在顶部和左侧有 2 个标尺，平移时不应移动，只能水平和垂直移动) .

这是我想要获得的效果的视频:https://vid.me/qs5Q

我有以下代码:

var canvas = new fabric.Canvas('c');
var topRuler = new fabric.Text('this is the top ruler', {
  top: 0,
  left: 60,
  selectable: false
});
var leftRuler = new fabric.Text('this is the left ruler', {
  top: 150,
  left: -125,
  selectable: false
});
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 180,
  top: 100
});
var triangle = new fabric.Triangle({
  fill: 'green',
  left: 150,
  top: 170
});
var panning = false;
var panningOn = false;
leftRuler.setAngle(-90).setCoords();
canvas.add(circle, triangle, topRuler, leftRuler);
canvas.renderAll();

canvas.on('mouse:up', function(e) {
 if (panningOn) panning = false;
});

canvas.on('mouse:down', function(e) {
 if (panningOn) panning = true;
});

canvas.on('mouse:move', function(e) {
  if (panning && e && e.e) {
  moveX = e.e.movementX;
  moveY = e.e.movementY;
  topRuler.set({
    top: topRuler.top - moveY,
    left: topRuler.left - moveX
  });

  leftRuler.set({
    top: leftRuler.top - moveY,
    left: leftRuler.left - moveX
  });
   canvas.relativePan(new fabric.Point(moveX, moveY));
  }
});
$('#toggle').click(function() {
  panningOn = !panningOn;
  canvas.selection = !panningOn;
  canvas.defaultCursor = 'default';
  $('#toggle').html('Turn Panning ON');
  if (panningOn) {
   $('#toggle').html('Turn Panning OFF');
   canvas.defaultCursor = 'move';
  }
});

 /* ZOOM FUNCTIONS */
 $('#zoomIn').click(function(){
    canvas.setZoom(canvas.getZoom() * 1.1 ) ;
 });

 $('#zoomOut').click(function(){
    canvas.setZoom(canvas.getZoom() / 1.1 ) ;
 });

这是一个正在运行的 JSFiddle:https://jsfiddle.net/z3p8utmc/19/代码不完整，因为我不知道如何准确定位标尺，尝试使用 viewPort、 Canvas 大小等，但没有达到相同的效果。

感谢您的帮助。

Answer 1

这是结果的屏幕截图:

这是两个缩放功能:

/* ZOOM FUNCTIONS */
$('#zoomIn').click(function() {
  rectangle.set({
    width: rectangle.width * 1.1,
    height: rectangle.height * 1.1
  });
  rectangle.setCoords();
  textSample.set({
    top: 60 + (textSample.top - 60) * 1.1,
    left: 60 + (textSample.left - 60) * 1.1,
    scaleX: textSample.scaleX * 1.1,
    scaleY: textSample.scaleY * 1.1
  });
  textSample.setCoords();
  setPins();
  addLeftRuler();
  addTopRuler();
  resizeCanvas();
});
$('#zoomOut').click(function() {
  rectangle.set({
    width: rectangle.width / 1.1,
    height: rectangle.height / 1.1
  });
  rectangle.setCoords();
  textSample.set({
    top: 60 + (textSample.top - 60) / 1.1,
    left: 60 + (textSample.left - 60) / 1.1,
    scaleX: textSample.scaleX / 1.1,
    scaleY: textSample.scaleY / 1.1
  })
  textSample.setCoords();
  setPins();
  addLeftRuler();
  addTopRuler();
  resizeCanvas();
});

平移是使用第三方控件和传统方式完成的，因为这就是视频显示的内容(并且是您想要的) - 顶部和左侧标尺通过在滚动时更新其位置来保持在适当的位置。

缩放是通过基于点 (60, 60) 缩放各个对象来完成的 - 如视频中所示。根据需要重置图钉，重新调整标尺，并调整 Canvas 大小。

诀窍是在用户采取操作和事件触发时计算并重新计算所有内容。

希望这能为您提供构建所需的 Canvas 基础。

这是一个正在运行的 JSFiddle，https://jsfiddle.net/rekrah/hs6jL8d4/ .