From 90d46cb5398758ec57e3b465b824bc854334e866 Mon Sep 17 00:00:00 2001 From: Florent gravin Date: Fri, 16 Nov 2018 10:49:34 +0100 Subject: [PATCH] Remove blend-modes example As we are not doing canvas composition anymore --- examples/blend-modes.css | 4 - examples/blend-modes.html | 68 --------------- examples/blend-modes.js | 173 -------------------------------------- 3 files changed, 245 deletions(-) delete mode 100644 examples/blend-modes.css delete mode 100644 examples/blend-modes.html delete mode 100644 examples/blend-modes.js diff --git a/examples/blend-modes.css b/examples/blend-modes.css deleted file mode 100644 index 91102040cf..0000000000 --- a/examples/blend-modes.css +++ /dev/null @@ -1,4 +0,0 @@ -.map{ - background-repeat: repeat; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAApSURBVBiVY7x///5/BjSgqKjIiC7GhC6ACwygQgxHMzAwMGDz4FDwDAD5/wevjSk4mwAAAABJRU5ErkJggg==); -} diff --git a/examples/blend-modes.html b/examples/blend-modes.html deleted file mode 100644 index 5a4009bf53..0000000000 --- a/examples/blend-modes.html +++ /dev/null @@ -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: > -

This example shows how to change the canvas compositing / blending mode in - post- and precompose event handlers. The Canvas 2D API provides the property - globalCompositeOperation with which one can influence which - composition operation will be used when drawing on the canvas. The various - options are well described on the MDN - documentation page.

- -

In this example three circles on the corners of an equilateral triangle are - drawn with red, green or blue styles respectively. By setting the - globalCompositeOperation you can change how these colors turn out - when they are combined on the map.

- -

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.

-tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector" ---- -
-
- - - - -
diff --git a/examples/blend-modes.js b/examples/blend-modes.js deleted file mode 100644 index a5391ece72..0000000000 --- a/examples/blend-modes.js +++ /dev/null @@ -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);