CODEWITHSUNDEEP
fabricjs
Robert U
Robert U

Reputation: 43

Just show some Controls

I have some line objects in fabricjs. When the user selects them I'd like there just to be a small box at the ends of the lines. The default selection shape of a rectangle all the way around the line is not to my liking.

I don't need controls, because the user can't resize the line. But the default controls which appear at the ends of the line would do just fine. Is there any way that I can have only these two controls appear? Or am I best just creating two new fabricjs objects and sticking them at the ends of the line myself?

Upvotes: 2

Views: 2307

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

IF I understood you correctly

You could use fabric.Object#setControlsVisibility to disable individual controls and only have those controls you want

and to prevent object scaling / resizing, set ...

lockScalingX: true
lockScalingY: true


var canvas = new fabric.Canvas('canvas', {
    width: 635,
    height: 218,
});

line = new fabric.Line([50, 50, 200, 50], {
    strokeWidth: 5,
    stroke: 'black',
    hasBorders: false,
    hoverCursor: 'default',
    lockScalingX: true, // lock scaling
    lockScalingY: true  // ^^
});

// disable controls (except top-left and bottom-right)
line.setControlsVisibility({
    tr: false,
    bl: false,
    ml: false,
    mt: false,
    mr: false,
    mb: false,
    mtr: false
})

canvas.add(line);
body{margin:0;overflow:hidden}canvas{border:1px solid #d3d3d3}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<canvas id="canvas"></canvas>

Upvotes: 4

Related Questions