3

我有一颗心的路径（下图），但是当我用 将它绘制在画布上时fabric.js，边界框无法正确显示。即使我使用setCoords(). 此外，当我将对象导出到 svg 时，心脏的位置在边界框的顶部，而不是它在画布上显示的位置。

var path = new fabric.Path("M248.078,5.883c-36.691-14.739-77.771-0.839-98.517,31.125C128.817,5.044,87.735-8.856,51.043,5.883 C9.354,22.632-10.863,70.009,5.887,111.696c16.06,39.98,143.314,139.607,143.314,139.607l0.359,0.28l0.36-0.28 c0,0,127.251-99.627,143.314-139.607C309.986,70.009,289.768,22.632,248.078,5.883z");

jsfiddle，http://jsfiddle.net/mPhL2/

有谁知道如何解决这个问题，这是一个错误吗？

谢谢！

4

1 回答 1

1

它与路径的坐标有关。让我们做一个简单的例子。

蓝色三角形是用绝对坐标定义的，如果没问题，则选择

蓝色三角形

它是用

canvas = new fabric.Canvas('myCanvas', { selection: false });
var path = new fabric.Path('M 0 0  L 0 100 L 100  100 Z');
path.set({ left: 20, top: 0, fill: 'blue', });
canvas.add(path);
canvas.renderAll();

如果我们像绿色三角形那样采用相对坐标，则选择不再正确地围绕对象。

绿色三角形

canvas = new fabric.Canvas('myCanvas', { selection: false });
var path = new fabric.Path('M 20 20  l 0 100 l 100 0 Z');
path.set({ left: 20, top: 0, fill: 'green', });
canvas.add(path);
canvas.renderAll();

因此，如果我们为心脏采取另一条路径 （从维基百科复制而来）它会起作用。

不同路径的心 

canvas = new fabric.Canvas('myCanvas', { selection: false });
var path = new fabric.Path('M 272.70141,238.71731 \
    C 206.46141,238.71731 152.70146,292.4773 152.70146,358.71731  \
    C 152.70146,493.47282 288.63461,528.80461 381.26391,662.02535 \
    C 468.83815,529.62199 609.82641,489.17075 609.82641,358.71731 \
    C 609.82641,292.47731 556.06651,238.7173 489.82641,238.71731  \
    C 441.77851,238.71731 400.42481,267.08774 381.26391,307.90481 \
    C 362.10311,267.08773 320.74941,238.7173 272.70141,238.71731  \
    z ');    
var scale = 100 / path.width;
path.set({ left: 20, top: 0, scaleX: scale, scaleY: scale,  fill: 'red', });
canvas.add(path);
canvas.renderAll();
于 2014-05-03T15:36:30.603 回答