Canvas Fabric overlay

1

I have a canvas created in principle with a background image, to which from a button I add a marker (a normal and current image) over the background, the subject is, if I click on the background, I leaves the marker unused, having to move it completely until the marker is uncovered by the bottom.

If I click on the marker and move it, without problems. If I click before on the bottom and then on the scoreboard, it's when I'm not allowed to move the scoreboard anymore.

I've seen options with BringToFront and setOverlayImage if I remember correctly, but they do not work exactly as I want.

The only thing I need is that you can only move the marker, even by clicking on the bottom, to be able to click on the marker again and move it.

With this function, I add the marker.

function addlocation () {
    markerActivado = 'OK';
    deselectAll();
    var heightLocation = window.innerHeight / 2;
    var widthLocation = window.innerWidth / 2;
    var marker = 'img/mapas/locationRed2.png';

    //canvas.setOverlayImage(marker, canvas.renderAll.bind(canvas), {overlayImageLeft: 200, overlayImageTop: 200});

    fabric.Image.fromURL(marker, function (oImg) {
        canvas.add(oImg);
        oImg.hasBorders = true;
        oImg.hasControls = true;
        oImg.set({
            name: "Marker",
            left: widthLocation,
            top: heightLocation - 120
        });
        canvas.setOverlayImage(oImg);
    });

    setTimeout(function () {
        selectAll();
        canvas.deactivateAll().renderAll();
        resizeCanvas();
        canvas.isDrawingMode = false;
        canvas.sendToBack(canvas.item(0));
        canvas.setOverlayImage(canvas.item(1));
    }, 210);
}
    
asked by XSDesings 13.01.2017 в 15:20
source

1 answer

0

You can prove that at the beginning when you add the default image you put the property evented: false Example

function prueba(
    imgObj.set({
        width:500,
        height: 500,
        evented: false
    });
)
    
answered by 14.11.2018 в 15:31