Question

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

JSFiddle of what I'm working with now

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>

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

1 个答案: