fix Layer opacity lose efficacy when it has Mask (#2502)

* fix Layer opacity lose efficacy when it has Mask

* update spec

Author: deyihu

packages/maptalks/src/renderer/layer/CanvasRenderer.ts

@@ -631,6 +631,8 @@ class CanvasRenderer extends Class {
         const map = this.getMap();
         //when clipping, layer's middleWest needs to be reset for mask's containerPoint conversion
         this.middleWest = map._containerPointToPoint(new Point(0, map.height / 2));
+        //geometry 渲染逻辑里会修改globalAlpha，这里保存一下
+        const alpha = context.globalAlpha;
         context.save();
         const dpr = map.getDevicePixelRatio();
         if (dpr !== 1) {
@@ -664,6 +666,7 @@ class CanvasRenderer extends Class {
             console.error(error);
         }
         this.middleWest = old;
+        context.globalAlpha = alpha;
         return true;
     }
 

packages/maptalks/test/SpecCommon.js

@@ -359,3 +359,15 @@ function coordinate2PointWidthAltitude(map, coordinate) {
     return point;
 }
 /*eslint-enable no-unused-vars */
+
+// eslint-disable-next-line no-undef
+var uaParser = new UAParser();
+var uaResult = uaParser.getOS();
+// eslint-disable-next-line no-unused-vars
+function isWindows() {
+    return (uaResult.name && uaResult.name.toLowerCase().indexOf('windows') > -1)
+}
+// eslint-disable-next-line no-unused-vars
+function isLinux() {
+    return (uaResult.name && uaResult.name.toLowerCase().indexOf('linux') > -1)
+}

packages/maptalks/test/geometry/TextBoxSpec.js

@@ -199,9 +199,10 @@ describe('Geometry.TextBox', function () {
             layer = new maptalks.VectorLayer('id', { 'drawImmediate': true });
             map.addLayer(layer);
             layer.addGeometry(vector);
-            var parser = new UAParser();
-            var result = parser.getOS();
-            if (result.name && result.name.toLowerCase().indexOf('windows') > -1) {
+
+
+            // eslint-disable-next-line no-undef
+            if (isWindows()) {
                 expect(layer).to.be.painted(100 / 2 - padding[0] - 4, 0);
             } else {
                 expect(layer).to.be.painted(100 / 2 - padding[0] - 2, 0);
@@ -251,16 +252,17 @@ describe('Geometry.TextBox', function () {
             layer = new maptalks.VectorLayer('id', { 'drawImmediate': true });
             map.addLayer(layer);
             layer.addGeometry(vector);
-            var parser = new UAParser();
+
             var offset = 8;
-            var result = parser.getOS();
-            console.log(result);
-            if (result.name) {
-                if (result.name.toLowerCase().indexOf('linux') > -1) {
-                    offset = 9;
-                }
+
+
+
+            // eslint-disable-next-line no-undef
+            if (isLinux()) {
+                offset = 9;
             }
 
+
             expect(layer).to.be.painted(0, 100 / 2 - padding[1] - offset);
             expect(layer).not.be.painted();
         });

packages/maptalks/test/layer/ImageLayerSpec.js

@@ -68,15 +68,13 @@ describe('Layer.ImageLayer', function () {
             renderer: 'canvas'
         });
         layer.on('layerload', function () {
-            var parser = new UAParser();
             var alpha = 104;
-            var result = parser.getOS();
-            console.log(result);
-            if (result.name) {
-                if (result.name.toLowerCase().indexOf('linux') > -1) {
-                    alpha = 104;
-                }
+
+            // eslint-disable-next-line no-undef
+            if (isLinux()) {
+                alpha = 104;
             }
+
             var size = map.getSize();
             var ctx = layer.getRenderer().canvas.getContext('2d');
             var imageData = ctx.getImageData(size.width / 2, size.height / 2, 1, 1).data;

packages/maptalks/test/layer/LayerSpec.js

@@ -377,6 +377,27 @@ describe('Layer.Spec', function () {
         // }, 60);
     });
 
+    it('change opacity when has mask', function (done) {
+        var layer1 = new maptalks.TileLayer('1', {
+            renderer: 'canvas',
+            urlTemplate: 'resources/tile-red-256.png'
+        }).addTo(map);
+        expect(layer1.getOpacity()).to.be.eql(1);
+        layer1.setOpacity(0.5);
+        expect(layer1.getOpacity()).to.be.eql(0.5);
+        const extent = map.getExtent();
+        const mask = new maptalks.Polygon([...extent.toArray()]);
+        layer1.setMask(mask);
+        setTimeout(() => {
+            var canvas = map.getRenderer().canvas;
+            var size = map.getSize().toPoint();
+            var context = canvas.getContext('2d');
+            var imgData = context.getImageData(Math.round(size.x / 2), Math.round(size.y / 2), 1, 1).data;
+            expect([...imgData]).to.be.eql([255, 0, 0, 128]);
+            done();
+        }, 1000);
+    });
+
     it('#getCollisionIndex', function () {
         var layer = new maptalks.TileLayer('1', { renderer:'canvas' });
         expect(layer.getCollisionIndex()).to.be.ok();