fabric.js 中路径错误的边界框答案

【问题标题】：Wrong boundingbox with path in fabric.jsfabric.js 中路径错误的边界框
【发布时间】：2013-07-22 15:41:29
【问题描述】：

我有一颗心的路径（下图），但是当我用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/

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

谢谢！

【问题讨论】：

标签： javascript html5-canvas fabricjs

【解决方案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();

因此，如果我们将另一个path 用作心脏（从维基百科复制而来），它就可以工作。

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();

【讨论】：