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

Support alpha channel for icon tinting

Browse Source
This commit is contained in:
Maximilian Krög
2020-03-28 16:39:50 +01:00
parent 38ecaa9814
commit 558b3a3ed2
2 changed files with 5 additions and 3 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
+4 -2
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';
@@ -237,8 +238,7 @@ class IconImage extends EventTarget {
// If the canvas is tainted in Internet Explorer this still produces // If the canvas is tainted in Internet Explorer this still produces
// a solid color image with the shape of the icon. // a solid color image with the shape of the icon.
if (ctx.globalCompositeOperation === 'multiply' || this.isTainted_()) { if (ctx.globalCompositeOperation === 'multiply' || this.isTainted_()) {
const c = this.color_; ctx.fillStyle = asString(this.color_);
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';
@@ -249,11 +249,13 @@ class IconImage extends EventTarget {
const r = this.color_[0] / 255.0; const r = this.color_[0] / 255.0;
const g = this.color_[1] / 255.0; const g = this.color_[1] / 255.0;
const b = this.color_[2] / 255.0; const b = this.color_[2] / 255.0;
const a = this.color_[3];
for (let i = 0, ii = data.length; i < ii; i += 4) { for (let i = 0, ii = data.length; i < ii; i += 4) {
data[i] *= r; data[i] *= r;
data[i + 1] *= g; data[i + 1] *= g;
data[i + 2] *= b; data[i + 2] *= b;
data[i + 3] *= a;
} }
ctx.putImageData(imgData, 0, 0); ctx.putImageData(imgData, 0, 0);
} }