Проблема с Openlayers

Question

Я работаю над приложением на основе Openlayers.Он в основном отображает изображение, и пользователь может рисовать на изображении геометрические объекты, такие как линии, многоугольники и т. Д., Щелкая мышью.

Мне нужно реализовать функцию, при которой пользователь может изменять яркость изображения, перемещая ползунок.

Я следую по этой ссылке. Я поместил свой код манипуляции пикселями в метод 'updateBrightness', как показано в ссылке.

imageLayer.on('postcompose', (event) => {
      this.updateBrightness(this.currentBrightness, event.context);
  });

updateBrightness(val, ctx) {

    if(ctx && this.currentImageData){
        ctx.putImageData(this.currentImageData, 0, 0);
        this.map.render;
        return;
    }
    var brightnessVar = val - this.currentBrightness;
    this.currentBrightness = val;
    var canvas = this.map.renderer_.canvas_;
    var ctx = canvas.getContext('2d');
    var imgData = ctx.getImageData(0,0,canvas.width,canvas.height).data;
    var output = ctx.createImageData(canvas.width, canvas.height);
    var outputData = output.data;

    console.log('Input length:' + imgData.length)
    for (var i = 0; i < imgData.length; i += 4) {
        outputData[i] = imgData[i] + brightnessVar;
        if(outputData[i] > 255) {
            outputData[i] = 255;
        }
        outputData[i + 1] = imgData[i + 1] + brightnessVar;
        if(outputData[i + 1] > 255) {
            outputData[i + 1] = 255;
        }
        outputData[i + 2] = imgData[i + 2] + brightnessVar;
        if(outputData[i + 2] > 255) {
            outputData[i + 2] = 255;
        }
        outputData[i + 3] = imgData[i + 3];
    }
    console.log('Output length:' + output.data.length)

    ctx.putImageData(output, 0, 0);
    this.map.render;
    this.currentImageData = output;
}

Так что этот метод теперь называетсяиз двух сценариев: один, когда пользователь действует на ползунок (аргумент ctx не определен), и второй, когда пользователь выполняет какое-либо действие с изображением, например щелчок мышью по изображению (определен аргумент ctx).

блок ifПраво на начало метода необходимо решить, что при нажатии на изображение (т. е. с действительным CTX) первоначальная яркость восстанавливается.Поэтому я отслеживаю изменение данных пикселей (currentImageData), и если вызов выполняется с действительным ctx, я просто помещаю текущие данные пикселей (currentImageData) в ctx, отрисовываю карту и возвращаю.

ПРИМЕЧАНИЕ. Создается впечатление, что вызов из контекста postcompose пытается восстановить исходные данные пикселей.Но я не уверен.

Теперь перейдем к вопросу, с которым я сталкиваюсь в следующем коде: если пользователь нажимает на изображение, геометрические объекты на изображении дублируются.Каждая функция теперь покрыта другой аналогичной функцией.И если изображение панорамируется, можно увидеть дублированные элементы (изображение прилагается).

Дублированные элементы

В чем здесь ошибка?

РЕДАКТИРОВАТЬ: поднял проблему GitHub тоже: GITHUB проблема

Answer 1

Я подозреваю, что вы действительно хотите, чтобы изображение было блеклым или интенсивным, сохраняя соотношение цветов.Это может быть сделано без манипуляций с отдельными пикселями.

Если вы никогда не хотели, чтобы слой был ярче, чем его естественное состояние, вы можете просто потушить его, используя imageLayer.setOpacity().

Если вы хотите, чтобы он был более интенсивным, кака также затемнение, которое можно сделать, используя смесь яркого света с серым оттенком.

var background = 192;

imageLayer.on('precompose', function (evt) {
    evt.context.globalCompositeOperation = 'hard-light';
    evt.context.fillStyle = 'rgb(' + [background, background, background].toString() + ')';
    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
});
imageLayer.on('postcompose', function (evt) {
    evt.context.globalCompositeOperation = 'source-over';
});

На снимках экрана показаны фон = 192 (половина от нормы), верх и фон = 0 (смесь черного фона дает максимумувеличенная интенсивность) bottom

Вы также можете использовать комбинацию сочетания жестких цветов от фона = 0 до 128 (нормальный) с последующей настройкой непрозрачности от 1 (нормальный) до 0 (прозрачный).

Вот простая рабочая демонстрация http://mikenunn.16mb.com/demo/hardlight.htm