You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2022/07/26 06:47:13 UTC
[echarts] 01/01: fix(bar-race): provide subPixelOptimize option to solve #14679
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 <zw...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org