带曲线的图像映射

Question

我需要创建许多带有自定义边缘的图像映射，尤其是弯曲的边缘。我能找到的唯一选择是具有直边的多边形。虽然可以模拟具有数十亿个点的曲线，但用户可以选择缩放图像，完美曲线至关重要。

在这些图像地图上是否有使用贝塞尔曲线的方法？如果可能的话，我不想使用SVG对象，因为它似乎不必要地复杂（虽然，显然，我可能是错的）。

Answer 1

图像地图是一个古老的HTML功能，当时还没有人认为bezier曲线。图像映射中有一个（很少使用）功能可能是您的解决方案：server-side image maps。

它们的工作方式略有不同：您可以为整个地图定义一个网址，而不是为特定区域定义不同的网址，而用户点击的网址将附加到该网址。 above link还为您提供了一个如何尝试它的示例。

e.g。如果您有这样的图像地图，它会链接到http://foo.com/target并且您点击某处（比如像素坐标25/27），然后是用户http://foo.com/target?25,27

有了这个，您现在可以决定用户点击的服务器端。 （在那里你可以使用更复杂的多边形与beziérs来确定区域）

Answer 2

是的，你说过SVG是不必要的复杂，但实际上，它不是，和它内置了对bezier曲线的支持，而地图则没有。

使用<path> SVG元素创建贝塞尔曲线，查看this MDN article：

  

因此我们将从稍微复杂的Bezier曲线开始：立方体曲线，C。Cubic Beziers为每个点接受两个控制点。因此，当您想要创建一个三次Bezier

时，必须指定三组坐标

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

  

此处(x,y)的最后一组坐标是您希望线条结束的位置。另外两个是控制点。 (x1,y1)是曲线开始的控制点，(x2,y2)是曲线的终点。如果您熟悉代数或微积分，控制点基本上描述了从每个点开始的线的斜率。 Bezier函数然后创建一条平滑曲线，将您从线路开始处建立的斜率转移到另一端的斜率。

因此，要在HTML中生成一个三次贝塞尔曲线，您只需要：

<svg width="190px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 50 C 25 75, 125 75, 100 50" stroke="black" fill="transparent"/>
</svg>

在javascript中，您可以使用JS设置这样的曲线，类似于以下内容：

var svg = document.getElementById('svgl');

var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttributeNS(null, 'd', 'M10 10 C 20 20, 40 20, 50 10');
path.setAttributeNS(null, 'stroke', 'black');
path.setAttributeNS(null, 'fill', 'transparent');

svg.appendChild(path);

<svg id="svgl" width="190px" height="100px" version="1.1" 
     xmlns="http://www.w3.org/2000/svg">
</svg>

基本上，您需要了解的SVG贝塞尔曲线，“复杂”位，就是您的值如何影响控制点：

在<path>元素中，唯一重要的是d属性，它决定了构建路径的内容。

对于贝塞尔曲线，路径必须

C x1 y1, x2 y2, x y

在其中的某个地方。在上面的例子中，Mx y所做的就是告诉从哪里开始的路径。

在

C x1 y1, x2 y2, x y

每对x / y坐标控制曲线的末端（如x y），或（如x1 y1，x2 y2）控制点。

这是一个方便的图表：

您可以看到输入如何影响贝塞尔曲线的最终形状，

Answer 3

要在CSS中创建一个圆，您需要做的是将边框半径更改为50％;

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
}

因此，如果没有过于细致，边界半径将是开始玩弯曲边缘的最佳位置。

另外这个通过css技巧的链接可能是另一个很好的起点。 https://css-tricks.com/examples/ShapesOfCSS/