This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix-subpixel in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 749b64e94d53ecc5e4ac4fc217762cae86c2fc5b Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Tue Jul 26 14:46:14 2022 +0800 fix(bar-race): provide subPixelOptimize option to solve #14679 --- src/component/axis/AxisBuilder.ts | 24 ++++++++++++++++-------- src/component/axis/CartesianAxisView.ts | 14 ++++++++++++-- src/component/axis/SingleAxisView.ts | 7 ++++++- src/coord/axisCommonTypes.ts | 1 + test/bar-race.html | 3 ++- 5 files changed, 37 insertions(+), 12 deletions(-) diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts index b0e31e08f..e338453ed 100644 --- a/src/component/axis/AxisBuilder.ts +++ b/src/component/axis/AxisBuilder.ts @@ -343,13 +343,17 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu }, axisTickLabel(opt, axisModel, group, transformGroup) { + let subPixelOptimize = axisModel.get('subPixelOptimize'); + if (subPixelOptimize == null) { + subPixelOptimize = true; + } - const ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel, opt); + const ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel, opt, subPixelOptimize); const labelEls = buildAxisLabel(group, transformGroup, axisModel, opt); fixMinMaxLabelShow(axisModel, labelEls, ticksEls); - buildAxisMinorTicks(group, transformGroup, axisModel, opt.tickDirection); + buildAxisMinorTicks(group, transformGroup, axisModel, opt.tickDirection, subPixelOptimize); // This bit fixes the label overlap issue for the time chart. // See https://github.com/apache/echarts/issues/14266 for more. @@ -611,7 +615,8 @@ function createTicks( tickTransform: matrixUtil.MatrixArray, tickEndCoord: number, tickLineStyle: PathStyleProps, - anidPrefix: string + anidPrefix: string, + subPixelOptimize: boolean ) { const tickEls = []; const pt1: number[] = []; @@ -630,7 +635,7 @@ function createTicks( } // Tick line, Not use group transform to have better line draw const tickEl = new graphic.Line({ - subPixelOptimize: true, + subPixelOptimize, shape: { x1: pt1[0], y1: pt1[1], @@ -652,7 +657,8 @@ function buildAxisMajorTicks( group: graphic.Group, transformGroup: graphic.Group, axisModel: AxisBaseModel, - opt: AxisBuilderCfg + opt: AxisBuilderCfg, + subPixelOptimize: boolean ) { const axis = axisModel.axis; @@ -676,7 +682,7 @@ function buildAxisMajorTicks( { stroke: axisModel.get(['axisLine', 'lineStyle', 'color']) } - ), 'ticks'); + ), 'ticks', subPixelOptimize); for (let i = 0; i < ticksEls.length; i++) { group.add(ticksEls[i]); @@ -689,7 +695,8 @@ function buildAxisMinorTicks( group: graphic.Group, transformGroup: graphic.Group, axisModel: AxisBaseModel, - tickDirection: number + tickDirection: number, + subPixelOptimize: boolean ) { const axis = axisModel.axis; @@ -719,7 +726,8 @@ function buildAxisMinorTicks( for (let i = 0; i < minorTicksCoords.length; i++) { const minorTicksEls = createTicks( - minorTicksCoords[i], transformGroup.transform, tickEndCoord, minorTickLineStyle, 'minorticks_' + i + minorTicksCoords[i], transformGroup.transform, tickEndCoord, minorTickLineStyle, 'minorticks_' + i, + subPixelOptimize ); for (let k = 0; k < minorTicksEls.length; k++) { group.add(minorTicksEls[k]); diff --git a/src/component/axis/CartesianAxisView.ts b/src/component/axis/CartesianAxisView.ts index e04039890..e1a74b6df 100644 --- a/src/component/axis/CartesianAxisView.ts +++ b/src/component/axis/CartesianAxisView.ts @@ -139,6 +139,12 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu const p2 = []; const lineStyle = lineStyleModel.getLineStyle(); + + let subPixelOptimize = axisModel.get('subPixelOptimize'); + if (subPixelOptimize == null) { + subPixelOptimize = true; + } + for (let i = 0; i < ticksCoords.length; i++) { const tickCoord = axis.toGlobalCoord(ticksCoords[i].coord); @@ -159,7 +165,7 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu const tickValue = ticksCoords[i].tickValue; axisGroup.add(new graphic.Line({ anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null, - subPixelOptimize: true, + subPixelOptimize, autoBatch: true, shape: { x1: p1[0], @@ -193,6 +199,10 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu const lineStyle = lineStyleModel.getLineStyle(); + let subPixelOptimize = axisModel.get('subPixelOptimize'); + if (subPixelOptimize == null) { + subPixelOptimize = true; + } for (let i = 0; i < minorTicksCoords.length; i++) { for (let k = 0; k < minorTicksCoords[i].length; k++) { @@ -213,7 +223,7 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu axisGroup.add(new graphic.Line({ anid: 'minor_line_' + minorTicksCoords[i][k].tickValue, - subPixelOptimize: true, + subPixelOptimize, autoBatch: true, shape: { x1: p1[0], diff --git a/src/component/axis/SingleAxisView.ts b/src/component/axis/SingleAxisView.ts index 06cf5e326..d206fc8cd 100644 --- a/src/component/axis/SingleAxisView.ts +++ b/src/component/axis/SingleAxisView.ts @@ -109,6 +109,11 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu const p1 = []; const p2 = []; + let subPixelOptimize = axisModel.get('subPixelOptimize'); + if (subPixelOptimize == null) { + subPixelOptimize = true; + } + for (let i = 0; i < ticksCoords.length; ++i) { const tickCoord = axis.toGlobalCoord(ticksCoords[i].coord); if (isHorizontal) { @@ -126,7 +131,7 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu const colorIndex = (lineCount++) % lineColors.length; splitLines[colorIndex] = splitLines[colorIndex] || []; splitLines[colorIndex].push(new graphic.Line({ - subPixelOptimize: true, + subPixelOptimize, shape: { x1: p1[0], y1: p1[1], diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts index e3241cb02..a3309a18c 100644 --- a/src/coord/axisCommonTypes.ts +++ b/src/coord/axisCommonTypes.ts @@ -63,6 +63,7 @@ export interface AxisBaseOptionCommon extends ComponentOption, splitLine?: SplitLineOption; minorSplitLine?: MinorSplitLineOption; splitArea?: SplitAreaOption; + subPixelOptimize?: boolean; /** * Min value of the axis. can be: diff --git a/test/bar-race.html b/test/bar-race.html index 766ae138e..9916d7738 100644 --- a/test/bar-race.html +++ b/test/bar-race.html @@ -75,7 +75,8 @@ under the License. formatter: function (n) { return Math.round(n); } - } + }, + subPixelOptimize: false }, dataset: { source: data.slice(1).filter(d => { --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org