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

Remove blend-modes example

Browse Source 
As we are not doing canvas composition anymore
This commit is contained in:
Florent gravin
2018-11-16 10:49:34 +01:00
committed by Tim Schaub
parent 7831a591f7
commit 90d46cb539
3 changed files with 0 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/blend-modes.css
View File

@@ -1,4 +0,0 @@
.map{
background-repeat: repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAApSURBVBiVY7x///5/BjSgqKjIiC7GhC6ACwygQgxHMzAwMGDz4FDwDAD5/wevjSk4mwAAAABJRU5ErkJggg==);
}

68
examples/blend-modes.html
View File

@@ -1,68 +0,0 @@
---
layout: example.html
title: Blend Modes
shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
docs: >
<p>This example shows how to change the canvas compositing / blending mode in
post- and precompose event handlers. The Canvas 2D API provides the property
<code>globalCompositeOperation</code> with which one can influence which
composition operation will be used when drawing on the canvas. The various
options are well described on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">MDN
documentation page</a>.</p>
<p>In this example three circles on the corners of an equilateral triangle are
drawn with red, green or blue styles respectively. By setting the
<code>globalCompositeOperation</code> you can change how these colors turn out
when they are combined on the map.</p>
<p>You can select an operation in the select-field and you can also control
which layers will be affected by the chosen operation through the layer
checkboxes.</p>
tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
---
<div id="map" class="map"></div>
<form class="form-horizontal">
<label>
<select id="blend-mode" class="form-control">
<option value="source-over">source-over (default)</option>
<option>source-in</option>
<option>source-out</option>
<option>source-atop</option>
<option>destination-over</option>
<option>destination-in</option>
<option>destination-out</option>
<option>destination-atop</option>
<option>lighter</option>
<option>copy</option>
<option>xor</option>
<option>multiply</option>
<option>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option selected>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
Canvas compositing / blending mode
</label>
<label>
<input type="checkbox" id="affect-red" checked>
Red circle affected
</label>
<label>
<input type="checkbox" id="affect-green" checked>
Green circle affected
</label>
<label>
<input type="checkbox" id="affect-blue" checked>
Blue circle affected
</label>
</form>

173
examples/blend-modes.js
View File

@@ -1,173 +0,0 @@
import Feature from '../src/ol/Feature.js';
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import Point from '../src/ol/geom/Point.js';
import VectorLayer from '../src/ol/layer/Vector.js';
import VectorSource from '../src/ol/source/Vector.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
// Create separate layers for red, green an blue circles.
//
// Every layer has one feature that is styled with a circle, together the
// features form the corners of an equilateral triangle and their styles overlap
const redLayer = new VectorLayer({
source: new VectorSource({
features: [new Feature(new Point([0, 0]))]
}),
style: new Style({
image: new CircleStyle({
fill: new Fill({
color: 'rgba(255,0,0,0.8)'
}),
stroke: new Stroke({
color: 'rgb(255,0,0)',
width: 15
}),
radius: 120
})
})
});
const greenLayer = new VectorLayer({
source: new VectorSource({
// 433.013 is roughly 250 * Math.sqrt(3)
features: [new Feature(new Point([250, 433.013]))]
}),
style: new Style({
image: new CircleStyle({
fill: new Fill({
color: 'rgba(0,255,0,0.8)'
}),
stroke: new Stroke({
color: 'rgb(0,255,0)',
width: 15
}),
radius: 120
})
})
});
const blueLayer = new VectorLayer({
source: new VectorSource({
features: [new Feature(new Point([500, 0]))]
}),
style: new Style({
image: new CircleStyle({
fill: new Fill({
color: 'rgba(0,0,255,0.8)'
}),
stroke: new Stroke({
color: 'rgb(0,0,255)',
width: 15
}),
radius: 120
})
})
});
// Create the map, the view is centered on the triangle. Zooming and panning is
// restricted to a sane area
const map = new Map({
layers: [
redLayer,
greenLayer,
blueLayer
],
target: 'map',
view: new View({
center: [250, 220],
extent: [0, 0, 500, 500],
resolution: 4,
minResolution: 2,
maxResolution: 32
})
});
// Get the form elements and bind the listeners
const select = document.getElementById('blend-mode');
const affectRed = document.getElementById('affect-red');
const affectGreen = document.getElementById('affect-green');
const affectBlue = document.getElementById('affect-blue');
/**
* This method sets the globalCompositeOperation to the value of the select
* field and it is bound to the precompose event of the layers.
*
* @param {module:ol/render/Event~RenderEvent} evt The render event.
*/
const setBlendModeFromSelect = function(evt) {
evt.context.globalCompositeOperation = select.value;
};
/**
* This method resets the globalCompositeOperation to the default value of
* 'source-over' and it is bound to the postcompose event of the layers.
*
* @param {module:ol/render/Event~RenderEvent} evt The render event.
*/
const resetBlendModeFromSelect = function(evt) {
evt.context.globalCompositeOperation = 'source-over';
};
/**
* Bind the pre- and postcompose handlers to the passed layer.
*
* @param {module:ol/layer/Vector} layer The layer to bind the handlers to.
*/
const bindLayerListeners = function(layer) {
layer.on('precompose', setBlendModeFromSelect);
layer.on('postcompose', resetBlendModeFromSelect);
};
/**
* Unind the pre- and postcompose handlers to the passed layers.
*
* @param {module:ol/layer/Vector} layer The layer to unbind the handlers from.
*/
const unbindLayerListeners = function(layer) {
layer.un('precompose', setBlendModeFromSelect);
layer.un('postcompose', resetBlendModeFromSelect);
};
/**
* Handler for the click event of the 'affect-XXX' checkboxes.
*
* @this {HTMLInputElement}
*/
const affectLayerClicked = function() {
let layer;
if (this.id == 'affect-red') {
layer = redLayer;
} else if (this.id == 'affect-green') {
layer = greenLayer;
} else {
layer = blueLayer;
}
if (this.checked) {
bindLayerListeners(layer);
} else {
unbindLayerListeners(layer);
}
map.render();
};
// Rerender map when blend mode changes
select.addEventListener('change', function() {
map.render();
});
// Unbind / bind listeners depending on the checked state when the checkboxes
// are clicked
affectRed.addEventListener('click', affectLayerClicked);
affectGreen.addEventListener('click', affectLayerClicked);
affectBlue.addEventListener('click', affectLayerClicked);
// Initially bind listeners
bindLayerListeners(redLayer);
bindLayerListeners(greenLayer);
bindLayerListeners(blueLayer);