教教我实现这种功能的最简单的方法

Question

是这样的,我做的一个项目想实现这种功能

这张图片上是显示的人体的穴位,总公差不多有300个
就是后台给我数据的时候,给我这个人异常的穴位,我让他异常的穴位亮起来

我现在能理解到的只有两种方法,一个是给我300个图片,我在显示的时候遍历不同的图片
另一个是我用定位写上去,定位要定300个
有没有什么简单的方法呢........让我突破一下...

Answer 1

将所有的穴位信息存在前端的一个json数组中，每个穴位对应一个id，这个id也是每个穴位信息的键，这样后端传过来的是穴位id，然后你通过id获取具体的穴位并进行操作

Answer 2

300个穴位，这个穴位有没有坐标的？
如果没有，不用考虑的。几乎不能实现。就算实现也有性能问题

有坐标的话，后端返回的时候也会有坐标。你可以把相应的坐标放张高亮图片上去

Answer 3

可以用 canvas，人体图片作为背景，穴位和连线用原生 canvas 根据获取的后台接口的数据画出来，

Answer 4

1. SVG

2. 使用usemap

3. canvas

4. div绝对定位在固定尺寸图上（DOM方式）

usemap的使用方法

Answer 5

我是写后端的、就用后端来说吧、我的思路是这样

300个不同穴位就相当于300个变量、定义你需要多少量的变量、

然后绑定在前台页面相应的位置、

前端做判断、该数据有就亮、没有就无特效

鉴于变量的数量庞大、可以考虑写一些循环、

Answer 6

不考虑响应式的前提下，如果是三维的话用 translate3d 定位比较靠谱。要么只能用图片了

Answer 7

canvas把这个图片设为背景，二维坐标系就有坐标了。

Answer 8

300个点取坐标，记录id，后台返回有问题的穴位id，亮起来就可以了嘛~

Answer 9

这个没有简便方法，学位图是关键，要和原始图一样，300个分别切下来做高亮或者什么，对应编个id，存取都按id来，postion：absolte将300个学位图无缝拼接成完整人像display：none；，有问题的id show（），

Answer 10

我觉得这个需求最好是使用canvas去实现，只是具体实现起来这个会比较蛋疼，需要涉及到的算法很多。还有一种就是比较折中但是可以用的。假设你用一个div去把人体的这个背景图片弄出来，然后每一个穴位是一个唯一的id，因为人体的穴位的位置是死的，所以你可以将所有的穴位的位置提前准备到一个json字段中，然后后台告诉你穴位的id，你再去匹配坐标。比如用一个span标签把它绝对定位在上面。如果要牵扯出现那个连接线的话你就要考虑canvas，canvas兼容到ie9+,再如果你们需要兼容低版本浏览器估计就要考虑flash了

Answer 11

后台返回值肯定要处理成可以用的坐标的形式。这个放在前台肯定没法操作的。