Когда я добавляю в группу круг с непрозрачностью меньше 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.)

1
bladerunner 6 Окт 2013 в 15:42
На данный момент мой обходной путь - установить FILL = 'rgba(255, 255, 255, 0.65)' и вообще не использовать OPACITY. Таким образом, оба круга (то есть с группой и без нее) выглядят одинаково.
 – 
bladerunner
6 Окт 2013 в 20:19

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.

1
kangax 8 Окт 2013 в 14:54
Спасибо kangax за ваш отзыв. Зарегистрирована проблема.
 – 
bladerunner
14 Окт 2013 в 00:24