gpt4 book ai didi

javascript - 使用未分组的 Fabric JS 加载 SVG

转载 作者:行者123 更新时间:2023-11-30 10:09:51 39 4
gpt4 key购买 nike

谁能告诉我如何使用 fabric js ungrouped 加载 SVG 文件。使用以下代码加载 SVG 文件,但它显示为单个对象。

<html>
<head>
<script src="fabric.min.js"></script>
<script src="jquery.min.js"></script>
<script>
$(function (){

var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = true;
fabric.loadSVGFromURL("xxx.svg", function (objects, options) {
var group = fabric.util.groupSVGElements(objects, options);
canvas.add(group);
canvas.renderAll();
});
});
</script>
</head>
<body>
<canvas id="c" width="800px" height="600px"></canvas>
</body>
</html>

PS:我尝试将对象一个一个地(使用循环)添加到 Canvas ,但没有成功。我也试过这个:Load SVG from file to canvas and ungroup it

最佳答案

这是我为当前项目所做的,我正在处理加载未分组的 svg 文件。

var canvas = new fabric.Canvas('myCanvas');

fabric.loadSVGFromURL('svgfile.svg', function (objects) {
canvas.add.apply(canvas, objects);
canvas.renderAll();
});

现在您可以像这样选择一个对象。

canvas.on('object:selected', function (e) {
var activeObject = e.target;
activeObject.setFill('purple');
});

关于javascript - 使用未分组的 Fabric JS 加载 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27099171/

39 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com