Question

我目前正在使用fabric.js并尝试加载SVG，并且具有与我目前使用矩形（我曾经测试过）相似的功能

我目前可以做的是创建一个 box1.on（'moving'，function（） { movetobox（box1a，box1） }）;

移动第二个矩形（我将它们的对象称为box1a和box1）始终位于另一个矩形的顶部。

但是如果我加载一个SVG，我在尝试使用on（'moving'）引用它时会收到一个未定义的错误。

我创建了一个JSfiddle来更轻松地显示我的代码

https://jsfiddle.net/marak/5tvdu532/?utm_source=website&utm_medium=embed&utm_campaign=5tvdu532

现在这适用于rects：

box1.on('moving', function() {
  movetobox(box1a, box1)
});

但这对SVG的

无效

box1SVG.on('moving', function() {
  moveSVGtobox();
});

（注意两个函数都做同样的事情，它们在JSFiddle上）。

是否有另一种加载SVG的方法，允许我像rect一样引用它？我将拥有相当多的，每个都必须能够与不同的对象对齐，并且可以通过代码访问。

Marak

Answer 1

找到解决方案。

在SVG的创建脚本中，我添加了：name =＆＃34; test＆＃34;

fabric.loadSVGFromURL('http://localhost/pgl/images/marakrough.svg', function(objects, options) { 
    var shape = new fabric.util.groupSVGElements(objects, options);
    canvas.add(shape.scale(1));
    shape.set({ left: 200, top: 100, name: "test" }).setCoords();
    canvas.add(shape);

这允许我在使用它添加它们之后在画布上的所有对象之后构建一个数组：

var objs = canvas.getObjects();

并在其中搜索任何带有测试名称的文件，然后将其分配给另一个变量。

var testOb = objs[1];

这是我能够直接修改没有问题（到目前为止）

testOb.left += 1;

我不确定这是否如何使用它，但到凌晨5点，我很高兴它的工作。

干杯， Marak

fabric.js将SVG加载为对象

1 个答案: