如何相对于底层图像绝对定位形状元素? [英] How to absolutely position shape elements relative to an underlying image?
问题描述
页面有一个居中的图像——一张地图——我需要弄清楚如何在地图上用小点标记兴趣点.
我的计划是用非常小的圆形元素绘制点，但是我如何定位它们，以便每次在不同大小的屏幕上加载网页时它们都位于地图上的同一位置?如果可以的话，我只是将这些点用 Photoshop 处理到图像上，但我需要编写 javascript 以使这些点具有交互性(在鼠标悬停时显示文本框描述)，这样就行不通了.
<头><meta charset="UTF-8"><title></title><link rel="stylesheet" href="example.css"/><身体><img src="example.jpg" style="margin-left:auto;margin-right:auto;"></img>如果你的点是动态的并且你不能在 css 中设置它们，你可以使用 canvas.这是一个静态示例，如果需要，可以将其转换为动态，这可能比使用 css 以百分比定位要多得多，因此如果您知道您的兴趣点位置，则应该使用 CSS，如果它们是动态画布是一个不错的选择
代码如下...//你需要地图的背景和兴趣点数组//包含相对于地图的 x 和 y 坐标const mapImageUrl = 'http://via.placeholder.com/500x300'const pointsOfInterest = [{名称:'point1'，x:420，y:50}，{名称:'point2'，x:50，y:134}，{名称:'point3'，x:100，y:200}]//获取对画布及其上下文的引用const canvas = document.getElementById('map')const ctx = canvas.getContext('2d');画布宽度 = 400;画布高度 = 400;//创建一个新的图像元素来保存你的背景var mapImg = new Image();//加载图像时执行此块mapImg.onload = 函数 () {//将画布大小设置为图像大小canvas.width = mapImg.width;canvas.height = mapImg.height;//将图像绘制到画布上ctx.drawImage(mapImg, 0, 0);//为每个点绘制一个位于pointsOfInterest[i].x,pointsOfInterest[i].y的红点//在这里你也可以使用兴趣点名称或任何你在json上可用的东西for(let i = 0; i html, body {高度:100%；}.mapContainer {显示:弹性；对齐项目:中间；对齐内容:居中；边距:0；高度:100%；flex-wrap: 包裹;}#地图{对齐自我:居中}<canvas id="地图"></画布>The page has a centered image -- a map -- and I need to figure out how to mark points of interest on that map with small dots.
My plan is to draw the dots with very small circle elements, but how can I position them so that they will sit in the same place on the map every time the webpage is loaded on different sized screens? I would just photoshop the dots onto the image if I could, but I will need to write the javascript to have the dots be interactive (show a text box description on mouseover) so that won't work.
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="example.css" />
</head>
<body>
<img src="example.jpg" style="margin-left:auto;margin-right:auto;"></img>
</body>
in case your points are dynamic and you can not set them in css, you could use canvas. this is a static example, it can be converted to dynamic if needed, could be considerably more work than positionning in percentages with css so if you know your point of interest positions you should go with CSS, if they are dynamic canvas is a good option
code bellow...
// You will need the background of the map and an array of points of interest
// containing x and y coordinates relative to the map
const mapImageUrl = 'http://via.placeholder.com/500x300'
const pointsOfInterest = [
{name:'point1', x:420, y:50},
{name:'point2', x:50, y:134},
{name:'point3', x:100, y:200}
]
// get refference to the canvas and to its context
const canvas = document.getElementById('map')
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;
// create a new image element that would hold your background
var mapImg = new Image();
// this block executes when the image is loaded
mapImg.onload = function () {
//setting the canvas size to the image size
canvas.width = mapImg.width;
canvas.height = mapImg.height;
//drawing the image to the canvas
ctx.drawImage(mapImg, 0, 0);
//for each point draw a red dot positioned to pointsOfInterest[i].x, pointsOfInterest[i].y
//here you could alose use the point of interest name or whatever you have availible on your json
for(let i = 0; i < pointsOfInterest.length; i ++) {
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(pointsOfInterest[i].x, pointsOfInterest[i].y,15,0,2*Math.PI);
ctx.stroke();
ctx.fill();
}
};
// set the url of the image, once loaded it will trigger image.onload
mapImg.src = mapImageUrl;
html, body {
height: 100%;
}
.mapContainer {
display: flex;
align-items: middle;
justify-content: center;
margin: 0;
height: 100%;
flex-wrap: wrap;
}
#map{
align-self: center
}
<div class="mapContainer">
<canvas id="map"> </canvas>
</div>
这篇关于如何相对于底层图像绝对定位形状元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
