比木白-可视化

发表于 | 分类于

可视化

\<map>与\<area>

原因

最近在写虎扑足球”战疫”期间,接触了在一张原始图上迅速寻找热点并点击弹出弹窗的功能,由于是运营活动页,时间紧任务重,于是使用了\<map>与\<area>标签,任意一张图片img使用useMap属性,即可用\<map>与\<area>标签在上面构造热区和热点,并以图上的左上角为坐标的(0,0)点,构建所有热区和热点的位置,并支持href链接跳转以及事件处理

使用

harmony
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, {PureComponent} from 'react';
import images from '../images';

class Demo extends PureComponent {
   constructor(props) {super(props);}
   
   onClickHandler = (e) => {
       console.log(e);
   };   
   
   render() {
       const {onClickHandler = () => {}} = this;
       return (
           <>
               <img src={images._1} useMap='#planetmap' />
               <map id='planetmap'>
                   <area shape='circle' coords='180,139,14' href='javascript:void(0);' onClick={onClickHandler}>
                   </area>
               </map>
           </>
       )
   }    
}

export default Demo;

具体的使用方法在HTML \<area> 标签,在属性shape为circle的情况下,此时热区为圆形,coords的坐标,前两个为x轴和y轴的位置(px),最后一个为半径的长度(px);在属性shape为rect的情况下,此时热区为长方形,coords的坐标,前两个为x轴和y轴的位置(px),后面两个为长方形的长和宽。map标签的id则是img图片标签useMap属性要使用的。