向jQuery图像地图插件添加反向高亮显示？

我正在使用jQuery Map Hilighter插件，但是我不想在每个区域上淡出一片黑色补丁，而是想要将其反转，而不是使周围区域变暗，从而使悬停区域保持相同的颜色。向jQuery图像地图插件添加反向高亮显示？

我已经看过插件的代码，它似乎使用画布元素（和我猜想的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); 
    } 
};

来源

2009-11-13 DisgruntledGoat

的元件的形状被定义为在HTML代码中的<map>元件内部<area>元件。

简单回答你的问题是在默认的context.beginPath();行之后添加这样的事情

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

，然后一个选项：inverseFill: true,，然后确保你的影像地图的所有区域在相同的顺时针方向上声明。

会发生什么情况是您定义了一个用于定义深色补丁的路径的额外子路径，并且当您填充时，只要子路径的圈数小于或等于零，则重叠区域（即原始补丁）将抵消取消，导致你想要的倒行为。

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

如果你有在影像地图定义的完全控制，我的建议是留在这一点，只是确保所有领域走同样的方向（即，只是扭转每个不工作区域的COORDS名单）。

如果不是，那么在初始时，您需要预先计算每个形状的圈数。这很可能涉及遍历点列表和总结每两个连续段之间的角度 - 使用atan2计算。然后在add_shape_to函数中以正确的方向遍历画布的四个角。

无论如何，我希望帮助

更新：

对不起，我没看到你的评论较早。的圆形区域，在add_shape_to功能，具有

} 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(); 
    }

更换 } else if(shape == 'circ') {部分关闭之前和之后的子路径，然后移动到正确的地方，以避免讨厌的红线顶端角落，然后将逆时针参数更改为true以匹配外部矩形。根据需要修改

来源

2009-11-16 17:48:47 ivancho

嗨，谢谢你的回应。我已经实现了你所说的，它似乎适用于某些多边形区域 - 我假设其他人都倒退了，所以我会尽快对其进行排序。但是，我无法用圆形元素来解决它。有任何想法吗？ – DisgruntledGoat 2009-11-24 21:33:38

向jQuery图像地图插件添加反向高亮显示？

回答

相关问题