Weiterleiten von Klickereignissen von Canvas an div

Ich versuche, fabricJS mit Google Maps zu kombinieren. Was ich getan habe, ist, eine Leinwand über den Kartenausschnitt zu legen, um Formen über der Karte anzuzeigen. Das Problem ist, dass Google Map-Ereignisse nicht mehr Trigger sind. Ich suchte im Internet nach Lösungen und fand, dass das css-Tag pointer-event die Klickereignisse an die darunter liegenden Ebenen weiterleiten sollte, aber das funktionierte nicht für mich. Ich habe auch versucht, ein Ereignis mit addDomListener hinzuzufügen, aber auch kein Glück. Das Klickereignis würde ausgelöst, aber die google.maps.event.trigger nicht.Weiterleiten von Klickereignissen von Canvas an div

Ich habe gerade angefangen, also gibt es nichts Besonderes zu sehen. Ich bin irgendwie neu in der Webentwicklung, also dachte ich, ich frage hier, bevor ich meine Zeit mit etwas verschwenden, das nicht möglich ist.

Dies ist meine HTML-Datei:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
     #holder { 
      height:700px; 
      width: 700px; 
      position:relative; 

     } 
     #canvasholder{ 
      height: 700px; 
      width: 700px; 
      position: absolute; 
     } 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     #map-canvas { 
      position: absolute; 

      height: 700px; 
      width: 700px; 
      z-index: -1; 
     } 
     #canvas{ 
      position: absolute; 
      height: 700px; 
      widht: 700px; 
      pointer-events: none; 
      opacity: 1; 
      z-index: 1; 
     } 
    </style> 
</head> 
<body> 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 
<div id="holder"> 
    <div id="canvasholder"> 
     <canvas id="canvas"></canvas> 
    </div> 
    <div id="map-canvas"></div> 
</div> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJ4aYR2NFbLLzh_tkya-rE40gCl-hPpLc&callback=initMap" 
     async defer></script> 
<script src="./app.js"></script> 

</body> 
</html>

Und meine Javascript-Datei:

var map; 
var canvas; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 
    google.maps.event.addDomListener(document.getElementById("canvasholder").firstElementChild, "click", function(e){ 
     google.maps.event.trigger(map, "click", e); 
    }) 
    canvas = new fabric.Canvas("canvas"); 
    canvas.setHeight(700); 
    canvas.setWidth(700); 
    canvas.setBackgroundColor('', canvas.renderAll.bind(canvas)); 
    canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); 
}

Quelle

2016-10-28 Essometer

damit verbundene Frage: [? Wie füge ich einen einfachen onClick Event-Handler auf ein Canvas-Element] (http://stackoverflow.com/questions/9880279/how-do-i-add- a-simple-onclick-event-handler-zu-einem-canvas-element) – geocodezip

Möglicherweise haben Sie einen Tippfehler, die korrekte Syntax ist: 'pointer-events: none;' (beachten Sie die Plural "Ereignisse"). – markE

Sie einen Klick auf die Karte auslösen können mit dem folgenden Code. Sie haben in Ihrem Beispiel keine anderen Google Maps-Objekte (Markierungen, Polygone, Polylinien usw.). Dies funktioniert nicht direkt für diese Objekte. Sie müssen feststellen, ob der Klick auf eines der Objekte fällt und das Klickereignis auslöst damit das passiert.

aus dem Stand der Frage geändert:

How do I add a simple onClick event handler to a canvas element?

document.getElementById("canvasholder").addEventListener("click", getPosition, false); 

function getPosition(event) { 
    var x = event.x; 
    var y = event.y; 

    var canvas = document.getElementById("canvas"); 

    x -= canvas.offsetLeft; 
    y -= canvas.offsetTop; 

    console.log("x:" + x + " y:" + y); 

    // propagate click to map 
    var latLng = projection.fromContainerPixelToLatLng(new google.maps.Point(x, y)); 
    google.maps.event.trigger(map, 'click', { 
    latLng: latLng 
    }); 
}

proof of concept fiddle

Code-Schnipsel:

var map; 
 
var canvas; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    }, 
 
    zoom: 8 
 
    }); 
 

 
    MyOverlay.prototype = new google.maps.OverlayView(); 
 
    MyOverlay.prototype.onAdd = function() {} 
 
    MyOverlay.prototype.onRemove = function() {} 
 
    MyOverlay.prototype.draw = function() {} 
 

 
    function MyOverlay(map) { 
 
    this.setMap(map); 
 
    } 
 

 
    var overlay = new MyOverlay(map); 
 
    var projection; 
 

 
    // Wait for idle map 
 
    google.maps.event.addListener(map, 'idle', function() { 
 
    // Get projection 
 
    projection = overlay.getProjection(); 
 
    }) 
 

 

 

 
    google.maps.event.addDomListener(document.getElementById("canvasholder").firstElementChild, "click", function(e) { 
 
    console.log("click:" + e) 
 
    google.maps.event.trigger(map, "click", e); 
 
    }); 
 
    document.getElementById("canvasholder").addEventListener("click", getPosition, false); 
 

 
    function getPosition(event) { 
 
    var x = event.x; 
 
    var y = event.y; 
 

 
    var canvas = document.getElementById("canvas"); 
 

 
    x -= canvas.offsetLeft; 
 
    y -= canvas.offsetTop; 
 

 
    console.log("x:" + x + " y:" + y); 
 

 
    // propagate click to map 
 
    var latLng = projection.fromContainerPixelToLatLng(new google.maps.Point(x, y)); 
 
    google.maps.event.trigger(map, 'click', { 
 
     latLng: latLng 
 
    }); 
 
    } 
 
    google.maps.event.addListener(map, "click", function(e) { 
 
    console.log("click:" + e.latLng); 
 
    var marker = new google.maps.Marker({ 
 
     position: e.latLng, 
 
     map: map, 
 
     title: e.latLng.toUrlValue(6), 
 
     icon: { 
 
     url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
 
     size: new google.maps.Size(7, 7), 
 
     anchor: new google.maps.Point(3.5, 3.5) 
 
     } 
 
    }); 
 
    }); 
 
    canvas = new fabric.Canvas("canvas"); 
 
    canvas.setHeight(700); 
 
    canvas.setWidth(700); 
 
    canvas.setBackgroundColor('', canvas.renderAll.bind(canvas)); 
 
    canvas.add(new fabric.Circle({ 
 
    radius: 30, 
 
    fill: '#f55', 
 
    top: 100, 
 
    left: 100 
 
    })); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

#holder { 
 
    height: 700px; 
 
    width: 700px; 
 
    position: relative; 
 
} 
 
#canvasholder { 
 
    height: 700px; 
 
    width: 700px; 
 
    position: absolute; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map-canvas { 
 
    position: absolute; 
 
    height: 700px; 
 
    width: 700px; 
 
    z-index: -1; 
 
} 
 
#canvas { 
 
    position: absolute; 
 
    height: 700px; 
 
    widht: 700px; 
 
    pointer-events: none; 
 
    opacity: 1; 
 
    z-index: 1; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<div id="holder"> 
 
    <div id="canvasholder"> 
 
    <canvas id="canvas"></canvas> 
 
    </div> 
 
    <div id="map-canvas"></div> 
 
</div>

Quelle

2016-10-28 17:25:51 geocodezip

Vielen Dank für Ihre Hilfe. Wenn ich also richtig verstehe, wenn ich zum Beispiel eine Drag-Map-Funktionalität haben möchte, muss ich die Events zum Ziehen auf der Leinwand implementieren und dann der Map darunter mitteilen, wie sie reagieren soll. – Essometer

Weiterleiten von Klickereignissen von Canvas an div

Antwort

Verwandte Themen