使用 Fabric JS 创建复选框机制

Question

如何使用 Fabric JS 创建类似复选框的组件？更喜欢点击图像，并将不透明度设置为 0。如果再次单击，将不透明度设置为 1。

这是我的代码：

对于复选框图像：

fabric.Image.fromURL('https://image.flaticon.com/icons/svg/33/33281.svg', (image) => {
    image.scale(0.35);
    image.set({
        left: 152,
        top: 120,
        hoverCursor: 'default',
        selectable: true,
        opacity: 0.5,
        hasControls: false,
        lockMovementX: true,
        lockMovementY: true

    })
    if(image.onselect === true ) {
        image.set().opacity = 0;
    }
    canvas.add(image);
});

放置图片的框：

function addBox(left, top, width, height) {
    const o = new fabric.Rect({
        left: left,
        top: top,
        width: 30,
        height: 30,
        fill: boxFill,
        strokeWidth: 2,
        originX: 'left',
        originY: 'top',
        centeredRotation: true,
        snapAngle: 45,
        selectable: true,
        type: 'box',
        id: generateId()
    })
    
    if(image.onselect === true ) {
        image.set().opacity = 0;
    }
     
    canvas.add(o)
    canvas.getObjects().map(o => {
        o.hasControls = false
        o.lockMovementX = true
        o.lockMovementY = true

        o.borderColor = '#38A62E'
        o.borderScaleFactor = 2.5
    })
    canvas.selection = false
    canvas.hoverCursor = 'pointer'
    canvas.discardActiveObject()
    canvas.renderAll()
    return o
}

我该如何解决这个问题？有没有办法让图像在您点击它时出现和消失（使用不透明度或类似的东西）？

Answer 1

希望这对您和许多想要在对象上添加事件的人有所帮助。

var canvas = new fabric.Canvas("canvas");

function drawCheckbox(left,right, 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 = right; 
    img.hasControls = false

    img.on('mousedown', function(e) {
    if(e.target.opacity <= 0.5){
    e.target.opacity = 1;
    }else{
    e.target.opacity = 0.4;
    }
    canvas.renderAll();

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

  })
  }
  
  drawCheckbox(0,0, 100,100)
  drawCheckbox(100,100, 100,100)
  drawCheckbox(200,200, 100,100)

body {
    background-color:silver;
}
canvas {
    border:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"> </script>

<canvas id="canvas" width=300 height=300></canvas><br>

使用 Fabric JS 创建复选框机制

Create checkbox mecanism with Fabric JS

html

javascript

css

fabricjs