Skip to content
Permalink
Browse files
Merge pull request #17426 from apache/fix-subpixel
feat(bar-race): provide subPixelOptimize option to solve #14679
  • Loading branch information
Ovilia committed Aug 18, 2022
2 parents 9bcded1 + 3e48e9f commit f2e8379c79341419a52cc6f43b669a8fb1d79dfb
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 24 deletions.
@@ -269,8 +269,6 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
);

const line = new graphic.Line({
// Id for animation
subPixelOptimize: true,
shape: {
x1: pt1[0],
y1: pt1[1],
@@ -282,6 +280,7 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
silent: true,
z2: 1
});
graphic.subPixelOptimizeLine(line.shape, line.style.lineWidth);
line.anid = 'line';
group.add(line);

@@ -343,7 +342,6 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
},

axisTickLabel(opt, axisModel, group, transformGroup) {

const ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel, opt);
const labelEls = buildAxisLabel(group, transformGroup, axisModel, opt);

@@ -630,7 +628,6 @@ function createTicks(
}
// Tick line, Not use group transform to have better line draw
const tickEl = new graphic.Line({
subPixelOptimize: true,
shape: {
x1: pt1[0],
y1: pt1[1],
@@ -642,6 +639,7 @@ function createTicks(
autoBatch: true,
silent: true
});
graphic.subPixelOptimizeLine(tickEl.shape, tickEl.style.lineWidth);
tickEl.anid = anidPrefix + '_' + ticksCoords[i].tickValue;
tickEls.push(tickEl);
}
@@ -157,9 +157,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu

const colorIndex = (lineCount++) % lineColors.length;
const tickValue = ticksCoords[i].tickValue;
axisGroup.add(new graphic.Line({
const line = new graphic.Line({
anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
subPixelOptimize: true,
autoBatch: true,
shape: {
x1: p1[0],
@@ -171,7 +170,9 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
stroke: lineColors[colorIndex]
}, lineStyle),
silent: true
}));
});
graphic.subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
axisGroup.add(line);
}
},

@@ -193,7 +194,6 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu

const lineStyle = lineStyleModel.getLineStyle();


for (let i = 0; i < minorTicksCoords.length; i++) {
for (let k = 0; k < minorTicksCoords[i].length; k++) {
const tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);
@@ -211,9 +211,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
p2[1] = tickCoord;
}

axisGroup.add(new graphic.Line({
const line = new graphic.Line({
anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
subPixelOptimize: true,
autoBatch: true,
shape: {
x1: p1[0],
@@ -223,7 +222,9 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
},
style: lineStyle,
silent: true
}));
});
graphic.subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
axisGroup.add(line);
}
}
},
@@ -93,8 +93,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
const splitLineModel = axisModel.getModel('splitLine');
const lineStyleModel = splitLineModel.getModel('lineStyle');
let lineColors = lineStyleModel.get('color');

lineColors = lineColors instanceof Array ? lineColors : [lineColors];
const lineWidth = lineStyleModel.get('width');

const gridRect = axisModel.coordinateSystem.getRect();
const isHorizontal = axis.isHorizontal();
@@ -123,18 +123,21 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
p2[0] = gridRect.x + gridRect.width;
p2[1] = tickCoord;
}
const colorIndex = (lineCount++) % lineColors.length;
splitLines[colorIndex] = splitLines[colorIndex] || [];
splitLines[colorIndex].push(new graphic.Line({
subPixelOptimize: true,

const line = new graphic.Line({
shape: {
x1: p1[0],
y1: p1[1],
x2: p2[0],
y2: p2[1]
},
silent: true
}));
});
graphic.subPixelOptimizeLine(line.shape, lineWidth);

const colorIndex = (lineCount++) % lineColors.length;
splitLines[colorIndex] = splitLines[colorIndex] || [];
splitLines[colorIndex].push(line);
}

const lineStyle = lineStyleModel.getLineStyle(['color']);
@@ -268,16 +268,14 @@ export function resizePath(path: SVGPath, rect: ZRRectLike): void {
/**
* Sub pixel optimize line for canvas
*/
export function subPixelOptimizeLine(param: {
export function subPixelOptimizeLine(
shape: {
x1: number, y1: number, x2: number, y2: number
},
style: {
lineWidth: number
}
}) {
subPixelOptimizeUtil.subPixelOptimizeLine(param.shape, param.shape, param.style);
return param;
lineWidth: number
) {
subPixelOptimizeUtil.subPixelOptimizeLine(shape, shape, {lineWidth});
return shape;
}

/**

Some generated files are not rendered by default. Learn more.

0 comments on commit f2e8379

Please sign in to comment.