Question

需要检查用户是否使用比例修改图像（按比例调整对象大小的角上的控件）或拉伸（使用控件顶部中心/底部/左/右）

canvas[index].on('object:modified', function (options) {
   ...

我该怎么检查？

Answer 1

您可以使用scaleX和scaleY来检查对象。如果角落比scaleX和scaleY都改变，如果左/右只有scaleX和top / bottom scaleY会改变。

<强> 样本

＆＃13;

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({
 radius:50,
 left:100,
 top:100
}));
canvas.on('mouse:down',onMouseDown);
canvas.on('mouse:move',onMouseMove);
canvas.on('mouse:up',onMouseUp);
var mouseDown, target, originalState = {};
function onMouseDown(options){
  var object = options.target;
  if(!object) return;
  mouseDown = true;
  target = object;
  originalState.scaleX = object.scaleX;
  originalState.scaleY = object.scaleY;
}

function onMouseMove(options){
 if(!(mouseDown || target)) return;
 
 if(originalState.scaleX != target.scaleX && originalState.scaleY != target.scaleY){
  console.log('scale using corners');
 }
 else if(originalState.scaleX != target.scaleX){
  console.log('scale using left and right');
 }
 else if(originalState.scaleY != target.scaleY){
  console.log('scale using top and bottom');
 }
}

function onMouseUp(options){
 mouseDown = false;
 originalState = {};
 target = null;
}

＆＃13;

canvas{
 border : 2px solid #000;
}

＆＃13;

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=400 height=400></canvas>

＆＃13;

Fabricjs事件拉伸与比例

1 个答案: