fabric.js에 패스가있는 잘못된 boundingbox

Question

나는 (아래) 하트 경로가 있지만, 캔버스에 fabric.js으로 그릴 때 boundingbox가 올바르게 표시되지 않습니다. 이 경우에도 setCoords()을 사용해도 이런 일이 발생합니다. 또한 객체를 svg로 내보낼 때 하트의 위치는 캔바스에 표시되는 위치 대신 boundingbox의 맨 위에 있습니다.

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/

사람이,이 버그가이 문제를 해결하는 방법을 알고 있나요?

감사합니다.

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

로 생성 된 선택 미세

경우되고 선택이 객체를 더 이상 적절하게 둘러싸지 않습니다. 우리는 (위키 백과에서 밖으로 복사) 심장에 대한 다른 path을 경우

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