Question

我希望能够在我上传的图片上放置四个点。到目前为止我有这个让我绘制一个点，有没有办法绘制四个独立的点？

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


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

Answer 1

如果你想在每个角落添加一个点，一个简单的方法就是用你的img包装一个div容器，然后制作它的＆＃39;位置相对（以便它的所有孩子将相对于它定位），然后添加四个元素，每个元素都可以定位，无论你喜欢什么。你可以在没有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;
}

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

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

1 个答案: