只显示一些控件

Question

我在 fabricjs 中有一些线条对象。当用户选择它们时，我希望在行尾有一个小框。一直围绕线条的矩形的默认选择形状不是我喜欢的。

我不需要控件，因为用户无法调整行的大小。但是出现在该行末尾的默认控件就可以了。有什么办法可以只显示这两个控件吗？还是我最好只创建两个新的 fabricjs 对象并将它们粘在行尾？

Answer 1

_{如果我理解正确的话}

您可以使用 fabric.Object#setControlsVisibility 来禁用个别控件并只使用您想要的那些控件

并防止对象缩放/调整大小，设置...

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>

只显示一些控件

Just show some Controls

fabricjs