2


如何使用 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>

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

顺便说一句:(在移动设备上)有没有办法允许拖动对象之前只选择对象?

非常感谢!

4

1 回答 1

2

您需要覆盖_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>

于 2019-08-02T11:31:24.800 回答