Fabric JS 如何从另一个函数调用一个函数

Question

我有一个功能，可以在单击时隐藏和显示图像，但我想通过单击另一个对象来做同样的事情。

这是图片的代码


    function drawCheckbox(left, top, width, height){
        var imgClass = new fabric.Image.fromURL('https://image.flaticon.com/icons/svg/33/33281.svg',function(img){
            img.width = width;
            img.height = height;
            img.left = left;
            img.top = top;
            img.set({
                hoverCursor: 'default',
                selectable: true,
                opacity: 0
    
            })
            img.on('mousedown', function(e) {
                if(e.target.opacity <= 0.5){
                    e.target.opacity = 1;
                }else{
                    e.target.opacity = 0;
                }
                canvas.renderAll();
    
            });
            canvas.add(img);
            canvas.renderAll();
    
        })
    }

这是矩形对象的代码：


    function addRect(left, top, width, height, id) {
        const o = new fabric.Rect({
            width: width,
            height: height,
            fill: tableFill,
            stroke: tableStroke,
            strokeWidth: 2,
            shadow: tableShadow,
            originX: 'center',
            originY: 'center',
            centeredRotation: true,
            snapAngle: 45,
            selectable: true
        })
    
        const t = new fabric.IText(number.toString(), {
            fontFamily: 'Calibri',
            fontSize: 14,
            fill: '#fff',
            textAlign: 'center',
            originX: 'center',
            originY: 'center'
        })
        const g = new fabric.Group([o, t], {
            left: left,
            top: top,
            centeredRotation: true,
            snapAngle: 45,
            selectable: true,
            type: 'table',
            id: id,
            number: number
        })
        canvas.add(g)
        number++
        g.on('selected', function () {
               // here I want to make de image dissapear, when the object is clicked
        })
    
        canvas.hoverCursor = 'pointer';
        canvas.discardActiveObject();
        canvas.renderAll();
        return g;
    }

我尝试在矩形内创建图像，但是当单击矩形时它没有任何反应。有人遇到过类似的问题吗？

这是codepen：codepen.io/Zerro1/pen/PoZvmOE .

Answer 1

我在这里为您创建了一个 codepen，这是一种方法。我尝试创建一个正方形并单击该正方形我正在切换最后一个复选框可见性。

部分代码：

var square = new fabric.Rect({ 
        width: 100, 
        height: 100, 
        fill: '#000',
         left:120
    });
    square.on('mousedown', function(e) {
    if(img.opacity <= 0.5){
    img.opacity = 1;
    }else{
    img.opacity = 0;
    }
    canvas.renderAll();

    });
    canvas.add(img);
    canvas.add(square); 
    canvas.renderAll();

Fabric JS 如何从另一个函数调用一个函数

Fabric JS How to call a function from another function

html

javascript

css

fabricjs