Question

我正在使用jQuery Map Hilighter插件，但我不想在每个区域上淡化暗色调，而是想要反转它，而是使周围区域变暗，使悬停区域保持相同的颜色。 / p>

我已经查看了该插件的代码，它似乎使用了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代码中的<area>元素内定义为<map>个元素。

你的问题的简单答案是添加这样的东西

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

在context.beginPath();行之后，然后是默认值中的一个选项：inverseFill: true,，然后确保图像映射中的所有区域都以相同的顺时针方向声明。

您所定义的是为定义暗色块的路径定义一个额外的子路径，当您填充时，重叠区域（即原始色块）将取消，只要子路径的绕组号取消，导致你想要的反转行为。

如果区域多边形定义可以在两个方向上旋转，则会变得更加复杂。例如，如果您对美国地图的原始MapHilight演示执行上述操作，则只有部分状态会正常运行，因为它们的形状是按照正确的顺时针方向定义的 - 其余部分保持黑暗，因为它们的绕组数字是错误的符号。

如果您完全控制了图像映射定义，我的建议就是将其保留在那个位置，并确保所有区域都朝着相同的方向（即，只是反转每个不起作用的区域的coords列表）。

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

无论如何，我希望有帮助

<强>更新

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

  } 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以匹配外部矩形。根据需要修改

在jQuery图像映射插件中添加反向突出显示？

1 个答案: