设置绘制对象的控制可见性

Question

我有一个fabricjs带有按钮的画布，可以打开和关闭绘图。如何将自定义控件应用于我绘制的任何/所有绘制对象；例如，我想选择我绘制的任何线条并且只能旋转它们。我已经阅读了这个例子，但一定遗漏了一些东西。我将如何做到这一点？

我现在正在使用的 JSFiddle

Answer 1

使用cornerStyle改变角样式(rect/circle) 和setControlsVisibility来设置控件的可见性。

演示

var canvas = this.__canvas = new fabric.Canvas('canvas', {
  backgroundColor: 'white',
  centeredScaling: true,
  isDrawingMode: true
});

fabric.Object.prototype.cornerStyle = 'circle';//default rect
fabric.Object.prototype.setControlsVisibility({
 tl:false, //top-left
 mt:false, // middle-top
 tr:false, //top-right
 ml:false, //middle-left
 mr:false, //middle-right
 bl:false, // bottom-left
 mb:false, //middle-bottom
 br:false //bottom-right
})

$("#drawButton").click(function() {
  canvas.isDrawingMode = !canvas.isDrawingMode;
  var val = canvas.isDrawingMode ? 'selection' : 'pen_tool';
  $("#select").text(val);
});

canvas {
  border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>

<button class="btn" id='drawButton' value="True"><span><i id="select" class="material-icons">selection</i></span></button>