如果 Fabric.js 中的形状，如何知道某人是否正在调整大小以使其变小或变大

Question

我正在研究 Fabricjs 库，并希望在用户调整大小以使矩形（任何形状）变小或变大时进行验证。

表示当用户调整大小以使其变小时调用某个函数，当用户调整大小以增加大小时调用另一个函数。

在 Fabricjs 中可以吗？

Answer 1

您可以使用 fabric 的 canvas.on() 方法来附加 event listeners。

您要找的是'object:scaling'或'object:resizing'。
然后你只需要查看对象的 scaleX 和 scaleY 或 width 和 height 属性就可以知道它是在增加还是在减少。

var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});
// one listener for the scale event (could be resize)
function scaleListener(e) {
  // get the object being rescaled
  var targ = e.target;
  // check if we the scale was bigger than the new one
  if (targ.scaleX > (targ.lastScaleX || 1) || targ.scaleY > (targ.lastScaleY || 1)) {
    // it was
    bigger();
  } else {
    // it wasn't
    smaller();
  }
  // save the current scale as the last one in the object itself
  targ.lastScaleX = targ.scaleX;
  targ.lastScaleY = targ.scaleY;
};

function bigger() {
  rect.fill = 'blue';
}

function smaller() {
    rect.fill = 'green';
  }
  // "add" rectangle onto canvas
canvas.add(rect);
canvas.on({
  'object:scaling': scaleListener,
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<canvas id="c"><</canvas>

如果 Fabric.js 中的形状，如何知道某人是否正在调整大小以使其变小或变大

How to know whether someone is resizing to make it smaller or bigger in case of shapes in Fabric.js

javascript

html5-canvas

fabricjs