HTML

Question

当我向组中添加不透明度小于1的圆时，其不透明度实际上低于指定值。如果我没有指定不透明度（即，不透明度= 1），则不会发生这种情况。矩形也不会发生这种情况。

以下是重现此问题的代码：

HTML

<canvas id="stage" width="400" height="300">

的JavaScript

var OPACITY = 0.65;
var FILL = '#fff';

var canvas = new fabric.Canvas('stage', {
    backgroundColor: '#222'
});

/**
 * Rectangles
 * both appear to have the same color
 */
var rect1 = new fabric.Rect({
    width: 40,
    height: 40,
    fill: FILL,
    opacity: OPACITY,
    left: 60,
    top: 60
});
canvas.add(rect1);

var rect2 = new fabric.Rect({
    width: 40,
    height: 40,
    fill: FILL
    opacity: OPACITY,
});
var rect2Group = new fabric.Group([rect2], {
    left: 120,
    top: 60
});
canvas.add(rect2Group);

/**
 * Circles
 * the second circle is darker
 */
var circle1 = new fabric.Circle({
    radius: 20,
    fill: FILL,
    opacity: OPACITY,
    left: 60,
    top: 120
});
canvas.add(circle1);

var circle2 = new fabric.Circle({
    radius: 20,
    fill: FILL,
    opacity: OPACITY,
});
var circle2Group = new fabric.Group([circle2], {
    left: 120,
    top: 120
});
canvas.add(circle2Group);

这是JSFiddle。

如果你运行它，你可以看到第二个圆圈比第一个圆圈更暗，这意味着它的不透明度更低。

我做错了什么，或者这是一个错误？（可以在1.2.0和1.3.0中复制。）

Answer 1

这很可能是因为fabric.Circle中的this line：

// multiply by currently set alpha
// (the one that was set by path group where this object is contained, for example)
ctx.globalAlpha = this.group ? (ctx.globalAlpha * this.opacity) : this.opacity;

这与圈子是SVG组IIRC的一部分有关。

无论如何，它绝对是一个错误 - 在你的情况下，不透明度不应该成倍增加。我们需要更好的检查。

请在github上提交问题。

FabricJS：组中圈子的不透明度的错误？

HTML

的JavaScript

1 个答案: