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