0

Tengo un canvas creado en principio con una imagen de fondo, a la que desde un boton le añado un marcador (una imagen normal y corriente) por encima del fondo, el tema está, si pincho sobre el fondo, me deja inutilizado el marcador, teniendo que moverlo totalmente hasta que el marcador queda sin tapar por el fondo.

Si pincho sobre el marcador y lo muevo, sin problemas. Si pincho antes en el fondo y después en el marcador es cuando ya no me deja mover el marcador.

He visto opciones con BringToFront y setOverlayImage si no recuerdo mal, pero no funcionan exactamente como yo quiero.

Lo único que necesito es que solo se pueda mover el marcador, aún pinchando en el fondo, poder volver a pinchar en el marcador y poder moverlo.

Con esta función, añado el marcador.

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);
}

1
  • Para qué usas el setTimeout? y a que te refieres con que el fondo tapa la nueva imagen agregada cuando le das click?, si dices que el fondo es el background del canvas, no tiene por qué seleccionarse cuando des click dentro del canvas. Como estas agregando el fondo?, quieres que el fondo sea fijo?, provee más información por favor. el 14 ene. 2017 a las 23:50

1 respuesta 1

0

Puedes probar que al principio cuando agregas la imagen por defecto pongas la propieadad evented: false Ejemplo

function prueba(
    imgObj.set({
        width:500,
        height: 500,
        evented: false
    });
)

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.