1

我有一个画布，用户可以通过在其周围绘制形状来选择图像上的东西。所以画布上可能有不止一种形状

现在我想要的是当鼠标悬停形状时，我想改变画布的不透明度，除了自定义形状（鼠标悬停在哪里）。

就像一些 jQuery 插件在做 http://davidlynch.org/projects/maphilight/docs/demo_simple.html的反向区域效果（这里是反向效果）

4

1 回答 1

0

如果我正确理解您的问题，您需要使用 Canvas 的数据模型方法。基本上，您需要存储将出现在画布上的信息。然后，您有一个使用该信息呈现画布的函数。

当用户将鼠标移到画布上时，您可以确定他们相对于画布的 x,y，查看您的数据并查看 x,y 处的内容。更改数据中的状态并重新构建画布。

这是我快速拼凑的一个非常粗略的例子。我强烈建议您更好地构建您的 javascript，但这是一个概念证明。在实践中，您将希望以索引格式存储数据，并更好地调用 mousemove() 函数，因为当用户移动鼠标时它会被锤击（通常完成setTimeout并忽略后续调用）。

$(function() {
    function renderCanvas() {
        for(var i = 0; i < data.length; i++) {              
          context.fillRect(data[i].x, data[i].y, data[i].width, data[i].height);
        }        
    }

    var context = $(".myCanvas").get(0).getContext("2d");

    var data = [];

    data.push({ x : 25, y : 25, height : 100, width : 100 });

    renderCanvas();

    $(".myCanvas").mousemove(function(e) {
        for(var i = 0; i < data.length; i++) {
            if (e.pageX > data[i].x && e.pageX < data[i].x + data[i].width && e.pageY > data[i].y && e.pageY < data[i].y + data[i].height) {
               data[i].height = 200;
               renderCanvas();
            }                        
        }
    });
});

小提琴格式：http: //jsfiddle.net/wUnDu/1/

于 2012-10-29T07:05:16.107 回答