BringToFront 和 intersectsWithObject 使用问题

Question

我正在尝试使用 Fabricjs 绘制 html 页面，但我是 javascript 的新手。我有两个问题，第一个是我想在单击对象时将其置于顶部，但经过一些测试后绘图顺序没有改变。第二个连接到对象之间的相交，我需要它来制作橡皮擦，当它与另一个对象相交时，它将删除它（现在只需尝试更改不透明度）我想我犯了一些语法错误。 ps initF() 函数在页面加载时运行一次

//canvas di default
var myCanvas;

//layer interposto fra myCanvas e le figure disegnate
var canvF;

//strutture dati per tenere traccia in modo distinti delle varie figure
var rettangoli;
var cerchi;

//flag
var drawing;
var circleOn;
var erase;
var gomma;

//generatore casuale di colore
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var rand_color = '#';
    for (var i = 0; i < 6; i++) {
        rand_color += letters[Math.floor(Math.random() * 16)];
    }
    return rand_color;
}

//inizializza il container e il canvas
function initF() {
    erase = false;
    drawing = false;
    circleOn = false;
    canvasContainer = document.createElement('div');
    document.body.appendChild(canvasContainer);
    canvasContainer.style.position = "absolute";
    canvasContainer.style.left = "0px";
    canvasContainer.style.top = "0px";
    canvasContainer.style.width = "100%";
    canvasContainer.style.height = "100%";
    canvasContainer.style.zIndex = "1000";
    superContainer = document.body;
    myCanvas = document.createElement('canvas');
    myCanvas.style.width = superContainer.scrollWidth + "px";
    myCanvas.style.height = superContainer.scrollHeight + "px";
    myCanvas.width = superContainer.scrollWidth;
    myCanvas.height = superContainer.scrollHeight;
    myCanvas.style.overflow = 'visible';
    myCanvas.style.position = 'absolute';
    canvasContainer.appendChild(myCanvas);
    canvF = new fabric.Canvas(myCanvas);
    rettangoli = new fabric.Canvas(myCanvas);
}

function drawRectF() {
    canvF.isDrawingMode = false;
    var rect = new fabric.Rect();
    rect.left = 100;
    rect.top = 100;
    var coloreRect = getRandomColor();
    rect.fill= coloreRect;
    rect.width = 80;
    rect.height = 80;
    rect.borderColor = 'red';
    rect.cornerColor = 'green';
    rect.cornerSize = 20;
    transparentCorners = false;
    rettangoli.add(rect);
    canvF.add(rect);

}

function animaF() {

        rettangoli.forEachObject(function (obj) {
                    obj.animate('top', myCanvas.height-obj.height, {
                        onChange: canvF.renderAll.bind(canvF),
                        duration: 2000,
                        easing: fabric.util.ease.easeOutBounce
                    });
        });

}

function drawCircleF() {
    canvF.isDrawingMode = false;
    var circle = new fabric.Circle({ radius: 30, fill: getRandomColor(), top: myCanvas.height / 2, left: myCanvas.width / 2 });
    circle.borderColor = 'red';
    circle.cornerColor = 'green';
    circle.cornerSize = 20;
    transparentCorners = false;
    canvF.add(circle);
    circle.on({'mousedown': canvF.bringToFront(circle)})
}

function textF() {
    var comicSansText = new fabric.Text("Ciao", { fontFamily: 'Comic Sans' });
    comicSansText.textBackgroundColor = red;
    comicSansText.left = 100;
    comicSansText.top = 100;
    comicSansText.width = 100;
    comicSansText.height = 100;
    canvF.add(comicSansText);
}

function EraseF() {
    erase = true;
    gomma = new fabric.Rect();
    rect.left = myCanvas.width/2;
    rect.top = 100;
    var coloreRect = getRandomColor();
    rect.fill = coloreRect;
    rect.width = 100;
    rect.height = 50;
    rect.borderColor = 'red';
    rect.cornerColor = 'transparent';
    rect.cornerSize = 10;
    transparentCorners = false;
    rect.hasBorders = false;
    perPixelTargetFind = true;
    canvF.add(rect);
    gomma.on({
        'moving': onChange,
        'scaling': onChange,
        'rotating': onChange,
    });
}

function onChange(options) {
    options.target.setCoords();
    canvF.forEachObject(function(obj) {
        if (obj === options.target) return;
        obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
    });
}



function drawLineF() {
    canvF.isDrawingMode = true;
    freeDrawingBrush.color = getRandomColor();
    freeDrawingBrush.width = 10;
    perPixelTargetFind = true;
}

Answer 1

在这里，您可以找到有关 bringtofront 如何工作以及如何在交叉点上删除的示例。

如您所见，我们将 canvas.bringToFron 的逻辑放入每个对象选择事件中。

对于 "eraser" 逻辑有点不同。对于每一次移动或缩放，我们更新橡皮擦坐标（setCoords，这很重要），然后我们循环 canvas 上的每个对象，我们检查是否有一些与橡皮擦的边界框相交，然后，如果有正匹配项，我们删除该对象。

  var canvas = new fabric.Canvas('canvas');
  var onChange = function(options) {
if (!options.target.eraser) {
  return;
}
options.target.setCoords();
canvas.forEachObject(function(obj) {
  if (!obj.eraser && options.target.intersectsWithObject(obj)) {
    canvas.remove(obj);
  }
});
  }

$(document).ready(function() {
    canvas.add(new fabric.Rect({left: 50, width: 100, height: 50, fill: 'red'}));
    canvas.add(new fabric.Rect({left: 70, width: 100, height: 50, fill: 'blue'}));
    canvas.add(new fabric.Rect({left: 90, width: 100, height: 50, fill: 'green'}));
    var circle = new fabric.Circle({top: 100, left: 300, radius: 10, fill: 'purple', eraser: true});
    canvas.add(circle);
    canvas.on('object:selected', function(options) {
       canvas.bringToFront(options.target);
    });
    canvas.on('object:scaling', onChange);
    canvas.on('object:moving', onChange);

});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

BringToFront 和 intersectsWithObject 使用问题

BringToFront and intersectsWithObject usage problems

javascript

fabricjs