javascript - 带曲线的图像贴图

标签 javascript html css

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

有没有办法在这些图像映射上使用贝塞尔曲线?如果可能的话,我不想使用 SVG 对象,因为它似乎不必要地复杂(尽管很明显,我可能是错的)。

最佳答案

imagemaps 是一个古老的 html 功能,当时还没有人考虑贝塞尔曲线。图像映射的一个(很少使用的)功能可能是您的解决方案:server-side image maps .

它们的工作方式确实有点不同:您不是为特定区域定义不同的 url,而是为整个 map 定义一个 url,并将用户点击的坐标附加到该 url。 above link还为您提供了一个如何尝试的示例。

例如如果您有这样的图像映射,则链接到 http://foo.com/target然后你点击某个地方(比如像素坐标 25/27),然后用户 http://foo.com/target?25,27

有了它,您现在可以在服务器端决定用户点击的位置。 (在那里你可以使用更复杂的多边形和贝塞尔曲线来确定面积)

关于javascript - 带曲线的图像贴图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29634961/

相关文章:

javascript - 点击功能不会在每次点击时触发

javascript - Handlebars 日期格式问题

javascript - 如何保存然后加载 Three.js 场景

html - Twitter Bootstrap 图标不可见

jquery - 根据选择下拉选项更改结果

javascript - 鼠标悬停不改变颜色

javascript - ReactJS - 将多个函数作为单个 Prop 传递给子组件

javascript - 当用户从下拉列表中选择一个选项时,如何更改按钮上的文本? ( Angular .js)

javascript - 如何将多个按钮水平居中显示大小?

html - 如何避免 HTML 中的孤立动态文本