FabricJS：突出显示仅在选择矩形内的对象

Question

我是 Fabric JS 的新手。我画了多个形状，我玩过 selection.

布料具有select鼠标拖动对象的功能，但如果select离子矩形接触到形状的一部分，shapes/objects将突出显示。

但我只关心 select 存在于 selection 矩形内的对象。请帮我解决这个问题。

在此先感谢，这是 fiddle https://jsfiddle.net/sabarisivakumar/rqmnacez/1/

        var canvas = new fabric.Canvas('canvas1');
    canvas.selectionFullyContained = false;

    function drawcircle() {

        var circle, isDown, origX, origY, lines;

        canvas.on('mouse:down', function (o) {
            isDown = true;
            canvas.selection = false;

            var pointer = canvas.getPointer(o.e);
            origX = pointer.x;
            origY = pointer.y;
            circle = new fabric.Circle({
                left: pointer.x,
                top: pointer.y,
                radius: 1,
                strokeWidth: 2,
                stroke: 'black',
                // fill: 'White',
                fill: 'rgba(0,0,0,0)',
                selectable: true,
                originX: 'center',
                originY: 'center'
            });
            canvas.add(circle);
        });

        canvas.on('mouse:move', function (o) {
            if (!isDown) return;
            var pointer = canvas.getPointer(o.e);
            circle.set({
                radius: Math.abs(origX - pointer.x)
            });
            canvas.renderAll();
        });

        canvas.on('mouse:up', function (o) {
            isDown = false;
            circle.setCoords();

            canvas.off('mouse:down');
            canvas.off('mouse:up');
            canvas.off('mouse:move');
        });

    }

    function drawrec() {

        var rect, isDown, origX, origY;
        canvas.on('mouse:down', function (o) {
            isDown = true;
            canvas.selection = false;
            var pointer = canvas.getPointer(o.e);
            origX = pointer.x;
            origY = pointer.y;
            var pointer = canvas.getPointer(o.e);
            rect = new fabric.Rect({
                left: origX,
                top: origY,
                originX: 'left',
                originY: 'top',
                width: pointer.x - origX,
                height: pointer.y - origY,
                angle: 0,
                fill: 'rgba(0,0,0,0)',
                stroke: 'black',
                transparentCorners: false
            });
            canvas.add(rect);
        });

        canvas.on('mouse:move', function (o) {
            if (!isDown) return;
            var pointer = canvas.getPointer(o.e);

            if (origX > pointer.x) {
                rect.set({
                    left: Math.abs(pointer.x)
                });
            }
            if (origY > pointer.y) {
                rect.set({
                    top: Math.abs(pointer.y)
                });
            }

            rect.set({
                width: Math.abs(origX - pointer.x)
            });
            rect.set({
                height: Math.abs(origY - pointer.y)
            });


            canvas.renderAll();
        });

        canvas.on('mouse:up', function (o) {
            isDown = false;
            rect.setCoords();
            canvas.off('mouse:down');
            canvas.off('mouse:up');
            canvas.off('mouse:move');
        });
    }

    function drawLine() {
        // canvas.on('mouse:down');

        canvas.on('mouse:down', function (o) {

            isDown = true;
            canvas.selection = false;
            var pointer = canvas.getPointer(o.e);
            var points = [pointer.x, pointer.y, pointer.x, pointer.y];
            line = new fabric.Line(points, {
                strokeWidth: 3,
                fill: '#07ff11a3',
                stroke: 'black',
                originX: 'center',
                originY: 'center'
            });
            canvas.add(line);
        });

        canvas.on('mouse:move', function (o) {
            // isDown = true;

            if (!isDown) return;
            var pointer = canvas.getPointer(o.e);
            line.set({
                x2: pointer.x,
                y2: pointer.y
            });
            canvas.renderAll();
        });
        canvas.on('mouse:up', function (o) {
            isDown = false;
            line.setCoords();
            canvas.off('mouse:down');
            canvas.off('mouse:up');
            canvas.off('mouse:move');

        });
    }


    function select() {

        canvas.off('mouse:down');
        canvas.off('mouse:up');
        canvas.off('mouse:move');
        // canvas.selection = true;
        canvas.selection = true;
        canvas.selectionFullyContained = true;
    }

