diff --git a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts index 8782073d5..3c14e409d 100644 --- a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts +++ b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts @@ -579,10 +579,11 @@ function createContent(stage: Stage) { baseMarkGroupName: barSpec.name, data: barSpec.children.map(c => { return { - text: `${[212, 218, 230, 224].includes(c.id) ? '-' : ''}${c.id}`, - fill: 'white', - stroke: c.attribute.fill, - lineWidth: 2 + text: `${[212, 218, 230, 224].includes(c.id) ? '-' : ''}${c.id}` + // stroke: 'white' + // fill: 'white' + // stroke: c.attribute.fill, + // lineWidth: 0 }; }), type: 'rect', @@ -607,10 +608,11 @@ function createContent(stage: Stage) { } ] }, + // smartInvert: false, smartInvert: { - // strokeStrategy: 'similarSeries' - // brightColor: '#fff000', - // darkColor: '#dd0000' + strokeStrategy: 'similarBase', + brightColor: '#fff000', + darkColor: '#dd0000' }, zIndex: 302 diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index 5c3c623b6..932d2fadb 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -618,8 +618,8 @@ export abstract class LabelBase extends AbstractCompon protected _smartInvert(labels: IText[]) { const option = (this.attribute.smartInvert || {}) as SmartInvertAttrs; const { textType, contrastRatiosThreshold, alternativeColors } = option; - const fillStrategy = option.fillStrategy ?? 'invertSeries'; - const strokeStrategy = option.strokeStrategy ?? 'series'; + const fillStrategy = option.fillStrategy ?? 'invertBase'; + const strokeStrategy = option.strokeStrategy ?? 'base'; const brightColor = option.brightColor ?? '#ffffff'; const darkColor = option.darkColor ?? '#000000'; @@ -634,30 +634,22 @@ export abstract class LabelBase extends AbstractCompon } const baseMark = this._idToGraphic.get((label.attribute as LabelItem).id); - // let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds); - - // if (this.attribute.type === 'arc') { - // if (this.attribute.position === 'inside') { - // isInside = true; - // } else { - // isInside = false; - // } - // } + let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds); - // if (!isInside) { - // continue; - // } + if (this.attribute.type === 'arc') { + isInside = this.attribute.position === 'inside'; + } /** * 增加smartInvert时fillStrategy和 strokeStrategy的四种策略： * series（baseMark色）， * invertSeries（执行智能反色）， * similarSeries（智能反色的补色）， - * null（不执行智能反色，保持fill设置的颜色） */ - + * null（不执行智能反色，保持fill设置的颜色） + * */ const backgroundColor = baseMark.attribute.fill as IColor; const foregroundColor = label.attribute.fill as IColor; - const seriesColor = backgroundColor; + const baseColor = backgroundColor; const invertColor = labelSmartInvert( foregroundColor, backgroundColor, @@ -667,48 +659,40 @@ export abstract class LabelBase extends AbstractCompon ); const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor; - switch (fillStrategy) { - case 'null': - break; - case 'series': - label.setAttributes({ - fill: seriesColor - }); - break; - case 'invertSeries': - label.setAttributes({ - fill: invertColor - }); - break; - case 'similarSeries': - label.setAttributes({ - fill: simialrColor - }); - break; - } + if (isInside) { + this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor); - if (label.attribute.lineWidth === 0) { - continue; - } - switch (strokeStrategy) { - case 'null': - break; - case 'series': - label.setAttributes({ - stroke: seriesColor - }); - break; - case 'invertSeries': - label.setAttributes({ - stroke: invertColor - }); - break; - case 'similarSeries': + if (label.attribute.lineWidth === 0) { + continue; + } + + this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor); + } else { + /** 当label无法设置stroke时，不进行反色计算（容易反色为白色与白色背景混合不可见） */ + if (label.attribute.lineWidth === 0) { + continue; + } + + /** 当label设置stroke时，保留stroke设置的颜色，根据stroke对fill做反色 */ + if (label.attribute.stroke) { label.setAttributes({ - stroke: simialrColor + fill: labelSmartInvert( + label.attribute.fill as IColor, + label.attribute.stroke as IColor, + textType, + contrastRatiosThreshold, + alternativeColors + ) }); - break; + continue; + } + + /** 当label未设置stroke，且可设置stroke时，正常计算 */ + this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor); + + this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor); } + // /** // * stroke 的处理逻辑 // * 1. 当文本在图元内部时，有两种情况： @@ -758,6 +742,49 @@ export abstract class LabelBase extends AbstractCompon } } + setFillStrategy(fillStrategy: any, label: IText, baseColor: IColor, invertColor: IColor, simialrColor: IColor) { + switch (fillStrategy) { + case 'base': + label.setAttributes({ + fill: baseColor + }); + break; + case 'invertBase': + label.setAttributes({ + fill: invertColor + }); + break; + case 'similarBase': + label.setAttributes({ + fill: simialrColor + }); + default: + break; + } + } + + setStrokeStrategy(strokeStrategy: any, label: IText, baseColor: IColor, invertColor: IColor, simialrColor: IColor) { + switch (strokeStrategy) { + case 'base': + label.setAttributes({ + stroke: baseColor + }); + break; + case 'invertBase': + label.setAttributes({ + stroke: invertColor + }); + break; + case 'similarBase': + label.setAttributes({ + stroke: simialrColor + }); + break; + default: + break; + } + } + setLocation(point: PointLocationCfg) { this.translateTo(point.x, point.y); } diff --git a/packages/vrender-components/src/label/type.ts b/packages/vrender-components/src/label/type.ts index 5d000f248..751f5e30b 100644 --- a/packages/vrender-components/src/label/type.ts +++ b/packages/vrender-components/src/label/type.ts @@ -135,22 +135,22 @@ export interface SmartInvertAttrs { alternativeColors?: string | string[]; /** * fillStrategy四种策略： - * - series（baseMark色）， - * - invertSeries（执行智能反色）， - * - similarSeries（智能反色的补色）， - * - null（不执行智能反色，保持fill设置的颜色） + * - base（baseMark色）， + * - invertBase（执行智能反色）， + * - similarBase（智能反色的补色）， + * - null（不执行智能反色，保持stroke设置的颜色） * @default 'invertSeries' */ - fillStrategy?: 'series' | 'invertSeries' | 'similarSeries' | 'null'; + fillStrategy?: 'base' | 'invertBase' | 'similarBase' | 'null'; /** * strokeStrategy的四种策略: - * - series（baseMark色）， - * - invertSeries（执行智能反色）， - * - similarSeries（智能反色的补色）， + * - base（baseMark色）， + * - invertBase（执行智能反色）， + * - similarBase（智能反色的补色）， * - null（不执行智能反色，保持fill设置的颜色） * @default 'series' */ - strokeStrategy?: 'series' | 'invertSeries' | 'similarSeries' | 'null'; + strokeStrategy?: 'base' | 'invertBase' | 'similarBase' | 'null'; /** * 前景色与亮色具有对比度时，similarSeries使用该色 * @default '#ffffff'