Javascript fabric.js:为什么当笔划为true,填充为false时边界半径为1px

Javascript fabric.js:为什么当笔划为true,填充为false时边界半径为1px,javascript,canvas,fabricjs,Javascript,Canvas,Fabricjs,我正在开发一个更大的web应用程序,它使用画布渲染形状。现在我在渲染未填充的矩形时遇到了一个问题(stroke:'#fff',fill:false):它们的边界半径始终为1px。我能够用一个小例子来重现它;当我设置rx:-1,ry:-1时,边界半径消失了,但有可见的点(因为像素被绘制了两次): 黑色矩形带rx:0,ry:0,红色带rx:-1,ry:-1 我怎样才能解决这个问题 您好, CK查看FabricJS源代码,以下是绘制fabric.Rect对象的方式: ... ctx.moveTo(x

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

黑色矩形带
rx:0,ry:0
,红色带
rx:-1,ry:-1

我怎样才能解决这个问题

您好,

CK

查看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


你可以改变斯托克的宽度。对于宽度始终为1px的笔划,问题究竟是什么还不是很清楚,但这应该会有所帮助。

这确实解决了问题;fabric.js中似乎存在一个逐个错误。我想我会调试的。谢谢。我怀疑这是因为
正交曲线和亚像素渲染。一旦你缩放了一点形状,这似乎就不会发生了。我更新了fiddle,使black rect 2倍缩放(并在运行时将结构从0.9更新为1.1.16)-我们可能可以通过避免rx/ry为
0
时的
quadraticCurveTo
来解决此问题。请在github上提交一个问题,我会在有机会时着手解决。@kangax这正是我在补丁fabric.js版本中解决问题的方法。我