fabric.js：爲什麼邊界半徑爲1px當stroke：true，fill：false

Question

我正在研究一個更大的Web應用程序，它使用畫布來渲染形狀。現在我遇到了渲染未填充矩形的問題（stroke: '#fff', fill: false）：它們始終具有1px的邊框半徑。我能夠用一個小例子重現它;當我設置rx: -1, ry: -1圓角半徑走了，但也有明顯的點（因爲像素被塗兩次）：

http://jsfiddle.net/NmWvY/1/

黑色矩形是與rx: 0, ry: 0，紅色是rx: -1, ry: -1。

我該如何解決這個問題？

問候，
CK

Answer 1

通過FabricJS源尋找，這是fabric.Rect對象是如何得出：

... 
ctx.moveTo(x+rx, y); 
ctx.lineTo(x+w-rx, y); 
ctx.quadraticCurveTo(x+w, y, x+w, y+ry, x+w, y+ry); 
ctx.lineTo(x+w, y+h-ry); 
ctx.quadraticCurveTo(x+w,y+h,x+w-rx,y+h,x+w-rx,y+h); 
ctx.lineTo(x+rx,y+h); 
ctx.quadraticCurveTo(x,y+h,x,y+h-ry,x,y+h-ry); 
ctx.lineTo(x,y+ry); 
ctx.quadraticCurveTo(x,y,x+rx,y,x+rx,y); 
ctx.closePath(); 
... 
this._renderStroke(ctx); 

即，rx和ry不存在或存在不阻止的路徑從被製造出來，因此被撫摸。即使rx和ry爲空，它們的默認值爲0。

的strokeWidth屬性設置與其中當stroke不是false或null路徑被撫摸lineWidth。

您可以try changing strokeWidth更改斯托克的寬度。目前還不十分清楚，始終有寬度爲1px的筆畫究竟出現了什麼問題，但這應該有所幫助。