logo标签列表

使用Raphael扩展多个路径

javascriptsvgscaleraphael
5
我正在尝试使用Raphael创建一个类似于此示例的地图工具。
我有一个要使用的地图的svg文件，省份在文件中都是单独的路径。然而，如果我直接从svg文件复制坐标到raphael路径中，则图像太大而无法适应屏幕，因此我需要对其进行缩放。
我知道可以使用比例尺函数分别缩放所有省份路径，但这样它们将不再相互接触，并且我必须将它们移动以重新组装地图。
是否有一种方法将路径组合在一起并缩放整个地图，或者有一些聪明的工具可以缩放原始svg文件？Inkscape的缩放似乎不会修改svg文件中的坐标。
谢谢。
window.onload=function(){
  var paper = new Raphael(document.getElementById('canvas_container'),2000,4000);

  var province = {}
    province.a = paper.path("M 1195.23,2765.05 1176.44,2753.8 1182.93,2743.86 1198.21,2745.13 1201.92,2738.14 1239.79,2738.32 1263.62,2752.62 1284.76,2743.95 1317.8,2750.74 1367.35,2746.42 1392.66,2715.11 1400.21,2696.4 1414.4,2707.23 1451.71,2707 1456.53,2690.06 1486.98,2691.43 1517.68,2681.6 1536.64,2650.12 1560.81,2641.94 1566.44,2625.91 1655.76,2577.95 1652.86,2580.91 1640.92,2614.69 1610.92,2642.31 1590.74,2684.67 1565.32,2702.68 1559.58,2720.44 1521.84,2784.07 1477.67,2814.72 1461.87,2821.15 1442.9,2853.64 1440.5,2874.94 1420.09,2879.49 1381.85,2912.96 1374.51,2932.58 1336.52,2969.11 1318.56,2959.93 1310.72,2940.64 1294.49,2938.23 1287.2,2923.45 1265.55,2923.98 1246.43,2913.8 1239.54,2901.7 1213.98,2894.24 1206.33,2881.17 1214.32,2876.4 1199.89,2858.79 1204.99,2841.58 1220.87,2835.67 1210.72,2812.63 1232.15,2807.48 1225.15,2793.26 1231.23,2781.47 1213.41,2762.4 1195.23,2765.05 z");
    province.b = paper.path("M 1050.73,2867.78 1046.35,2845.33 1040.53,2832.74 1044.23,2819.35 1066.03,2819.42 1087.07,2805.18 1094.97,2784.45 1104.23,2779.31 1115.05,2774.95 1131.12,2800.44 1146.19,2792.66 1146.45,2777.1 1166.57,2777.52 1166.63,2804.27 1194.54,2818.11 1210.74,2812.67 1220.87,2835.67 1204.99,2841.58 1199.89,2858.79 1214.32,2876.4 1206.33,2881.17 1213.98,2894.24 1239.54,2901.7 1246.43,2913.8 1265.55,2923.98 1287.2,2923.45 1294.49,2938.23 1310.72,2940.64 1318.56,2959.93 1336.52,2969.11 1320.71,2984.32 1320.22,2994.45 1309.88,3001.29 1297.83,2993.4 1293.02,2997.09 1289.27,3013.92 1283.96,3022.6 1275.93,3022.85 1266.2,3024.26 1259.83,3020.74 1253.98,3024.67 1246.93,3031.3 1237.88,3017.88 1214.41,3015.12 1185.95,3005.82 1174.43,3017.4 1174.77,3035.97 1170.62,3043.42 1158.95,3043.06 1145.56,3029.7 1137.74,3036.82 1127.73,3037.17 1121.47,3030.56 1114.84,3035.16 1101.49,3035.03 1102.89,3011.96 1123.59,2990.26 1137.04,2989.94 1130.85,2973.55 1120.31,2972.88 1114.08,2984.93 1100.47,2983.63 1095.19,2970.61 1085.65,2970.31 1077.68,2950.18 1061.43,2942.38 1057.59,2940.54 1055.36,2924.83 1041.79,2915.84 1041.19,2898.89 1048.93,2884.2 1032.89,2877.32 1038.29,2867.02 1050.73,2867.78 z");


province.a.scale(.5, .5);  
province.b.scale(.5, .5);  }
你的路径字符串中不应该有其他字母吗？逗号代表“L”吗？ - Boris Delormas
逗号仅分隔x和y坐标，但如果坐标对之间没有字母，则代码似乎将L作为默认值。如果我用以下字符串替换该字符串，则效果相同：M 1195.23,2765.05 L 1176.44,2753.8 L 1182.93,2743.86 ... ... - Keppo
2个回答
10

