时间戳

首页 > 解决方案 > 使用 CSS 在图像上绘制圆圈

html - 使用 CSS 在图像上绘制圆圈

问题描述

是否可以使用 CSS 在图像上绘制圆圈？

我有区域 1、区域 2、区域 3 和区域 4 的链接图像。 区域 我在 salesforce 中有一个表单，这些值在多选选择列表中。如果选择了任何区域，则将圈出适当的区域。这是选择区域 1、2 和 4 的示例。1、2 和 4 区

目前我有 16 个不同的图像，每个可能的圆圈区域组合，并使用视觉力来拉出正确的图像。基于输入。

我只是被要求为这张图片添加第 5 个区域，这将使我在 25 张图片中进行所有可能的区域选择，并在我的视觉页面中添加一个很长的条件语句。

无论如何我可以使用 CSS 或 HTML 在一张图像上绘制圆圈，而不是为每个可能的区域组合使用不同的图像？

非常感谢您的帮助。

标签： htmlcsssalesforcevisualforce

解决方案

这里有一些代码可以做到这一点：

function drawZones(zoneList) {
  var container = document.getElementById('zone-image-container');

  //  Remove existing circles.
  for (var i = container.children.length - 1; i > 0; i--) {
    container.removeChild(container.children[i]);
  }

  //  Add circles.
  for (var i = 0; i < zoneList.length; i++) {
    var zone = document.createElement('div');
    zone.className = 'zone-circle zone-' + zoneList[i];
    container.appendChild(zone);
  }
}

drawZones([1, 2, 4]);
#zone-image-container {
  /* Cause the absolutely positioned circles to be relative to the container */
  position: relative;
}


/* The image must have a fixed size for the size and positions of the */


/* circles to be consistantly correct */

img {
  width: 400px;
}

.zone-circle {
  position: absolute;
  width: 80px;
  height: 40px;
  border-radius: 40px;
  border: 5px solid red;
  left: 160px;
}


/* Custom Y position for each zone. */

.zone-4 {
  top: 30px;
}

.zone-3 {
  top: 100px;
}

.zone-2 {
  top: 170px;
}

.zone-1 {
  top: 240px;
}
<div id="zone-image-container">
  <img src="https://i.stack.imgur.com/paJw2.png" />
</div>

查看笔：

https://codepen.io/anon/pen/zJWWYb

推荐阅读