1

当我将不透明度低于 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 中复制。）

4

1 回答 1

1

这很可能是因为以下行fabric.Circle：

// 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 上提出问题。

于 2013-10-08T10:54:31.517 回答