Fabricjs 在 svg 的路径组中缩放路径
Fabricjs scale paths in a path-group from svg
我在 jsfiddle 中有两个 SVG，但由于第二个非常大，所以只显示了一个。
是否需要单独缩放组路径？
var canvas = new fabric.Canvas('c');
// svgs
svg1 = document.getElementById('svg1').innerHTML;
svg2 = document.getElementById('svg2').innerHTML;
var zoomScale = 0.8;
function loadSVG(svg, top) {
fabric.loadSVGFromString(svg, function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
obj.fill = 'rgb(0,0,0)';
obj.top = top;
obj.left = 10;
obj.width = canvas.width / 2;
obj.height = canvas.height / 2;
obj.strokeWidth = 1;
obj.stroke = 'green';
obj.scaleX = zoomScale;
obj.scaleY = zoomScale;
console.log('obj', obj)
canvas.add(obj);
obj.setCoords();
canvas.setActiveObject(obj);
});
}
// Works
loadSVG(svg1, 10);
// Not Works
loadSVG(svg2, 300)
Fabricjs 版本：1.7.9
http://jsfiddle.net/zxkh0o2t/
{
"type": "path-group",
"originX": "left",
"originY": "top",
"left": 10,
"top": 300,
"width": 300,
"height": 300,
"fill": "rgb(0,0,0)",
"stroke": "green",
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 0.8,
"scaleY": 0.8,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"paths": [
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 44.883,
"top": 4056.7746,
"width": 1172.3,
"height": 4060.82,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 631.0309500000001,
"y": 6087.1831
},
"path": [
[
"m",
44.883,
6088.0787
],
[
"c",
0,
867.8099,
471.49754,
1624.1118,
1172.2959,
2029.5129
],
[
"V",
4056.7746
],
[
"C",
516.40101,
4462.1552,
44.883,
5220.3197,
44.883,
6088.0787
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 1275.8091,
"top": 274.8115623679888,
"width": 7385.29,
"height": 7842.68,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 4968.454199999998,
"y": 4196.150381183995
},
"path": [
[
"M",
7473.4,
970.2098
],
[
"C",
5740.9526,
43.0377,
4195.9046,
42.9866,
2463.5594,
970.2098
],
[
"C",
1873.3177,
1286.0869,
1275.8091,
2000.3953,
1275.8091,
2754.4453
],
[
"v",
5363.0439
],
[
"h",
644.7423
],
[
"V",
2754.4453
],
[
"c",
0,
-515.7323,
620.4344,
-1172.8076,
1154.18,
-1393.8796
],
[
"c",
1433.6421,
-593.8241,
2354.0081,
-593.8241,
3787.4454,
0
],
[
"c",
533.7456,
221.0873,
1154.1801,
878.1473,
1154.1801,
1393.8796
],
[
"v",
5363.0439
],
[
"h",
644.7424
],
[
"V",
2754.4453
],
[
"c",
0,
-754.1014,
-597.5085,
-1468.3893,
-1187.7504,
-1784.2355
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 8719.4888,
"top": 4056.8769,
"width": 1172.3,
"height": 4060.82,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 9305.6368,
"y": 6087.285400000001
},
"path": [
[
"m",
8719.4888,
4056.8769
],
[
"v",
4060.817
],
[
"c",
700.7781,
-405.3703,
1172.296,
-1161.6517,
1172.296,
-2029.513
],
[
"c",
0,
-867.7587,
-471.4821,
-1625.9541,
-1172.296,
-2031.304
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 1973.8389,
"top": 3712.2195,
"width": 865.6,
"height": 4750.46,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 2406.64115,
"y": 6087.45175
},
"path": [
[
"m",
2587.4009,
3712.2195
],
[
"h",
-361.5194
],
[
"c",
-139.1987,
0,
-252.0426,
112.8438,
-252.0426,
252.0476
],
[
"v",
4246.3742
],
[
"c",
0,
139.1987,
112.8388,
252.0427,
252.0426,
252.0427
],
[
"h",
361.5194
],
[
"c",
139.1984,
0,
252.0425,
-112.844,
252.0425,
-252.0427
],
[
"V",
3964.2671
],
[
"c",
0,
-139.2038,
-112.8389,
-252.0476,
-252.0425,
-252.0476
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 7092.6749,
"top": 3712.2195,
"width": 865.61,
"height": 4750.46,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 7525.4797499999995,
"y": 6087.45175
},
"path": [
[
"m",
7706.2421,
3712.2195
],
[
"h",
-361.5245
],
[
"c",
-139.1935,
0,
-252.0427,
112.8438,
-252.0427,
252.0476
],
[
"v",
4246.3742
],
[
"c",
0,
139.1987,
112.8492,
252.0427,
252.0427,
252.0427
],
[
"h",
361.5245
],
[
"c",
139.1933,
0,
252.0425,
-112.844,
252.0425,
-252.0427
],
[
"V",
3964.2671
],
[
"c",
0,
-139.2038,
-112.8492,
-252.0476,
-252.0425,
-252.0476
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 2839.505999999994,
"top": 4964.1642,
"width": 4253.14,
"height": 1760.38,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 4966.078349999998,
"y": 5844.354350000003
},
"path": [
[
"m",
2865.0202,
5880.8236
],
[
"c",
22.1174,
-1.1208,
44.2298,
-0.9416,
66.3472,
0
],
[
"c",
1.008,
23.3198,
18.5455,
124.8852,
22.8799,
489.2343
],
[
"c",
0,
7.3589,
1.5251,
14.5798,
3.7254,
21.6212
]
问题仅在于第二个 SVG 中的 height 和 width 参数
您目前在第二个 SVG 中：
width="100%"
height="100%"
把它改成这样：
width="300px"
height="300px"
第二个 SVG 也会出现。
这是更新后的 fiddle：http://jsfiddle.net/xp2nj3g1/
我在 jsfiddle 中有两个 SVG，但由于第二个非常大，所以只显示了一个。
是否需要单独缩放组路径？
var canvas = new fabric.Canvas('c');
// svgs
svg1 = document.getElementById('svg1').innerHTML;
svg2 = document.getElementById('svg2').innerHTML;
var zoomScale = 0.8;
function loadSVG(svg, top) {
fabric.loadSVGFromString(svg, function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
obj.fill = 'rgb(0,0,0)';
obj.top = top;
obj.left = 10;
obj.width = canvas.width / 2;
obj.height = canvas.height / 2;
obj.strokeWidth = 1;
obj.stroke = 'green';
obj.scaleX = zoomScale;
obj.scaleY = zoomScale;
console.log('obj', obj)
canvas.add(obj);
obj.setCoords();
canvas.setActiveObject(obj);
});
}
// Works
loadSVG(svg1, 10);
// Not Works
loadSVG(svg2, 300)
Fabricjs 版本：1.7.9 http://jsfiddle.net/zxkh0o2t/
{
"type": "path-group",
"originX": "left",
"originY": "top",
"left": 10,
"top": 300,
"width": 300,
"height": 300,
"fill": "rgb(0,0,0)",
"stroke": "green",
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 0.8,
"scaleY": 0.8,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"paths": [
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 44.883,
"top": 4056.7746,
"width": 1172.3,
"height": 4060.82,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 631.0309500000001,
"y": 6087.1831
},
"path": [
[
"m",
44.883,
6088.0787
],
[
"c",
0,
867.8099,
471.49754,
1624.1118,
1172.2959,
2029.5129
],
[
"V",
4056.7746
],
[
"C",
516.40101,
4462.1552,
44.883,
5220.3197,
44.883,
6088.0787
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 1275.8091,
"top": 274.8115623679888,
"width": 7385.29,
"height": 7842.68,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 4968.454199999998,
"y": 4196.150381183995
},
"path": [
[
"M",
7473.4,
970.2098
],
[
"C",
5740.9526,
43.0377,
4195.9046,
42.9866,
2463.5594,
970.2098
],
[
"C",
1873.3177,
1286.0869,
1275.8091,
2000.3953,
1275.8091,
2754.4453
],
[
"v",
5363.0439
],
[
"h",
644.7423
],
[
"V",
2754.4453
],
[
"c",
0,
-515.7323,
620.4344,
-1172.8076,
1154.18,
-1393.8796
],
[
"c",
1433.6421,
-593.8241,
2354.0081,
-593.8241,
3787.4454,
0
],
[
"c",
533.7456,
221.0873,
1154.1801,
878.1473,
1154.1801,
1393.8796
],
[
"v",
5363.0439
],
[
"h",
644.7424
],
[
"V",
2754.4453
],
[
"c",
0,
-754.1014,
-597.5085,
-1468.3893,
-1187.7504,
-1784.2355
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 8719.4888,
"top": 4056.8769,
"width": 1172.3,
"height": 4060.82,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 9305.6368,
"y": 6087.285400000001
},
"path": [
[
"m",
8719.4888,
4056.8769
],
[
"v",
4060.817
],
[
"c",
700.7781,
-405.3703,
1172.296,
-1161.6517,
1172.296,
-2029.513
],
[
"c",
0,
-867.7587,
-471.4821,
-1625.9541,
-1172.296,
-2031.304
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 1973.8389,
"top": 3712.2195,
"width": 865.6,
"height": 4750.46,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 2406.64115,
"y": 6087.45175
},
"path": [
[
"m",
2587.4009,
3712.2195
],
[
"h",
-361.5194
],
[
"c",
-139.1987,
0,
-252.0426,
112.8438,
-252.0426,
252.0476
],
[
"v",
4246.3742
],
[
"c",
0,
139.1987,
112.8388,
252.0427,
252.0426,
252.0427
],
[
"h",
361.5194
],
[
"c",
139.1984,
0,
252.0425,
-112.844,
252.0425,
-252.0427
],
[
"V",
3964.2671
],
[
"c",
0,
-139.2038,
-112.8389,
-252.0476,
-252.0425,
-252.0476
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 7092.6749,
"top": 3712.2195,
"width": 865.61,
"height": 4750.46,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 7525.4797499999995,
"y": 6087.45175
},
"path": [
[
"m",
7706.2421,
3712.2195
],
[
"h",
-361.5245
],
[
"c",
-139.1935,
0,
-252.0427,
112.8438,
-252.0427,
252.0476
],
[
"v",
4246.3742
],
[
"c",
0,
139.1987,
112.8492,
252.0427,
252.0427,
252.0427
],
[
"h",
361.5245
],
[
"c",
139.1933,
0,
252.0425,
-112.844,
252.0425,
-252.0427
],
[
"V",
3964.2671
],
[
"c",
0,
-139.2038,
-112.8492,
-252.0476,
-252.0425,
-252.0476
],
[
"z"
]
]
},
{
"type": "path",
"originX": "left",
"originY": "top",
"left": 2839.505999999994,
"top": 4964.1642,
"width": 4253.14,
"height": 1760.38,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 4966.078349999998,
"y": 5844.354350000003
},
"path": [
[
"m",
2865.0202,
5880.8236
],
[
"c",
22.1174,
-1.1208,
44.2298,
-0.9416,
66.3472,
0
],
[
"c",
1.008,
23.3198,
18.5455,
124.8852,
22.8799,
489.2343
],
[
"c",
0,
7.3589,
1.5251,
14.5798,
3.7254,
21.6212
]
问题仅在于第二个 SVG 中的 height 和 width 参数
您目前在第二个 SVG 中：
width="100%"
height="100%"
把它改成这样：
width="300px"
height="300px"
第二个 SVG 也会出现。
这是更新后的 fiddle：http://jsfiddle.net/xp2nj3g1/