使用Fabric.js创建空心圆

Question

如何使用Fabric.js实现类似http://jsfiddle.net/Hnw6a/1137/的效果？

我尝试了clipTo，但没有运气。

我想更新此脚本http://jsfiddle.net/kxjV5/以接受'空心'圈

Answer 1

使用：

{
  fill: "none",
  stroke: "red",
  strokeWidth: 5
}

http://jsfiddle.net/eguneys/kxjV5/

Answer 2

嗯，这个肯定不适用于Chrome。

{
  fill: "none",//should be fill:undefined
  stroke: "red",
  strokeWidth: 5
}

填充应设置为undefined，而不是none。

Answer 3

如果fill: "none"不起作用，请尝试以下操作：

{
 fill: "rgba(0,0,0,0.0)", //setting alpha channel to 0.0 will make fill transparent
 stroke: "red", 
 strokeWidth: 5
}

Answer 4

我发现的实际可行的解决方案

{
 fill: 'transparent',
 // or: fill: undefined,
 // or: fill: "rgba(0,0,0,0.0)", //setting alpha channel to 0.0 will make fill transparent

 stroke: "red", 
 strokeWidth: 5
}

示例：Formatting chart data labels in openpyxl