时间戳

首页 > 解决方案 > Fabric JS如何从另一个函数调用一个函数

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

问题描述

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

这是图像的代码


    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.io/Zerro1/pen/PoZvmOE。

标签： javascripthtmlcssfabricjs

解决方案

在这里，我为您创建了一个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();

推荐阅读