Question

我正在尝试将svg添加到画布并进行缩放。最后，我需要获得单个对象。所以我使用这个可怕的方法来克服解组问题。但在这个位置上是不正确的。任何人都可以告诉我获得路径的绝对位置（左侧和顶部）。

var canvas = new fabric.Canvas('c');
var str = '<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"><g><ellipse ry="63" rx="63" id="svg_1" cy="225" cx="181" stroke-width="0" fill="#FF0000"/><rect id="svg_2" height="113.99999" width="212.99999" y="169" x="299.00001" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#FF0000"/></g></svg>';
var svg;
fabric.loadSVGFromString(str, function(objects, options) {
  svg = fabric.util.groupSVGElements(objects,options);
  svg.scaleToHeight(canvas.height);
  canvas.add(svg);
  svg.center();
  canvas.renderAll();
  svg.setCoords();
  var bounds = svg.getObjects();
  console.log(bounds[1]);
  bounds[1].group.setFill('#00000');
  console.log((bounds[1].getLeft() + bounds[1].group.getLeft()));
  console.log(bounds[1].getTop() + bounds[1].group.getTop());
 	var items;
  
  fabric.loadSVGFromString(str, function(objects, options) {		
    var group = new fabric.Group(objects,options);
    canvas.add(group);
    group.scaleToHeight(canvas.getHeight());
    group.center();
    canvas.renderAll();
    items = group._objects;
    group._restoreObjectsState();
    canvas.remove(group);    
    canvas.renderAll();
    for(var i = 0; i < items.length; i++) {	
    	items[i].set({
      	left:bounds[i].getLeft() + bounds[i].group.getLeft(),
        top:bounds[i].getTop() + bounds[i].group.getTop(),
      });
      canvas.add(items[i]);
      canvas.renderAll();
    }    
    console.log(bounds[1].getBoundingRect());
    console.log(items[1].getBoundingRect());
	}); 
  
});

<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.js"></script>
<canvas id="c" width="500" height="300"></canvas>

Answer 1

我回答了我的问题，因为有人可能觉得它很有用。这就是我做到的。

1.使用fabric.util.groupSVGElements加载svg和group，因为它提供了最正确的位置

2.添加svg对象以分离组，以便我可以再次取消组合对象

3.最终未分组的对象位置设置为等于svg路径对象位置（我知道它很傻。但没有其他解决方案）

＆＃13;

<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.js"></script>
<canvas id="c" width="500" height="300"></canvas>

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1" />

＆＃13;

Answer 2

尝试模拟对象运动，而不要设置另一个顶部和左侧的值，这样对我有用

Answer 3

您需要调用loadSVGFromURL，但不必两次执行其他操作。正确的代码（打字稿）应该是：

#rightScore[i] will store the index of image on right side of the image at index 'i'.
#right[i] will store the pixels of right side of image at index 'i'.
#similarly for other sides.


    rightScore = np.zeros((36,))
    topScore = np.zeros((36,))
    bottomScore = np.zeros((36,))
    leftScore = np.zeros((36,))

    for i in range(36):
        score = np.inf
        for j in range(36): 
            if i==j: 
                continue

            temp = np.sum(np.abs(np.ravel(right[i] - left[j])))
            if score > temp: 
                rightScore[i] = j
                score = temp

从SVG加载的Fabric JS形状位置不正确

3 个答案: