캔버스 위의 SVG 경로 위치

Question

나는 단순한 경로를 가지고 있습니다. 내가 알기로는 캔버스의 왼쪽 상단에 붙어 있어야합니다. 하지만 중간에 어딘가에 그려 놓았습니다. 결과적으로 내가 렌더링하고있는 모든 경로가 원래 위치에서 벗어난 것처럼 보입니다. 나는 아주 명백한 것을 놓치고 있습니까? 모든 캔버스 조작에 fabric.js를 사용하고 있습니다. 모든 단서는 매우 감사하겠습니다.

path1 = new fabric.Path('M 0 0 L 300 100 L 200 300 z');

Answer 1

Fabric gotchas 비록 상태 : (그룹 포함) 모든 객체의

왼쪽/최고 값은 객체의 중심에 해당하고, 캔버스의/왼쪽 모서리 상단을 기준으로합니다. 중심 기반 원점은 기본값이지만 객체의 originX/originY 속성을 통해 변경할 수 있습니다.

이는 문제가되지 않습니다. 경로가 항상 올바르게 가운데에 배치되지는 않기 때문입니다.

문제는 path : bug #1363의 위치 지정에 버그입니다.

버그 수정이 완료되었지만 불행히도 최신 릴리스 (1.4.11)의 일부가 아닙니다. 2 가지 옵션이 있다고 생각합니다.

1. latest in their master branch으로 패브릭 버전을 업그레이드하십시오. (즉, 코드가 공개되지 않음 : 아마도 불안정합니다)
2. 해결 방법이 있습니다. 그리고

는, 당신은 제로 중 하나 left 및 top 또는 originX 및 originY로 설정할 수 있습니다 해결합니다.

var path1 = new fabric.Path('M -100 0 L 50 0 L 100 100 z'); 
path1.set({ left: 0, top: 0 }); 

또는 :와 예를 들어

당신은 여기에 해당 코드를 테스트 할 수 있습니다

var path1 = new fabric.Path('M -100 0 L 50 0 L 100 100 z', {originX: 0, originY: 0}); 

: http://jsfiddle.net/protron/6qc5vsbj/3/