hot-zone-anchor(图片热区设置锚点)

发表于 | 更新于 | 阅读次数：

原图红色区域为背景图，黄色方块为锚点

缩小后的图

计算方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 由图一可知原图尺寸
var originWidth = 871
var originHeight = 325
// 锚点的left,top,width,height
var map = [254, 124, 118, 72]
//  缩小后的图可以先计算出currentHeight/currentHeight
// 可以通过$(el).width()获取长度，$(el).height()获取宽度
var currentWidth = 686
var currentHeight = 255
var currentMap = []
/**
 * 现在的left(width) / 原来的left(width) = 现在的长度 / 原来的长度
 *   currentMap[0] / map[0] = currentWidth  / originWidth
 *   currentMap[2] / map[2] = currentWidth  / originWidth
 * 现在的top(height) / 原来的top(height) = 现在的高度 / 原来的高度
 *   currentMap[1] / map[1] = currentHeight  / originHeight
 *   currentMap[3] / map[3] = currentHeight  / originHeight
*/
// 可得
currentMap[0] = currentWidth  / originWidth * map[0]
currentMap[2] = currentWidth  / originWidth * map[2]
currentMap[1] = currentHeight  / originHeight * map[1]
currentMap[3] = currentHeight  / originHeight * map[3]
console.log(currentMap) // [200.05051664753157, 97.29230769230769, 92.93685419058554, 56.49230769230769]

可以看出计算结果和测量结果相差非常小

1
2
[200.05051664753157, 97.29230769230769, 92.93685419058554, 56.49230769230769]
[200,                97,                93,                56]

可以放若干个锚点(点击图片可查看demo)