web-dev-qa-db-ja.com

Fabric.js-ストローク/境界線のある円の形の透明な背景

私は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',
    });
javascriptfabricjs
9
Simon

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

14
Guy

別のオプションは、塗りつぶしに「透明な」値を使用することです

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