我正在开发一个基于Openlayers的应用程序。它基本上渲染一个图像,用户可以通过鼠标单击操作在图像上绘制几何特征,如线,多边形等。
我必须实现一个功能,其中用户可以通过移动滑块改变图像的亮度。
我关注了this链接,我已经将我的像素操作代码放在了一个名为“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 issue
发布于 2018-08-27 07:42:38
我怀疑你实际上想要的是淡入淡出或加强图像,保持颜色之间的比例。这可以在没有单独的像素操作的情况下完成。
如果你从来不想让图层比它的自然状态更亮,你可以简单地使用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';
});
屏幕截图显示background=192 (正常的一半)顶部和background=0 (黑色背景混合提供最大增强强度)底部
也可以组合使用从background=0到128 (法线)的强光混合,然后使用从1(法线)到0(透明)的不透明度设置。
下面是一个简单的工作演示http://mikenunn.16mb.com/demo/hardlight.htm
https://stackoverflow.com/questions/52023146
复制相似问题