畫布上的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 s：bug #1363中的一個錯誤。

該錯誤修復已完成，但不幸的是，這並不是他們最新版本（1.4.11）的一部分。所以我認爲你有兩種選擇：

1. 將Fabric的版本升級到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/