在fabric.js中无法选择平移对象后如何解决？

Question

下面是问题的重现：jsfiddle。代码大部分取自官方教程。

var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('//www.datashinobi.com/data/person/Charlotte%20Casiraghi/0622cdb484c35923528b1537fd1970785b00241f367ff466fc36c414a50ca973.jpg')
canvas.uniScaleTransform = true

canvas.on('mouse:down', function (opt) {
  var evt = opt.e;
  if (evt.ctrlKey == true) {
    canvas.selection = false;
    canvas.forEachObject(function(o) {
      o.selectable = false;
    });
  	this.isDragging = true;
  	this.selection = false;
  	this.lastPosX = evt.clientX;
  	this.lastPosY = evt.clientY;
	}
});

canvas.on('mouse:move', function (opt) {
	if (this.isDragging) {
  	var e = opt.e;
    this.viewportTransform[4] += e.clientX - this.lastPosX;
    this.viewportTransform[5] += e.clientY - this.lastPosY;
    this.requestRenderAll();
    this.lastPosX = e.clientX;
    this.lastPosY = e.clientY;
  }
});

canvas.on('mouse:up', function (opt) {
	this.isDragging = false;
  this.selection = true;
  canvas.selection = true;
  canvas.forEachObject(function(o) {
    o.selectable = true;
  });
});

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 > 9) {
  	zoom = 9;
  }
  if (zoom < 1) {
  	zoom = 1;
  }
  canvas.zoomToPoint({x: opt.e.offsetX, y: opt.e.offsetY}, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

var rect = new fabric.Rect({
	left: 100,
  top: 100,
  fill: 'red',
  width: 100,
  height: 100,
  opacity: 0.4,
  hasRotatingPoint: false,
  hasBorders: false,

})


canvas.add(rect);

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.1/fabric.min.js"></script>
<canvas id="c" width="1000" height="1000"></canvas>

按 ctrl 进行平移。尝试大平移（但对象仍在视图中）并选择对象。再试几次，你就会遇到我提到的问题，即对象不再可选择。但是，如果你按一下你可能会选择它，这很奇怪，感觉有问题。

我该如何解决这个问题？

Answer 1

您只需要object.setCoords() 在mouse:up 回调中设置所有角的坐标。

演示

var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('//www.datashinobi.com/data/person/Charlotte%20Casiraghi/0622cdb484c35923528b1537fd1970785b00241f367ff466fc36c414a50ca973.jpg', canvas.renderAll.bind(canvas))
canvas.uniScaleTransform = true

canvas.on('mouse:down', function(opt) {
  var evt = opt.e;
  if (evt.ctrlKey == true) {
    canvas.selection = false;
    canvas.discardActiveObject();
    canvas._currentTransform = null;  canvas.forEachObject(function(o) {
      o.selectable = false;
    });
    this.isDragging = true;
    this.selection = false;
    this.lastPosX = evt.clientX;
    this.lastPosY = evt.clientY;
  }
});

canvas.on('mouse:move', function(opt) {
  if (this.isDragging) {
    var e = opt.e;
    this.viewportTransform[4] += e.clientX - this.lastPosX;
    this.viewportTransform[5] += e.clientY - this.lastPosY;
    this.requestRenderAll();
    this.lastPosX = e.clientX;
    this.lastPosY = e.clientY;
  }
});

canvas.on('mouse:up', function(opt) {
  this.isDragging = false;
  this.selection = true;
  canvas.selection = true;
  canvas.forEachObject(function(o) {
    o.selectable = true;
    o.setCoords();
  });
});

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 > 9) {
    zoom = 9;
  }
  if (zoom < 1) {
    zoom = 1;
  }
  canvas.zoomToPoint({
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 100,
  height: 100,
  opacity: 0.4,
  hasRotatingPoint: false,
  hasBorders: false,

})
canvas.add(rect);

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.1/fabric.min.js"></script>
<canvas id="c" width="1000" height="1000"></canvas>