CODEWITHSUNDEEP
fabricjs
anonymoose
anonymoose

Reputation: 1243

Setting Control Visibility for Drawn Objects

I have a fabricjs canvas with a button that toggles drawing on and off. How can I apply the custom controls to any/all drawn objects that I draw; for example, I'd like to select any of the lines that I draw and only be able to rotate them. I've read the example but must be missing something. How would I accomplish this?

JSFiddle of what I'm working with now

Upvotes: 4

Views: 4249

Answers (1)

Durga
Durga

Reputation: 15614

Use cornerStyle to change corner style(rect/circle) and setControlsVisibility to set visibility of controls.

DEMO

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>

Upvotes: 9

Related Questions