用raphael缩放多个路径

时间:2010-07-28 12:16:15

标签: javascript svg scale raphael

我正在尝试使用Raphael在网页中创建类似于此example的地图工具。

我有一个我想要使用的地图的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);  }

2 个答案:

答案 0 :(得分:10)

比例可以接受四个参数:

scale(x, y, cx, cy);

其中cxcy是缩放中心的坐标。默认情况下,它位于形状的中间。因此,要缩放两个形状,您需要相对于同一个中心进行缩放。

答案 1 :(得分:-1)

你可以像这样加入你的2条道路:

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");

但是那时你只有一个省......