Question

使用Raphael.js我有250道路的纸张（称为地图）。他们都出现在纸上，但在造型上我有一些问题。我用了

map.attr({fill: "grey",stroke: '#FFF','stroke-width': .5});

设置所有路径的样式，但它只设置第一个路径的样式！？这是我生成papaer的方式

var map = paper.path(["M466.32309,424.29005L465.84309,424.29005 L465.36309423.33012L465.60309,z"]); 
var map = paper.path(["M453.60301,407.97121L454.08301,408.93114 L454.08301,407.73122L455.52302,408.21119L45.00303,410.61102 ,z"]); 
var map = paper.path(["M435.84289,397.65193L435.60289,397.65193 L435.84289,397.89192L435.84289,397.65193L436.32289,z"]);

map.attr({fill: "grey",stroke: '#FFF','stroke-width': .5});

你能告诉我如何循环所有的方案并为所有人添加相同的风格吗？

由于

Answer 1

这看起来不太合适。你每次都覆盖'map'，所以我会假设它实际上是最后一个被设计样式的路径？

很少有可能出现的选择。

1）你可以将每个元素推入Raphael集。 (Raph set docs here)。然后你可以将样式应用于集合（这会将它应用于每个元素）。稍后，如果您还需要对其进行任何其他操作，则可以遍历该集合，例如添加处理程序。

2）你可以给每个元素一个类，然后设置那个样式吗？或者甚至可以根据具体情况将样式应用于每个路径元素。

3）您可以将地图的每个元素存储在数组mapArray中，然后您可以使用传统循环遍历该数组。这感觉有点笨拙，但应该仍然可以正常工作。

在jsfiddle中包含一个示例会很有用，以获得更具体的解决方案。

Answer 2

我就是这样做的。与Ian“1°”相同的原则，但我会添加一个完成所有工作的功能，因为它看起来你覆盖地图250次。

            var momentaryPath;
            var arrayTotal;
            var paper = Raphael("paper1", 1060,610);
            arrayTotal=paper.set();  

            function map(path){
              momentaryPath=paper.path(path);
              arrayTotal.push(momentaryPath);
            }

            function draw(){

                      map("M10 10 l150 150 v150 l150z");
                      map("M350 350 l-150 -150 v-50z");

                      arrayTotal.attr({fill: "grey",stroke: '#FFF','stroke-width': .5});
           }
            draw();

使用函数，您还可以选择使用参数中的字符串更改每个路径的颜色。像这样：

 function map(path,color){
              momentaryPath=paper.path(path).attr({fill : color});
              arrayTotal.push(momentaryPath);
            }

您还可以设置基本颜色并最终更改它，这是您的选择。希望有所帮助：）

在Raphael.js中添加Style到Manu Paths的问题

2 个答案: