fix(visualmap): add textShadowColor, make text shadow work on visualM…

…ap. close apache#14440
fuchunhui · Mar 14, 2022 · 3d8e255 · 3d8e255
1 parent 6a42c39
commit 3d8e255
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 218 deletions.
diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts
@@ -182,6 +182,7 @@ class ContinuousView extends VisualMapView {
         );
         const orient = this._orient;
         const textStyleModel = this.visualMapModel.textStyleModel;
+        const textShadow = textStyleModel.getTextShadow();
 
         this.group.add(new graphic.Text({
             style: {
@@ -191,7 +192,8 @@ class ContinuousView extends VisualMapView {
                 align: orient === 'horizontal' ? align as TextAlign : 'center',
                 text: text,
                 font: textStyleModel.getFont(),
-                fill: textStyleModel.getTextColor()
+                fill: textStyleModel.getTextColor(),
+                ...textShadow
             }
         }));
     }

diff --git a/src/component/visualMap/PiecewiseView.ts b/src/component/visualMap/PiecewiseView.ts
@@ -101,8 +101,6 @@ class PiecewiseVisualMapView extends VisualMapView {
         this.renderBackground(thisGroup);
 
         this.positionGroup(thisGroup);
-
-
     }
 
     private _enableHoverLink(itemGroup: graphic.Group, pieceIndex: number) {
@@ -155,6 +153,7 @@ class PiecewiseVisualMapView extends VisualMapView {
 
         const itemGroup = new graphic.Group();
         const textStyleModel = this.visualMapModel.textStyleModel;
+        const textShadow = textStyleModel.getTextShadow();
 
         itemGroup.add(new graphic.Text({
             style: {
@@ -164,7 +163,8 @@ class PiecewiseVisualMapView extends VisualMapView {
                 align: showLabel ? (itemAlign as TextAlign) : 'center',
                 text: text,
                 font: textStyleModel.getFont(),
-                fill: textStyleModel.getTextColor()
+                fill: textStyleModel.getTextColor(),
+                ...textShadow
             }
         }));
 

diff --git a/src/model/mixin/textStyle.ts b/src/model/mixin/textStyle.ts
@@ -35,6 +35,8 @@ const textStyleParams = [
     'fontStyle', 'fontWeight', 'fontSize', 'fontFamily', 'padding',
     'lineHeight', 'rich', 'width', 'height', 'overflow'
 ] as const;
+type LabelTextShadowOption = Pick<LabelOption,
+    'textShadowBlur' | 'textShadowColor' | 'textShadowOffsetX' | 'textShadowOffsetY'>;
 
 // TODO Performance improvement?
 const tmpText = new ZRText();
@@ -77,6 +79,15 @@ class TextStyleMixin {
         tmpText.update();
         return tmpText.getBoundingRect();
     }
+
+    getTextShadow(this: Model<LabelTextShadowOption>) {
+        return {
+            textShadowBlur: this.getShallow('textShadowBlur'),
+            textShadowColor: this.getShallow('textShadowColor'),
+            textShadowOffsetX: this.getShallow('textShadowOffsetX'),
+            textShadowOffsetY: this.getShallow('textShadowOffsetY')
+        };
+    }
 };
 
 export default TextStyleMixin;
diff --git a/test/visualMap-continuous.html b/test/visualMap-continuous.html