fabricjs - 设置绘制对象的控件可见性

Question

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

JSFiddle of what I'm working with now

Answer 1

使用 cornerStyle更改角样式(矩形/圆形)和 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>