如何在fabricjs中增加移动设备上的触摸区域控制点（不增加控制点的显示大小）？答案

【问题标题】：How to increase touch area control points on mobile device ( not increase display size of control points ) in fabricjs?如何在fabricjs中增加移动设备上的触摸区域控制点（不增加控制点的显示大小）？
【发布时间】：2019-12-09 09:04:55
【问题描述】：

如何使用 FabricJS 增加移动设备上控制点的触摸面积？因为在移动设备上它们太小而无法流畅交互。但不要改变控制点的大小（为了好看）。

这是我的代码：
如何增加控制点的交互性 = 查看控制点大小 x 2 ？

var canvasObject = document.getElementById("editorCanvas");
		// set canvas equal size with div
		$(canvasObject).width($("#canvasContainer").width());
		$(canvasObject).height($("#canvasContainer").height());

		var canvas = new fabric.Canvas('editorCanvas', {
		  backgroundColor: 'white',
		  selectionLineWidth: 2,
		  width: $("#canvasContainer").width(),
		  height: $("#canvasContainer").height()
		});

		// test customize control points
		var rect = new fabric.Rect({
			left: 30,
			top: 30,
			fill: 'red',
			width: 150,
			height: 150
		});
    
    canvas.add(rect);
    
    rect.set({
			transparentCorners: false,
			cornerColor: 'white',
			cornerStrokeColor: 'rgba(14,19,24,.15)',
			borderColor: 'rgba(41,198,203,1)',
			selectionLineWidth: 8,
			cornerSize: 12,
			cornerStyle: 'circle',
		});

#canvasContainer {
		  width: 100%;
		  height: 100vh;
		  background-color: gray;
		}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

请告诉我解决此问题的方法。

顺便问一下：（在移动设备上）有什么方法可以让拖动对象之前只选择对象？

非常感谢！

【问题讨论】：

您可以使用cornerSize进行更改
嗨@Durga，我只想增加交互区域（这个区域对用户不可见），但不改变可见控制点的大小。有什么方法可以实现吗？

标签： html5-canvas fabricjs gesture fabricjs2

【解决方案1】：

你需要重写对象的_setCornerCoords方法并改变cornerHypotenuse的值。

演示

var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

// test customize control points
var rect = new fabric.Rect({
  left: 30,
  top: 30,
  fill: 'red',
  width: 150,
  height: 150
});

canvas.add(rect);

rect.set({
  transparentCorners: false,
  cornerColor: 'white',
  cornerStrokeColor: 'rgba(14,19,24,.15)',
  borderColor: 'rgba(41,198,203,1)',
  selectionLineWidth: 8,
  cornerSize: 5,
  cornerStyle: 'circle'
});
rect._setCornerCoords = function() {
  var coords = this.oCoords,
    newTheta = fabric.util.degreesToRadians(45 - this.angle),
    cornerHypotenuse = this.cornerSize * 2 * 0.707106,
    cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta),
    sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta),
    x, y;

  for (var point in coords) {
    x = coords[point].x;
    y = coords[point].y;
    coords[point].corner = {
      tl: {
        x: x - sinHalfOffset,
        y: y - cosHalfOffset
      },
      tr: {
        x: x + cosHalfOffset,
        y: y - sinHalfOffset
      },
      bl: {
        x: x - cosHalfOffset,
        y: y + sinHalfOffset
      },
      br: {
        x: x + sinHalfOffset,
        y: y + cosHalfOffset
      }
    };
  }
}

#canvasContainer {
		  width: 100%;
		  height: 100vh;
		  background-color: gray;
		}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

【讨论】：