Openlayers的问题?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (145)

我正在开发基于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;
}

因此,现在从2个场景调用此方法:一,当用户对滑块执行操作(ctx参数未定义)时,第二,当用户对图像执行某些操作时,如鼠标单击图像(定义了ctx参数)。

'if'在方法开始时需要阻止来解决如果单击图像(即使用有效的ctx)原始亮度恢复的问题。因此,我跟踪更改像素数据(currentImageData),如果使用有效的ctx进行调用,我只需将当前像素数据(currentImageData)放入ctx并渲染地图并返回。

注意:这给我的印象是,来自'postcompose'上下文的调用尝试恢复原始像素数据。但我不确定。

现在我遇到这个代码的问题:如果用户点击图像,图像上的几何特征有点复制。现在,每个功能都由另一个类似功能覆盖。如果图像被平移,则可以看到重复的特征(图像附加)。

提问于
用户回答回答于

如果你从未希望这个图层比它的自然状态更亮,你可以简单地淡化它的使用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(黑色背景混合提供最大增加的强度)底部

你还可以使用背景= 0到128(正常)的强光混合,然后是从1(正常)到0(透明)的不透明度设置。

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问8 回答
  • 人生的旅途

    10 粉丝484 提问7 回答
  • uncle_light

    5 粉丝518 提问7 回答
  • 无聊至极

    4 粉丝504 提问6 回答

扫码关注云+社区

领取腾讯云代金券