Answer 1

您正在寻找的功能是 Canvas.selectionFullyContained，您确实在 fiddle 中启用了它。

问题是它是在 fabric.js v2.0.0 中引入的，而您的 fiddle 使用的是 v1.6.3。这是 fabric.js 升级到 v3.6.2 的原始代码段：

var canvas = new fabric.Canvas('canvas1');
canvas.selectionFullyContained = false;

function drawcircle() {

  var circle, isDown, origX, origY, lines;

  canvas.on('mouse:down', function(o) {
    isDown = true;
    canvas.selection = false;

    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    circle = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 1,
      strokeWidth: 2,
      stroke: 'black',
      // fill: 'White',
      fill: 'rgba(0,0,0,0)',
      selectable: true,
      originX: 'center',
      originY: 'center'
    });
    canvas.add(circle);
  });

  canvas.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    circle.set({
      radius: Math.abs(origX - pointer.x)
    });
    canvas.renderAll();
  });

  canvas.on('mouse:up', function(o) {
    isDown = false;
    circle.setCoords();

    canvas.off('mouse:down');
    canvas.off('mouse:up');
    canvas.off('mouse:move');
  });

}

function drawrec() {

  var rect, isDown, origX, origY;
  canvas.on('mouse:down', function(o) {
    isDown = true;
    canvas.selection = false;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    rect = new fabric.Rect({
      left: origX,
      top: origY,
      originX: 'left',
      originY: 'top',
      width: pointer.x - origX,
      height: pointer.y - origY,
      angle: 0,
      fill: 'rgba(0,0,0,0)',
      stroke: 'black',
      transparentCorners: false
    });
    canvas.add(rect);
  });

  canvas.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);

    if (origX > pointer.x) {
      rect.set({
        left: Math.abs(pointer.x)
      });
    }
    if (origY > pointer.y) {
      rect.set({
        top: Math.abs(pointer.y)
      });
    }

    rect.set({
      width: Math.abs(origX - pointer.x)
    });
    rect.set({
      height: Math.abs(origY - pointer.y)
    });


    canvas.renderAll();
  });

  canvas.on('mouse:up', function(o) {
    isDown = false;
    rect.setCoords();
    canvas.off('mouse:down');
    canvas.off('mouse:up');
    canvas.off('mouse:move');
  });
}

function drawLine() {
  // canvas.on('mouse:down');

  canvas.on('mouse:down', function(o) {

    isDown = true;
    canvas.selection = false;
    var pointer = canvas.getPointer(o.e);
    var points = [pointer.x, pointer.y, pointer.x, pointer.y];
    line = new fabric.Line(points, {
      strokeWidth: 3,
      fill: '#07ff11a3',
      stroke: 'black',
      originX: 'center',
      originY: 'center'
    });
    canvas.add(line);
  });

  canvas.on('mouse:move', function(o) {
    // isDown = true;

    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    line.set({
      x2: pointer.x,
      y2: pointer.y
    });
    canvas.renderAll();
  });
  canvas.on('mouse:up', function(o) {
    isDown = false;
    line.setCoords();
    canvas.off('mouse:down');
    canvas.off('mouse:up');
    canvas.off('mouse:move');

  });
}


function select() {

  canvas.off('mouse:down');
  canvas.off('mouse:up');
  canvas.off('mouse:move');
  // canvas.selection = true;
  canvas.selection = true;
  canvas.selectionFullyContained = true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<button onclick="drawcircle()"> Circle</button>
<button onclick="drawrec()"> Rectangle</button>
<button onclick="drawLine()">Line</button>
<button onclick="select()">select</button>

<canvas id="canvas1" width="720" height="560" style="border:1px solid #ccc"></canvas>

FabricJS：突出显示仅在选择矩形内的对象

FabricJS: Highlight the objects which are only inside the selection rect

fabricjs