用raphael缩放多个路径 [英] Scaling multiple paths with raphael

问题描述

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

I'm trying to use Raphael to create a map tool similar to this example in the webpage.

我有一个我想要使用的地图的svg文件，省份都是文件中的单独路径。但是，如果我将svg文件中的坐标直接复制到raphael路径，则图像太大而无法适应屏幕，因此我需要对其进行缩放。

I have an svg file of the map I want to use, and the provinces are all separate paths in the file. However, if I copy the coordinates form the svg file directly to a raphael path, the image is too large to fit the screen and therefore I need to scale it.

我知道我可以使用缩放功能单独缩放所有省道路，但随后它们将不再相互接触，我必须移动它们重新组装地图。

I know I can use the scale function to scale all province paths individually, but then they will no longer be touching each other, and I'd have to move them around to reassemble the map.

有没有办法将路径组合在一起并扩展整个事物，还是有一些聪明的工具来扩展原始的svg文件？ Inkscape缩放似乎不会修改svg文件中的坐标。

Is there a way to group the paths together and scale the whole thing, or is there some clever tool to scale the original svg file? Inkscape scaling doesn't seem to modify the coordinates in the svg file.

谢谢。

来源：

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

推荐答案

比例可以接受四个参数：

scale can accept four parameters:

scale(x, y, cx, cy);

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

where cx and cy are coordinates of the centre of scaling. By default it is in the middle of the shape. So, to scale two shapes you need to scale then relative to the same centre.

这篇关于用raphael缩放多个路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！