javascript - fabric.js：为什么描边时边框半径为1px：true，填充：false

Question

我正在开发一个更大的 Web 应用程序，它使用画布来渲染形状。现在我在渲染未填充的矩形（stroke: '#fff', fill: false）时遇到了问题：它们的边框半径总是 1px。我能够用一个小例子重现它；当我设置rx: -1, ry: -1边框半径时消失了，但是有可见的点（因为像素被绘制了两次）：

http://jsfiddle.net/NMWvY/1/

黑色矩形是 with rx: 0, ry: 0，红色是 with 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属性设置lineWidth当strokeis notfalse或时路径被描边的null。

您可以尝试更改strokeWidth以更改行程的宽度。目前还不太清楚笔画的宽度始终为 的到底是什么问题1px，但这应该会有所帮助。