不规则可点击形状的图案

Posted 2023-02-22

【中文标题】不规则可点击形状的图案

【英文标题】：Pattern of irregular clickable shapes

【发布时间】：2017-11-02 06:56:21

【问题描述】：

我需要制作一个由许多非矩形形状组成的图案。每个形状都必须是交互式的，并在点击时显示图像。 请求是拍摄彩色玻璃的图像并将其变成一个充满图像的网页。每个窗格必须是可点击的，类似于您在教堂中看到的那些，但在第一次加载时，每个形状都是黑白的，点击后它会显示玻璃的颜色。

我想这个解决方案将包含 2 个部分，整个彩色玻璃图像的彩色版本和上面的黑白版本。然后不知何故，点击时每个小玻璃窗格都需要隐藏其下方的黑白部分以显示下方的彩色图像。

我不知道解决此问题的最佳解决方案是什么，也没有发现任何有用的东西可以帮助您使用形状和随机交互区域进行类似的操作。我在下面插入了一个结果示例，想象每个玻璃部分都是可点击的，点击时会显示颜色。

白线只是表示每个窗格的行为独立于其他窗格。

【问题讨论】：

这是<svg>的工作

你的客户真奇怪！出于好奇，我想在您完成后查看上下文或最终产品。

有很多可点击的 Voronoi 图的 d3 示例，您可能会发现查看这些示例很有趣。

从问题中不清楚图像是动态的/未知的，还是只是一个已知的图像（或一组图像）。如果知道，SVG 是一个很好的选择，并且已经很好地覆盖了。如果图像是未知的/形状的任意排列（当前问题的措辞对我来说意味着），则需要在 JS 中进行一些边缘检测（可能通过<canvas>?）并首先在代码中构建形状。

【参考方案1】：

图像区域地图当然可以帮助您。

看看this网站，这是一个非常方便的工具！

例子

<img src="url/to/your/image.jpg"  usemap="#Map" />
<map name="Map" id="Map">
    <area  title="" href="LINK1" shape="poly" coords="380,163,448,127,515,163,457,205" />
    <area  title="" href="LINK2" shape="poly" coords="140,13,48,1,55,13,47,12" />
</map>

基本上，您可以为图像的某些部分分配不同的区域和不同的链接。做起来比解释更容易！ :)

【参考方案2】：

您似乎正在寻找<map>-tag。

不过，这只会创建要点击的矩形区域。 但是，您可以使用 javascript 的 onclick 方法来检查鼠标是否在某个区域。这样，您还可以检查圆形区域、三角形区域或基本上任何形状的区域。

【讨论】：

你不能只有矩形区域，你可以创建任何多边形！

哦，好吧，我不知道。修好了。

【参考方案3】：

这是一项长期的工作，但是，这可以帮助你：http://imagemap-generator.dariodomi.de/

function helloWorld(area) 
  console.log('You\'ve clicked the right part') 

#container  position: relative; 
#info  
  position: absolute;
  bottom: 90px;
  left: 85px;
  background: yellow;
  display: inline-block;

<section id="container">
<img src="https://i.stack.imgur.com/4KmlR.jpg"  usemap="#Map" />
<map name="Map" id="Map">
    <area  title="" href="javascript:helloWorld()" shape="poly" coords="66,282,73,284,79,303,78,320,49,328,48,317" />
    [...]
</map>

<span id="info">&lt;== click here</span>
</section>

【参考方案4】：

要制作不规则可点击多边形的图案，您可以使用内联 SVG：

SVG 链接<a> element polygon element 制作形状

它将允许您设计任何可点击的形状并使其具有响应性。

下面是一个示例，说明您可以使用悬停和焦点状态来使形状交互：

svg 
  display:block;
  width:40%; height:auto;
  margin:0 auto;

polygon   
  fill:#ccc;
  stroke:#fff; stroke-width:0.3;
  transition: fill .15s;

a:hover .teal  fill:teal; 
a:hover .pink  fill:pink; 
a:focus .teal, 
a:focus .pink  fill:orange; 

<svg viewbox="0 0 20 19">
  <a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a>
  <a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a>
  <a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a>
</svg>

多边形元素只允许多边形。如果您的目标是制作曲线形状，则需要将path 元素与curve commands 一起使用。

【讨论】：

您还可以使用 JavaScript 直接访问元素并添加事件侦听器，例如，在单击时删除窗格：jsfiddle.net/52rrxnsf/2

是的@ComFreek，您可以使用 CSS 设置它们的样式，添加过渡等等...

这似乎正是我所需要的，标记为答案。谢谢你们俩的帮助。