scale可以接受四个参数：

scale(x, y, cx, cy);

其中cx和cy是缩放中心的坐标。默认情况下，它位于形状的中央。因此，要缩放两个形状，您需要相对于相同的中心进行缩放。

缩放+平移将重新调整路径，Dmitry非常感谢Raphael :-) - ic3
有没有一个示例展示如何使用cx和cy坐标？谢谢！ - Curious2learn
1
@Curious2learn：对我来说，0、0很有效。例如scale(0.5, 0.5, 0, 0)。 - mrooney
-1
你可以像这样连接你的两条路径：
province.a = paper.path("M 1195.23,2765.05 1176.44,2753.8 1182.93,2743.86 1198.21,2745.13 1201.92,2738.14 1239.79,2738.32 1263.62,2752.62 1284.76,2743.95 1317.8,2750.74 1367.35,2746.42 1392.66,2715.11 1400.21,2696.4 1414.4,2707.23 1451.71,2707 1456.53,2690.06 1486.98,2691.43 1517.68,2681.6 1536.64,2650.12 1560.81,2641.94 1566.44,2625.91 1655.76,2577.95 1652.86,2580.91 1640.92,2614.69 1610.92,2642.31 1590.74,2684.67 1565.32,2702.68 1559.58,2720.44 1521.84,2784.07 1477.67,2814.72 1461.87,2821.15 1442.9,2853.64 1440.5,2874.94 1420.09,2879.49 1381.85,2912.96 1374.51,2932.58 1336.52,2969.11 1318.56,2959.93 1310.72,2940.64 1294.49,2938.23 1287.2,2923.45 1265.55,2923.98 1246.43,2913.8 1239.54,2901.7 1213.98,2894.24 1206.33,2881.17 1214.32,2876.4 1199.89,2858.79 1204.99,2841.58 1220.87,2835.67 1210.72,2812.63 1232.15,2807.48 1225.15,2793.26 1231.23,2781.47 1213.41,2762.4 1195.23,2765.05 M 1050.73,2867.78 1046.35,2845.33 1040.53,2832.74 1044.23,2819.35 1066.03,2819.42 1087.07,2805.18 1094.97,2784.45 1104.23,2779.31 1115.05,2774.95 1131.12,2800.44 1146.19,2792.66 1146.45,2777.1 1166.57,2777.52 1166.63,2804.27 1194.54,2818.11 1210.74,2812.67 1220.87,2835.67 1204.99,2841.58 1199.89,2858.79 1214.32,2876.4 1206.33,2881.17 1213.98,2894.24 1239.54,2901.7 1246.43,2913.8 1265.55,2923.98 1287.2,2923.45 1294.49,2938.23 1310.72,2940.64 1318.56,2959.93 1336.52,2969.11 1320.71,2984.32 1320.22,2994.45 1309.88,3001.29 1297.83,2993.4 1293.02,2997.09 1289.27,3013.92 1283.96,3022.6 1275.93,3022.85 1266.2,3024.26 1259.83,3020.74 1253.98,3024.67 1246.93,3031.3 1237.88,3017.88 1214.41,3015.12 1185.95,3005.82 1174.43,3017.4 1174.77,3035.97 1170.62,3043.42 1158.95,3043.06 1145.56,3029.7 1137.74,3036.82 1127.73,3037.17 1121.47,3030.56 1114.84,3035.16 1101.49,3035.03 1102.89,3011.96 1123.59,2990.26 1137.04,2989.94 1130.85,2973.55 1120.31,2972.88 1114.08,2984.93 1100.47,2983.63 1095.19,2970.61 1085.65,2970.31 1077.68,2950.18 1061.43,2942.38 1057.59,2940.54 1055.36,2924.83 1041.79,2915.84 1041.19,2898.89 1048.93,2884.2 1032.89,2877.32 1038.29,2867.02 1050.73,2867.78 z");

但这样你就只有一个省份了...

是的，这不好，因为我以后想要能够像raphael示例中那样选择和突出显示单个省份。 - Keppo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接