Продвигать события клика с холста на div

Я пытаюсь комбинировать fabricJS с Google Maps. Я сделал это, чтобы наложить холст на карту div, чтобы отображать фигуры над картой. Проблема заключается в том, что события карты Google не являются триггерами больше. Я искал интернет для решений и нашел, что тег css pointer-event должен распространять события щелчка на нижележащие слои, но это не сработало для меня. Я также попытался добавить событие с addDomListener, но не повезло. Событие click вызовет, но google.maps.event.trigger этого не сделал.Продвигать события клика с холста на div

Я только что начал, так что пока ничего не видно. Я немного новичок в веб-разработке, поэтому я решил, что прошу здесь, прежде чем тратить свое время на то, что невозможно.

Это мой HTML-файл:

<!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>

И мой файл Javascript:

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

источник

2016-10-28 Essometer

связанный с этим вопрос: [? Как добавить простой обработчик события OnClick для холста элемента] (http://stackoverflow.com/questions/9880279/how-do-i-add- a-simple-onclick-event-handler-to-a-canvas-element) – geocodezip

Возможно, у вас есть опечатка, правильный синтаксис: 'pointer-events: none;' (обратите внимание на множественные «события»). – markE

Вы можете вызвать щелчок на карте следующим кодом. У вас нет других объектов Google Maps в вашем примере (маркеры, полигоны, полилинии и т. Д.), Это не сработает для них напрямую, вам нужно будет определить, попадает ли один из них на один из них и запускает его событие click для этого.

редактировался связанный с этим вопрос:

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

фрагмент кода:

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>

источник

2016-10-28 17:25:51 geocodezip

Благодарим за помощь. Поэтому, если я правильно понимаю, если бы я хотел бы, например, иметь функциональность перетаскивания, мне нужно реализовать события для перетаскивания на холст, а затем рассказать о карте под ней, как реагировать. – Essometer

Продвигать события клика с холста на div

ответ

Смежные вопросы