畫布Fabric.js座標已抵消了

我剛開始fabric.js和我有一個（可能是初學者）錯誤：畫布Fabric.js座標已抵消了

我使用的面料與jQuery用下面的代碼：

$(document).ready(function() { 

canvas = new fabric.StaticCanvas('scroller'); 

canvas.add(
    new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' }) 
); 

});

這段代碼應該在畫布上繪製一個140x100的矩形。不幸的是，只有四分之一的矩形出現。如果我將頂部和左側的值更改爲更高的數字，則更多的矩形出現在畫布上。

所以看來，畫布的起源不是在0/0，而是在某處。更高。

有人知道如何解決這個問題或我做錯了什麼？

由於提前，麥克法蘭

來源

2012-01-10 McFarlane

嗨McFarlane =）歡迎來到SO。無論何時發佈代碼，如果您在jsfiddle.net上發佈完整（或最少的代碼示例）代碼，只要去那裏，粘貼代碼並保存，並將鏈接粘貼回來即可= = – puk 2012-01-10 23:45:24

什麼尺寸是你的畫布？也許它比'140x100'小。嘗試繪製其他類似圓圈或圖片的圖畫，以便更好地瞭解哪個象限被剪切 – puk 2012-01-10 23:47:16

下面是一些例子中的jsfiddle鏈接http://jsfiddle.net/pukster/sdQ7U/2/

我的猜測是，fabric.js從原點（中點）計算的一切，因爲它準確地畫四分之一即使畫布是矩形大小的10倍也是如此。我的猜測是，top和left實際上是指原點而不是虛擬邊界框的頂部和左側。麻煩的是fabricjs上很少有文檔。是否有任何理由你使用fabricjs而不是easeljs

編輯這是同樣的小提琴，但與廣場，而不是矩形（更清晰）http://jsfiddle.net/pukster/sdQ7U/3/

編輯 OK，我現在幾乎完全肯定fabric.js使用中心作爲top/left。我撕開了它們的example off of their site，並用透明的couterpart覆蓋它們，以將它們編碼在純帆布http://jsfiddle.net/pukster/uathZ/2/（藍色邊框是畫布元素的極限）中。

Overlayed Pure Canvas images

你看到的是，這些箱子是了一半，但圓（我只畫了一個半圓，否則不會有可辨別的）是完全重疊正好偏移。這是HTML Canvas中的b/c，圓形座標(x,y)指的是原點而不是左上角。我沒有爲三角形b/c打擾，我的三角形有點生鏽。我個人認爲使用條款top和left會導致誤導，因爲x和y會更具代表性和更短。

來源

2012-01-11 00:05:13 puk

感謝您的詳細解答。你是對的，fabricJS Object Origins位於對象中間。我目前使用的是fabricJS，因爲它是一個功能齊全的框架，具有許多強大的功能（例如SVG支持，我將在稍後使用）。也許我會切換到processingjs。我會盡量在後面比較兩者。 – McFarlane 2012-01-11 08:17:34

@MFFarlane：你是否繼續這樣做，結果如何？我會對後續行動感興趣，包括你提到的比較。 – 2013-03-11 20:21:33

FWIW，我們計劃在即將到來的1.4版本中默認切換到originX/originY被左/頂部默認。大多數用戶覺得這更直觀。 – kangax 2013-10-24 14:17:34

是的，這是非常意想不到的，甚至更多的無證。

解決方法：

集

originX: "left" 
originY: "top"

每個創建的對象。

編輯：或在下面的評論中使用kangax更簡單的解決方案。

來源

2013-03-19 11:20:21 citykid

您不必爲每個對象設置它。織物需要很大的繼承優勢，所以你可以做'fabric.Object.prototype.originX = true; fabric.Object.prototype.originY = true;' – kangax 2013-10-24 14:18:26

我討厭挑選一位關於他自己的評論的圖書作者，但不應該是'fabric.Object.prototype.originX =「left」; fabric.Object.prototype.originY =「top」;'？ – markerikson 2013-11-19 22:52:36

kangax，尊重項目和提示。讓我再提出一個建設性的咆哮：像繪圖對象這樣的輕量級對象應該是最後一個因性能原因而使用繼承的對象。 – citykid 2013-11-20 21:51:00

我想評論，但缺乏這樣做的聲譽。所以無論如何，這裏是當我做下面會發生什麼：

fabric.Object.prototype.originX = "left"; 
fabric.Object.prototype.originY = "top";

形狀獲取呈現罰款，但是當我選擇它的調整，或移動，它就會偏移到不同的位置。最好的方法似乎是使用set（）方法分別設置每個對象的座標。

來源

2014-01-17 20:47:12

畫布Fabric.js座標已抵消了

回答

相關問題