javascript - 如何在图像上绘制四个点？

Question

我希望能够在我上传的图像上放置四个点。到目前为止，我已经可以绘制一个点了，有没有办法绘制四个单独的点？

<img src="null.png" id="marker" style="position: absolute;" /> 


<script> 
    $('#marker')
       .css('left', e.pageX)
       .css('top', e.pageY)
       .show();
   </script>

Answer 1

如果您想在每个 Angular 上添加一个点，一种简单的方法是用 div 容器包装您的 img，使其位置相对(以便其所有子项都相对于它定位) )，然后添加四个元素，每个元素都可以按照您喜欢的方式放置。您可以在没有 JavaScript 的情况下实现此目的:

HTML

<div class="img-wrapper">
    <img src="null.png" id="marker" />
    <span class="img-corner top-left"></span>
    <span class="img-corner top-right"></span>
    <span class="img-corner bottom-left"></span>
    <span class="img-corner bottom-right"></span>
</div>

<小时/>

CSS

.img-wrapper {
    position: relative;
    display: inline-block;
}

.img-corner {
    position: absolute;
    display: block;
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 3px;
}

.top-left: {
    left: 0;
    top: 0;
}

.top-right: {
    right: 0;
    top: 0;
}

.bottom-left: {
    left: 0;
    bottom: 0;
}

.bottom-right: {
    right: 0;
    bottom: 0;
}

您还可以将每个点的位置更改为您想要的任何位置。