Fabric.js - 带有描边/边框的圆形透明背景答案

【问题标题】：Fabric.js - Transparent background on circle shape with stroke/borderFabric.js - 带有描边/边框的圆形透明背景
【发布时间】：2016-02-20 12:48:48
【问题描述】：

我在 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',
    });

【问题讨论】：

标签： javascript fabricjs

【解决方案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

【讨论】：

我试过这样做，再次将其应用于中风。
抱歉，我脑子里一直在忙。刚刚在文档中复习并调整了我的答案
它也适用于其他对象，例如路径path.setStroke('rgba(0,0,0,0)')

【解决方案2】：

另一种选择是在填充中使用“透明”值

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

【讨论】：