javascript - 拉斐尔中多条路径的相同悬停功能

Question

所以我有了我的 Canvas 和我的路径:

var paper1 = Raphael(10, 50, 960, 560);

var mapShape1 = paper1.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z");
var mapShape2 = paper1.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z");
var mapShape3 = paper1.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z");

我这样设计它们:(我相信这可以改进，有没有办法一次完成所有路径？？？)

function style1(shape){
  shape.attr({
            "fill": "#33CCFF",
            "stroke": "000000",
            "stroke-width": "5"
        });
}

style1(mapShape1);
style1(mapShape2);
style1(mapShape3);

但我的问题是如何让单个悬停功能在所有路径上起作用，我知道了:

  mapShape1.hover(
    function(){
      this.animate({
        "fill": "#FF3300"
      }, 500);
    },
    function(){
      this.animate({
        "fill": "#33CCFF"
      }, 500)
    }
   );

但它一次只适用于一种形状，我想做

$(mapShape1, mapShape2, mapShape3).hover(...

但这行不通。我错过了什么？

Answer 1

正如 lib3d 所说，您应该使用 Set .但是，不是使用 forEach 遍历集合内容并应用属性/功能，而是可以在集合本身上添加共享属性/功能，这将把它应用到集合的内容上。稍后会详细介绍，首先看看如何创建集合。

设置处理

有两种方法可以创建集合并向其中添加元素:显式和隐式。

显式

这意味着您自己管理集合，并自己向集合添加元素`

var paper, shapeA, shapeB, shapeC, elementSet;

paper = Raphael(10, 50, 960, 560);
elementSet = paper.set();

shapeA = paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z");
shapeB = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z");
shapeC = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z");

// now add A and C to the set, as well as a rectangle
elementSet.push(
    shapeA,
    shapeC,
    paper.rect(10, 10, 10, 10, 2)
);

这样您就可以完全控制什么进入集合，什么不进入集合。

隐式

您还可以在绘制元素时标记起点和终点。在起点和终点之间绘制的任何元素都会添加到集合中。

var paper, shapA, shapeB, shapeC, elementSet;

paper = Raphael(10, 50, 960, 560);

paper.setStart();

shapeA = paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z");
shapeB = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z");
shapeC = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z");

paper.rect(10, 10, 10, 10, 2);

elementSet = paper.setFinish();

变量 elementSet 现在包含形状 A、B 和 C 以及一个矩形。

显式还是隐式？

我个人建议始终使用显式方法。这样你就可以 100% 控制什么进入你的集合，什么不进入。另外，我发现 setStart() 和 setFinish() 的命名是倒过来的，我们是用“set”“开始”，而不是“设置”“start”。如果您现在了解意图，这可能是显而易见的，但这正是命名不明确的危险 - 下一个开发人员可能不知道并假设不同的东西。

更多用法

对于我们创建的应用程序，我们必须绘制、删除、更新和重新定位复杂的元素组。为了实现这一点，我们大量使用了集合。除了集合允许您将属性应用于集合中的每个元素这一事实外，集合还允许您将其用作 DTO。

例如以下作品:

var elementSet = paper.set();

elementSet.push(elemA, elemB, elemC);
elementSet.myApp.someDTO = {
    property: value,
    something: else
};

为了保持一致性和清晰度，我倾向于使用 myApp 作为 namespace 。它的美妙之处在于，即使 someDTO 包含 Raphael 元素，您在集合上应用的任何内容都不会应用于 DTO 中的元素。这使得它在您需要时真正可以用来传递上下文、坐标等。

使用集合

现在回到使用集合的好处。让我们在这里回顾您的用例:您想应用属性并将鼠标悬停在任意数量的路径上。

如果我们像上面的显式示例那样创建一个集合，我们将得到以下结果:

var paper, elementSet;
paper = Raphael(10, 50, 960, 560);
elementSet = paper.set();
elementSet.push(
    paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z"),
    paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z"),
    paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z"),
);

现在在集合上应用样式:

elementSet.attr({
    fill: '#33CCFF',
    stroke: '#000000',
    'stroke-width': 5
});

然后添加悬停:

elementSet.hover(
    function(){
        this.animate({
            "fill": "#FF3300"
        }, 500);
    },
    function(){
        this.animate({
            "fill": "#33CCFF"
        }, 500)
    }
);

集合也像元素一样支持链接:

elementSet.push(
    /* elements */
).attr({
    /* attributes */
}).hover(
    /* hover fn's
);

要查看最终结果，有 a fiddle here

扩展的悬停功能

如果你想将悬停高亮应用到所有元素，你可以再次应用集合上的属性:

onMouseOver: function () {
    elementSet.animate({
        fill: '#FF3300'
    }, 500);
};
onMouseOut: function () {
    elementSet.animate({
        fill: '#33CCFF'
    }, 500);
};

elementSet.hover(onMouseOver, onMouseOut);

可以找到查看此内容的 fiddle here

使用 jQuery

为了能够通过 jQuery 绑定(bind)悬停功能，必须访问 nodes的元素。元素本身不是 DOM 节点，而是 Raphael 对象。通过使用 element.node，可以在该节点上使用 jquery 来添加行为。我个人的经验是这工作得很好，但是你永远不想通过 jquery 修改节点，因为这会导致真正意想不到的行为。Raphael 提供了您需要的所有功能，不需要使用 jquery。