gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 05:59:20 26 4
gpt4 key购买 nike

我正在尝试为每个 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)));
}

最佳答案

我相信您对 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" />

关于javascript - 在图 block 中绘制图像叠加表现得很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39811366/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com