ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #11418 from MoonE/icon-color-default-to-composite-operation

Browse Source 
Icon color default to composite operation
This commit is contained in:
Andreas Hocevar
2020-08-11 20:57:40 +02:00
committed by GitHub
parent 678a61cba0 558b3a3ed2
commit f0170f378f
2 changed files with 22 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/icon-color.js
+1 -1
View File
@@ -41,7 +41,7 @@ rome.setStyle(
london.setStyle( london.setStyle(
new Style({ new Style({
image: new Icon({ image: new Icon({
color: '#4271AE', color: 'rgba(255, 0, 0, .5)',
crossOrigin: 'anonymous', crossOrigin: 'anonymous',
src: 'data/bigdot.png', src: 'data/bigdot.png',
scale: 0.2, scale: 0.2,
src/ol/style/IconImage.js
+21 -25
View File
@@ -5,6 +5,7 @@
import EventTarget from '../events/Target.js'; import EventTarget from '../events/Target.js';
import EventType from '../events/EventType.js'; import EventType from '../events/EventType.js';
import ImageState from '../ImageState.js'; import ImageState from '../ImageState.js';
import {asString} from '../color.js';
import {createCanvasContext2D} from '../dom.js'; import {createCanvasContext2D} from '../dom.js';
import {shared as iconImageCache} from './IconImageCache.js'; import {shared as iconImageCache} from './IconImageCache.js';
import {listenImage} from '../Image.js'; import {listenImage} from '../Image.js';
@@ -232,37 +233,32 @@ class IconImage extends EventTarget {
ctx.scale(pixelRatio, pixelRatio); ctx.scale(pixelRatio, pixelRatio);
ctx.drawImage(this.image_, 0, 0); ctx.drawImage(this.image_, 0, 0);
if (this.isTainted_()) { ctx.globalCompositeOperation = 'multiply';
// If reading from the canvas throws a SecurityError the same effect can be // Internet Explorer 11 does not support the multiply operation.
// achieved with globalCompositeOperation. // If the canvas is tainted in Internet Explorer this still produces
// This could be used as the default, but it is not fully supported by all // a solid color image with the shape of the icon.
// browsers. E. g. Internet Explorer 11 does not support the multiply if (ctx.globalCompositeOperation === 'multiply' || this.isTainted_()) {
// operation and the resulting image shape will be completelly filled with ctx.fillStyle = asString(this.color_);
// the provided color.
// So this is only used as a fallback. It is still better than having no icon
// at all.
const c = this.color_;
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-in'; ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(this.image_, 0, 0); ctx.drawImage(this.image_, 0, 0);
return; } else {
} const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data;
const r = this.color_[0] / 255.0;
const g = this.color_[1] / 255.0;
const b = this.color_[2] / 255.0;
const a = this.color_[3];
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (let i = 0, ii = data.length; i < ii; i += 4) {
const data = imgData.data; data[i] *= r;
const r = this.color_[0] / 255.0; data[i + 1] *= g;
const g = this.color_[1] / 255.0; data[i + 2] *= b;
const b = this.color_[2] / 255.0; data[i + 3] *= a;
}
for (let i = 0, ii = data.length; i < ii; i += 4) { ctx.putImageData(imgData, 0, 0);
data[i] *= r;
data[i + 1] *= g;
data[i + 2] *= b;
} }
ctx.putImageData(imgData, 0, 0);
} }
/** /**