我正在尝试允许用户创建“用户库”。基本上在主画布上,它们能够添加形状(形状从svg字符串加载),然后选择多个形状并将它们拖动到一个单独的画布上,该画布基本上会获取形状并从中创建一个新的svg。无论原始对象组的大小如何,新的形状/组都必须适合48 x 48的缩略图/拖动框。
我让它能够将形状从一个画布拖动到另一个画布,但无论出于什么原因,当我尝试输出到新的svg时,对象的位置与它们所在的位置相差甚远当他们被拖到新画布上时的小组。
这是我现在获取svg字符串的代码:
var group = [];
var shape = new fabric.Group(group);
$.each(activeGroup._objects, function (index, item) {
group.push(item);
});
svgString = shape.toSVG();
这就是我要加载它的原因:
fabric.loadSVGFromString(svg, function (objects, options) {
var loadedObjects = new fabric.Group(group);
loadedObjects.set({
left: left, top: top, hasControls: false, selectable: true, originX: 'left', originY: 'top', height: 50, width: 50
});
canvas.add(loadedObjects);
}, function (item, object) {
object.set('id', item.getAttribute('id'));
group.push(object);
});
以下是一个例子:
之前 - 之后 -
有时形状会保持原样,但如果按比例放大(如下面的圆圈那样),它就会被放错位置。
很抱歉这篇长篇文章,但这里是我的问题摘要: 1)将组缩放到48x48,目前他们只是保持相同的大小。我已经尝试过scaleToHeight和scaleToWidth以及其他宽度设置,但没有任何变化。 2)将对象放置在他们之前所处的位置上.SVG()。