使用 CSS 在图像上绘制圆圈
Draw circles on image with CSS
是否可以使用 CSS 在图像上绘制圆圈?
我有区域 1、区域 2、区域 3 和区域 4 的链接图像。
Zones
我在 salesforce 中有一个表单,在多选选择列表中包含这些值。
如果选择了任何区域,则会圈出适当的区域。
以下是所选区域 1、2 和 4 的示例。 Zone 1, 2 & 4
目前我有 16 张不同的图像,每个可能的圆圈区域组合,并使用 visualforce 拉出正确的图像。基于输入。
我刚刚被要求添加第 5 个区域到这个图像,这将使我在 25 个图像中进行所有可能的区域选择,并且在我的可视页面中有一个非常长的条件语句。
我是否可以使用 CSS 或 HTML 在一张图像上绘制圆圈,而不是为每个可能的区域组合使用不同的图像?
非常感谢您的帮助。
这里有一些代码可以执行此操作:
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>
检查笔:
是否可以使用 CSS 在图像上绘制圆圈?
我有区域 1、区域 2、区域 3 和区域 4 的链接图像。 Zones 我在 salesforce 中有一个表单,在多选选择列表中包含这些值。 如果选择了任何区域,则会圈出适当的区域。 以下是所选区域 1、2 和 4 的示例。 Zone 1, 2 & 4
目前我有 16 张不同的图像,每个可能的圆圈区域组合,并使用 visualforce 拉出正确的图像。基于输入。
我刚刚被要求添加第 5 个区域到这个图像,这将使我在 25 个图像中进行所有可能的区域选择,并且在我的可视页面中有一个非常长的条件语句。
我是否可以使用 CSS 或 HTML 在一张图像上绘制圆圈,而不是为每个可能的区域组合使用不同的图像?
非常感谢您的帮助。
这里有一些代码可以执行此操作:
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>
检查笔: