javascript - 在图 block 中绘制图像叠加表现得很奇怪

Question

我正在尝试为每个 map 图 block 绘制一个位图(png)作为谷歌地图中的叠加层。我希望能够绘制自己的位图作为叠加。 经过一番摆弄后，我弄清楚了如何在 Canvas 上绘画。 绘制线条效果很好，但绘制加载的图像表现得很奇怪。对缩放和平移的 react 尚不清楚。我试图对 onload 函数感到困惑，但它没有改善......

我的问题: 我做错了什么？ 如何在图 block 上绘制位图作为叠加层？

谢谢。

另请参阅https://jsfiddle.net/rolandinoman/1twa0p74/8/ 平移和放大/缩小以查看效果。

代码示例

/**
 * sometimes the png is drawn, sometimes it is not .
 * don't get it.
 */

/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');

  var canvas = ownerDocument.createElement('canvas');
   canvas.id     = "canv";
   w = 256;
   h = 256;
   canvas.width = w;
   canvas.height = h;
   ctx = canvas.getContext('2d');
   cs = getComputedStyle(div);
   /// draw some lines on canvas
   ctx.lineWidth = 1;
   ctx.strokeStyle = "#FF0000";
   ctx.strokeRect(6, 6, w-6, h-6);
   // draw an image on the canvas:
   var image = new Image(256,256);
   image.onload = function(){ ctx.drawImage(image, 0, 0);}
   // picked a random bitmap 256X256:
   image.src = "http://files.softicons.com/download/application-icons/malware-icons-by-deleket/png/256x256/Malware.png"

   //ctx.drawImage(image, 0, 0);  // alternative to onload, behaves also erratic.
   div.appendChild(canvas)

   return div;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650}
  });

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}

Answer 1

我相信您对 onload 事件有疑问；如果图像已在缓存中，则不会触发(至少在某些情况下)。

您可以预加载图像，然后不使用 onload 事件。

代码片段:

/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  var canvas = ownerDocument.createElement('canvas');
  w = 256;
  h = 256;
  canvas.width = w;
  canvas.height = h;
  ctx = canvas.getContext('2d');
  cs = getComputedStyle(div);
  /// draw something on canvas
  ctx.lineWidth = 1;
  ctx.strokeStyle = "#FF0000";
  ctx.strokeRect(6, 6, w - 6, h - 6);
  var image = new Image(256, 256);
  image.src = "http://files.softicons.com/download/application-icons/malware-icons-by-deleket/png/256x256/Malware.png"
  ctx.drawImage(image, 0, 0);
  div.appendChild(canvas);
  return div;
};

function initMap() {
  document.getElementById('nodisp').style.display = "none";
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 41.850,
      lng: -87.650
    }
  });

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
    0, new CoordMapType(new google.maps.Size(256, 256)));
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js">
</script>
<img id="nodisp" src="http://files.softicons.com/download/application-icons/malware-icons-by-deleket/png/256x256/Malware.png" />