Javascript 带出对象使用问题的前向和交叉点

我正在尝试使用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;
}

//画布di默认值
var myCanvas；
//层插入到我的画布上，使图形分离
var-canvF；
//莫多·德勒·瓦里图中每一个特内尔·特拉西亚的结构数据
雷坦戈利变种；
瓦尔·塞尔奇；
//旗
var绘图；
瓦尔·西克莱昂；
var擦除；
var gomma；
//彩色咖啡豆
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
变量rand_color='#'；
对于（变量i=0；i<6；i++）{
rand_color+=字母[Math.floor（Math.random（）*16）]；
}
返回rand_颜色；
}
//IlizaIl容器e il画布
函数initF（）{
擦除=假；
图纸=假；
circleOn=假；
canvasContainer=document.createElement（'div'）；
document.body.appendChild（画布容器）；
canvasContainer.style.position=“绝对”；
canvasContainer.style.left=“0px”；
canvasContainer.style.top=“0px”；
canvasContainer.style.width=“100%”；
canvasContainer.style.height=“100%”；
canvasContainer.style.zIndex=“1000”；
超级容器=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='绝对'；
canvasContainer.appendChild（myCanvas）；
canvF=newfabric.Canvas（myCanvas）；
rettangoli=newfabric.Canvas（myCanvas）；
}
函数drawRectF（）{
canvF.isDrawingMode=false；
var rect=newfabric.rect（）；
rect.left=100；
rect.top=100；
var color直立=getRandomColor（）；
矩形填充=颜色竖立；
矩形宽度=80；
垂直高度=80；
rect.borderColor='红色'；
rect.cornerColor='绿色'；
rect.cornerSize=20；
透明角=假；
rettangoli.add（rect）；
canvF.add（rect）；
}
函数animaF（）{
rettangoli.forEachObject（函数（obj）{
对象动画（'top'，myCanvas.height-obj.height{
onChange:canvF.renderAll.bind（canvF），
期限：2000年，
宽松：fabric.util.ease.easeOutBounce
});
});
}
函数drawCircleF（）{
canvF.isDrawingMode=false；
var circle=new fabric.circle（{radius:30，fill:getRandomColor（），top:myCanvas.height/2，left:myCanvas.width/2}）；
circle.borderColor='红色'；
circle.cornerColor='绿色'；
圆形。拐角尺寸=20；
透明角=假；
canvF.add（圆圈）；
on（{'mousedown'：canvF.bringToFront（circle）}）
}
函数textF（）{
var comicSansText=new fabric.Text（“Ciao”，{fontFamily:'comicsans'}）；
comicSansText.textBackgroundColor=红色；
comicSansText.left=100；
comicSansText.top=100；
comicSansText.width=100；
comicSansText.height=100；
canvF.add（comicSansText）；
}
函数EraseF（）{
擦除=真；
gomma=newfabric.Rect（）；
rect.left=myCanvas.width/2；
rect.top=100；
var color直立=getRandomColor（）；
rect.fill=颜色竖立；
矩形宽度=100；
垂直高度=50；
rect.borderColor='红色'；
rect.cornerColor=‘透明’；
rect.cornerSize=10；
透明角=假；
rect.hasBorders=false；
perPixelTargetFind=真；
canvF.add（rect）；
贡马·安({
“移动”：一旦改变，
“缩放”：一旦更改，
“旋转”：一旦改变，
});
}
函数onChange（选项）{
options.target.setCoords（）；
canvF.forEachObject（函数（obj）{
if（obj==options.target）返回；
对象设置不透明度（选项。目标。相交对象（obj）？0.5:1）；
});
}
函数drawLineF（）{
canvF.isDrawingMode=true；
freeDrawingBrush.color=getRandomColor（）；
freeDrawingBrush.width=10；
perPixelTargetFind=真；
}

在这里，您可以找到bringtofront如何工作以及如何在交叉口删除的示例

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

对于“橡皮擦”，逻辑有点不同。 对于每次移动或缩放，我们都会更新橡皮擦坐标（setCoords，这很重要），然后对画布上的每个对象进行循环，并检查是否有一些对象与橡皮擦的边界框相交，然后，如果存在正匹配，则删除该对象

var canvas=newfabric.canvas（'canvas'）；
var onChange=函数（选项）{
如果（！options.target.橡皮擦）{
返回；
}
options.target.setCoords（）；
canvas.forEachObject（函数（obj）{
if（！obj.eraser&&options.target.intersectsWithObject（obj））{
canvas.remove（obj）；
}
});
}
$（文档）.ready（函数（）{
add（newfabric.Rect（{left:50，width:100，height:50，fill:'red'}））；
add（newfabric.Rect（{left:70，width:100，height:50，fill:'blue'}））；
add（newfabric.Rect（{left:90，width:100，height:50，fill:'green'}））；
var circle=new fabric.circle（{top:100，left:300，radius:10，fill:'purple'，橡皮擦：true}）；
canvas.add（圆圈）；
canvas.on（'object:selected'，函数（选项）{
canvas.bringToFront（options.target）；
});
canvas.on（'object:scaling'，onChange）；
canvas.on（'object:moving'，onChange）；
});
我的问题是语法，我理解函数的工作原理。我在m中添加了代码的最后一部分