向 jQuery 图像地图插件添加反向突出显示？

Question

我正在使用 jQuery Map Hilighter 插件，但不是在每个区域上淡出深色斑块，我想扭转这一点，而是使周围区域变暗，使悬停区域保持相同的颜色。

我查看了该插件的代码，它似乎使用 canvas 元素（我猜是 MS 的等效元素）来进行突出显示。然而，Firebug 并不太清楚形状的定义位置 - 在上面的演示中它只是显示了这一点：

 <canvas style="border: 0pt none ; padding: 0pt; width: 960px; height: 593px; position: absolute; left: 0pt; top: 0pt; opacity: 1;" height="593" width="960"></canvas>

而且我看不到任何指定要悬停的元素形状的内容。这是 JS 中似乎正在创建形状的部分：

add_shape_to = function(canvas, shape, coords, options) {
    var i, context = canvas.getContext('2d');
    context.beginPath();
    if(shape == 'rect') {
        context.rect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]);
    } else if(shape == 'poly') {
        context.moveTo(coords[0], coords[1]);
        for(i=2; i < coords.length; i+=2) {
            context.lineTo(coords[i], coords[i+1]);
        }
    } else if(shape == 'circ') {
        context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, false);
    }
    context.closePath();
    if(options.fill) {
        context.fillStyle = css3color(options.fillColor, options.fillOpacity);
        context.fill();
    }
    if(options.stroke) {
        context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity);
        context.lineWidth = options.strokeWidth;
        context.stroke();
    }
    if(options.fade) {
        fader(canvas, 0);
    }
};

Answer 1

元素的形状被定义为 HTML 代码中

元素内的

元素。

您的问题的简单答案是在 context.beginPath(); 行之后添加类似的内容，然后在默认值中添加

  if (options.inverseFill) {
    context.rect(0,0, canvas.width,canvas.height);
  }

一个选项：inverseFill: true,，然后确保图像映射中的所有区域都以相同的顺时针方向声明。

发生的情况是，您为定义暗块的路径定义了一个额外的子路径，并且当您填充时，只要子路径的缠绕数取消，重叠区域（即原始块）就会抵消，从而导致你想要的倒立行为。

如果您的区域多边形定义可以双向旋转，事情就会变得更加复杂。例如，如果您对美国地图的原始 MapHilight 演示执行上述操作，则只有某些州会表现正确，因为它们的形状是按正确的顺时针方向定义的 - 其余州保持黑暗，因为它们的缠绕数字是错误的符号。

如果您可以完全控制图像映射定义，我的建议是保留它并确保所有区域都朝同一方向（即，只需反转每个不起作用的区域的坐标列表）。

如果没有，那么在初始化时您需要预先计算每个形状的缠绕数。这很可能涉及检查点列表并对每两个连续线段之间的角度求和 - 使用 atan2 计算。然后在 add_shape_to 函数中以正确的方向遍历画布的 4 个角。

无论如何，我希望这对您有所帮助

更新：

抱歉，我之前没有看到您的评论。
对于圆形区域，在 add_shape_to 函数中，替换
} else if(shape == 'circ') { 部分 with

  } else if(shape == 'circ') {
    context.closePath();
    context.moveTo(coords[0] + coords[2], coords[1]);
    context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, true);
    context.closePath(); 
  }

它关闭前后子路径，然后移动到正确的位置，避免讨厌的红线到顶角，然后更改逆时针参数设置为 true 以匹配外部矩形。根据需要修改