Fabric.js-圆形的透明背景与中风/边框

Question

我在fabric.js版本1.6.0-rc.1：

中渲染了一个圆圈

var circlePatrol = new fabric.Circle({
  top: 300,
  left: 180,
  radius: 200,
  strokeDashArray: [10, 10],
  stroke: 'black',
  strokeWidth: 10,
  fill: 'white',
  opacity: 0.2
});

我想将背景设置为透明但保留围绕圆圈的笔划。这在fabric.js中是否可行？不透明度也应用于笔触/边框，我试图将其应用于圆的背景。

我也尝试过透明的背景，但仍然没有运气：

var circlePatrol = new fabric.Circle({
      top: 300,
      left: 180,
      radius: 200,
      strokeDashArray: [10, 10],
      stroke: 'black',
      strokeWidth: 10,
      backgroundColor: 'transparent',
    });

Answer 1

您可以设置fill: 'rgba(0,0,0,0)'。

var circlePatrol = new fabric.Circle({
  top: 0,
  left: 0,
  radius: 200,
  strokeDashArray: [10, 10],
  stroke: 'black',
  strokeWidth: 10,
  fill: 'rgba(0,0,0,0)'
});

JSFiddle

Answer 2

另一个选择是在填充中使用'transparent'值

const rect = new fabric.Rect({
  top: 10,
  left: 10,
  width: 50,
  height: 50,
  hasBorder: true,
  stroke: 'yellow',
  strokeWidth: 3,
  fill:'transparent'
});