Question

我正在开发一个更大的Web应用程序，它使用画布来渲染形状。现在我遇到了渲染未填充的rects（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不是lineWidth或stroke时，false属性会设置用于描述路径的null。

您可以try changing strokeWidth更改行程的宽度。对于总是具有1px宽度的笔画，问题究竟是什么并不是很清楚，但这应该会有所帮助。

fabric.js：为什么行程的边界半径为1px：true，fill：false

1 个答案: