You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/12/28 16:17:45 UTC
[incubator-echarts] branch master updated: Move subPixelOptimize to
zrender. (Tweak #9598)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new 225f8b3 Move subPixelOptimize to zrender. (Tweak #9598)
225f8b3 is described below
commit 225f8b3c9d1a90c2442bba252cc0b9e90a034474
Author: sushuang <su...@gmail.com>
AuthorDate: Sat Dec 29 00:17:03 2018 +0800
Move subPixelOptimize to zrender. (Tweak #9598)
---
src/chart/helper/Line.js | 42 +++++++----------------
src/chart/helper/LinePath.js | 16 +++++----
src/component/axis/AxisBuilder.js | 12 +++----
src/component/axis/CartesianAxisView.js | 5 +--
src/component/axis/SingleAxisView.js | 26 +++++++-------
src/component/axisPointer/CartesianAxisPointer.js | 12 +++----
src/component/axisPointer/SingleAxisPointer.js | 12 +++----
src/component/dataZoom/SliderZoomView.js | 5 +--
src/component/title.js | 2 +-
src/util/graphic.js | 39 +++------------------
test/markLine-subPixel.html | 2 +-
11 files changed, 63 insertions(+), 110 deletions(-)
diff --git a/src/chart/helper/Line.js b/src/chart/helper/Line.js
index 2d7f080..b9b8086 100644
--- a/src/chart/helper/Line.js
+++ b/src/chart/helper/Line.js
@@ -58,35 +58,23 @@ function createSymbol(name, lineData, idx) {
return symbolPath;
}
-function createLine(points, lineWidth) {
+function createLine(points) {
var line = new LinePath({
- name: 'line'
+ name: 'line',
+ subPixelOptimize: true
});
- setLinePoints(line.shape, points, lineWidth);
+ setLinePoints(line.shape, points);
return line;
}
-function setLinePoints(targetShape, points, lineWidth) {
- var subPixelParam = graphic.subPixelOptimizeLine({
- shape: {
- x1: points[0][0],
- y1: points[0][1],
- x2: points[1][0],
- y2: points[1][1]
- },
- style: {
- lineWidth: lineWidth == null ? 1 : lineWidth
- }
- });
-
- var shape = subPixelParam.shape;
- var cp1 = points[2];
- targetShape.x1 = shape.x1;
- targetShape.y1 = shape.y1;
- targetShape.x2 = shape.x2;
- targetShape.y2 = shape.y2;
+function setLinePoints(targetShape, points) {
+ targetShape.x1 = points[0][0];
+ targetShape.y1 = points[0][1];
+ targetShape.x2 = points[1][0];
+ targetShape.y2 = points[1][1];
targetShape.percent = 1;
+ var cp1 = points[2];
if (cp1) {
targetShape.cpx1 = cp1[0];
targetShape.cpy1 = cp1[1];
@@ -217,9 +205,7 @@ lineProto.beforeUpdate = updateSymbolAndLabelBeforeLineUpdate;
lineProto._createLine = function (lineData, idx, seriesScope) {
var seriesModel = lineData.hostModel;
var linePoints = lineData.getItemLayout(idx);
- var lineStyle = seriesScope.lineStyle;
- var lineWidth = lineStyle && lineStyle.lineWidth;
- var line = createLine(linePoints, lineWidth);
+ var line = createLine(linePoints);
line.shape.percent = 0;
graphic.initProps(line, {
shape: {
@@ -254,10 +240,8 @@ lineProto.updateData = function (lineData, idx, seriesScope) {
var target = {
shape: {}
};
- var lineStyle = seriesScope.lineStyle;
- var lineWidth = lineStyle && lineStyle.lineWidth;
- setLinePoints(target.shape, linePoints, lineWidth);
+ setLinePoints(target.shape, linePoints);
graphic.updateProps(line, target, seriesModel, idx);
zrUtil.each(SYMBOL_CATEGORIES, function (symbolCategory) {
@@ -409,7 +393,7 @@ lineProto.updateLayout = function (lineData, idx) {
lineProto.setLinePoints = function (points) {
var linePath = this.childOfName('line');
- setLinePoints(linePath.shape, points, linePath.style.lineWidth);
+ setLinePoints(linePath.shape, points);
linePath.dirty();
};
diff --git a/src/chart/helper/LinePath.js b/src/chart/helper/LinePath.js
index 60107b1..7256973 100644
--- a/src/chart/helper/LinePath.js
+++ b/src/chart/helper/LinePath.js
@@ -51,20 +51,24 @@ export default graphic.extendShape({
},
buildPath: function (ctx, shape) {
- (isLine(shape) ? straightLineProto : bezierCurveProto).buildPath(ctx, shape);
+ this[isLine(shape) ? '_buildPathLine' : '_buildPathCurve'](ctx, shape);
},
+ _buildPathLine: straightLineProto.buildPath,
+ _buildPathCurve: bezierCurveProto.buildPath,
pointAt: function (t) {
- return isLine(this.shape)
- ? straightLineProto.pointAt.call(this, t)
- : bezierCurveProto.pointAt.call(this, t);
+ return this[isLine(this.shape) ? '_pointAtLine' : '_pointAtCurve'](t);
},
+ _pointAtLine: straightLineProto.pointAt,
+ _pointAtCurve: bezierCurveProto.pointAt,
tangentAt: function (t) {
var shape = this.shape;
var p = isLine(shape)
? [shape.x2 - shape.x1, shape.y2 - shape.y1]
- : bezierCurveProto.tangentAt.call(this, t);
+ : this._tangentAtCurve(t);
return vec2.normalize(p, p);
- }
+ },
+ _tangentAtCurve: bezierCurveProto.tangentAt
+
});
\ No newline at end of file
diff --git a/src/component/axis/AxisBuilder.js b/src/component/axis/AxisBuilder.js
index 919fb5e..76f7ec4 100644
--- a/src/component/axis/AxisBuilder.js
+++ b/src/component/axis/AxisBuilder.js
@@ -169,10 +169,10 @@ var builders = {
axisModel.getModel('axisLine.lineStyle').getLineStyle()
);
- this.group.add(new graphic.Line(graphic.subPixelOptimizeLine({
+ this.group.add(new graphic.Line({
// Id for animation
anid: 'line',
-
+ subPixelOptimize: true,
shape: {
x1: pt1[0],
y1: pt1[1],
@@ -183,7 +183,7 @@ var builders = {
strokeContainThreshold: opt.strokeContainThreshold || 5,
silent: true,
z2: 1
- })));
+ }));
var arrows = axisModel.get('axisLine.symbol');
var arrowSize = axisModel.get('axisLine.symbolSize');
@@ -598,10 +598,10 @@ function buildAxisTick(axisBuilder, axisModel, opt) {
v2ApplyTransform(pt2, pt2, matrix);
}
// Tick line, Not use group transform to have better line draw
- var tickEl = new graphic.Line(graphic.subPixelOptimizeLine({
+ var tickEl = new graphic.Line({
// Id for animation
anid: 'tick_' + ticksCoords[i].tickValue,
-
+ subPixelOptimize: true,
shape: {
x1: pt1[0],
y1: pt1[1],
@@ -616,7 +616,7 @@ function buildAxisTick(axisBuilder, axisModel, opt) {
),
z2: 2,
silent: true
- }));
+ });
axisBuilder.group.add(tickEl);
tickEls.push(tickEl);
}
diff --git a/src/component/axis/CartesianAxisView.js b/src/component/axis/CartesianAxisView.js
index 542b7f3..e5a2f52 100644
--- a/src/component/axis/CartesianAxisView.js
+++ b/src/component/axis/CartesianAxisView.js
@@ -136,8 +136,9 @@ var CartesianAxisView = AxisView.extend({
var colorIndex = (lineCount++) % lineColors.length;
var tickValue = ticksCoords[i].tickValue;
- this._axisGroup.add(new graphic.Line(graphic.subPixelOptimizeLine({
+ this._axisGroup.add(new graphic.Line({
anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
+ subPixelOptimize: true,
shape: {
x1: p1[0],
y1: p1[1],
@@ -148,7 +149,7 @@ var CartesianAxisView = AxisView.extend({
stroke: lineColors[colorIndex]
}, lineStyle),
silent: true
- })));
+ }));
}
},
diff --git a/src/component/axis/SingleAxisView.js b/src/component/axis/SingleAxisView.js
index 00c2cd8..6ae9043 100644
--- a/src/component/axis/SingleAxisView.js
+++ b/src/component/axis/SingleAxisView.js
@@ -100,19 +100,19 @@ var SingleAxisView = AxisView.extend({
}
var colorIndex = (lineCount++) % lineColors.length;
splitLines[colorIndex] = splitLines[colorIndex] || [];
- splitLines[colorIndex].push(new graphic.Line(
- graphic.subPixelOptimizeLine({
- shape: {
- x1: p1[0],
- y1: p1[1],
- x2: p2[0],
- y2: p2[1]
- },
- style: {
- lineWidth: lineWidth
- },
- silent: true
- })));
+ splitLines[colorIndex].push(new graphic.Line({
+ subPixelOptimize: true,
+ shape: {
+ x1: p1[0],
+ y1: p1[1],
+ x2: p2[0],
+ y2: p2[1]
+ },
+ style: {
+ lineWidth: lineWidth
+ },
+ silent: true
+ }));
}
for (var i = 0; i < splitLines.length; ++i) {
diff --git a/src/component/axisPointer/CartesianAxisPointer.js b/src/component/axisPointer/CartesianAxisPointer.js
index 874dfce..111b67c 100644
--- a/src/component/axisPointer/CartesianAxisPointer.js
+++ b/src/component/axisPointer/CartesianAxisPointer.js
@@ -17,7 +17,6 @@
* under the License.
*/
-import * as graphic from '../../util/graphic';
import BaseAxisPointer from './BaseAxisPointer';
import * as viewHelper from './viewHelper';
import * as cartesianAxisHelper from '../../coord/cartesian/cartesianAxisHelper';
@@ -38,7 +37,7 @@ var CartesianAxisPointer = BaseAxisPointer.extend({
if (axisPointerType && axisPointerType !== 'none') {
var elStyle = viewHelper.buildElStyle(axisPointerModel);
var pointerOption = pointerShapeBuilder[axisPointerType](
- axis, pixelValue, otherExtent, elStyle
+ axis, pixelValue, otherExtent
);
pointerOption.style = elStyle;
elOption.graphicKey = pointerOption.type;
@@ -105,23 +104,20 @@ function getCartesian(grid, axis) {
var pointerShapeBuilder = {
- line: function (axis, pixelValue, otherExtent, elStyle) {
+ line: function (axis, pixelValue, otherExtent) {
var targetShape = viewHelper.makeLineShape(
[pixelValue, otherExtent[0]],
[pixelValue, otherExtent[1]],
getAxisDimIndex(axis)
);
- graphic.subPixelOptimizeLine({
- shape: targetShape,
- style: elStyle
- });
return {
type: 'Line',
+ subPixelOptimize: true,
shape: targetShape
};
},
- shadow: function (axis, pixelValue, otherExtent, elStyle) {
+ shadow: function (axis, pixelValue, otherExtent) {
var bandWidth = Math.max(1, axis.getBandWidth());
var span = otherExtent[1] - otherExtent[0];
return {
diff --git a/src/component/axisPointer/SingleAxisPointer.js b/src/component/axisPointer/SingleAxisPointer.js
index 9de5e23..221bf11 100644
--- a/src/component/axisPointer/SingleAxisPointer.js
+++ b/src/component/axisPointer/SingleAxisPointer.js
@@ -17,7 +17,6 @@
* under the License.
*/
-import * as graphic from '../../util/graphic';
import BaseAxisPointer from './BaseAxisPointer';
import * as viewHelper from './viewHelper';
import * as singleAxisHelper from '../../coord/single/singleAxisHelper';
@@ -41,7 +40,7 @@ var SingleAxisPointer = BaseAxisPointer.extend({
if (axisPointerType && axisPointerType !== 'none') {
var elStyle = viewHelper.buildElStyle(axisPointerModel);
var pointerOption = pointerShapeBuilder[axisPointerType](
- axis, pixelValue, otherExtent, elStyle
+ axis, pixelValue, otherExtent
);
pointerOption.style = elStyle;
@@ -97,23 +96,20 @@ var SingleAxisPointer = BaseAxisPointer.extend({
var pointerShapeBuilder = {
- line: function (axis, pixelValue, otherExtent, elStyle) {
+ line: function (axis, pixelValue, otherExtent) {
var targetShape = viewHelper.makeLineShape(
[pixelValue, otherExtent[0]],
[pixelValue, otherExtent[1]],
getPointDimIndex(axis)
);
- graphic.subPixelOptimizeLine({
- shape: targetShape,
- style: elStyle
- });
return {
type: 'Line',
+ subPixelOptimize: true,
shape: targetShape
};
},
- shadow: function (axis, pixelValue, otherExtent, elStyle) {
+ shadow: function (axis, pixelValue, otherExtent) {
var bandWidth = axis.getBandWidth();
var span = otherExtent[1] - otherExtent[0];
return {
diff --git a/src/component/dataZoom/SliderZoomView.js b/src/component/dataZoom/SliderZoomView.js
index e0566a3..4b875da 100644
--- a/src/component/dataZoom/SliderZoomView.js
+++ b/src/component/dataZoom/SliderZoomView.js
@@ -465,8 +465,9 @@ var SliderZoomView = DataZoomView.extend({
}));
// Frame border.
- barGroup.add(new Rect(graphic.subPixelOptimizeRect({
+ barGroup.add(new Rect({
silent: true,
+ subPixelOptimize: true,
shape: {
x: 0,
y: 0,
@@ -479,7 +480,7 @@ var SliderZoomView = DataZoomView.extend({
lineWidth: DEFAULT_FRAME_BORDER_WIDTH,
fill: 'rgba(0,0,0,0)'
}
- })));
+ }));
each([0, 1], function (handleIndex) {
var path = graphic.createIcon(
diff --git a/src/component/title.js b/src/component/title.js
index a680b1f..00f62b8 100644
--- a/src/component/title.js
+++ b/src/component/title.js
@@ -222,9 +222,9 @@ echarts.extendComponentView({
r: titleModel.get('borderRadius')
},
style: style,
+ subPixelOptimize: true,
silent: true
});
- graphic.subPixelOptimizeRect(rect);
group.add(rect);
}
diff --git a/src/util/graphic.js b/src/util/graphic.js
index c24b089..9010657 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -41,9 +41,9 @@ import LinearGradient from 'zrender/src/graphic/LinearGradient';
import RadialGradient from 'zrender/src/graphic/RadialGradient';
import BoundingRect from 'zrender/src/core/BoundingRect';
import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
+import * as subPixelOptimizeUtil from 'zrender/src/graphic/helper/subPixelOptimize';
-var round = Math.round;
var mathMax = Math.max;
var mathMin = Math.min;
@@ -173,15 +173,7 @@ export function resizePath(path, rect) {
* @return {Object} Modified param
*/
export function subPixelOptimizeLine(param) {
- var shape = param.shape;
- var lineWidth = param.style.lineWidth;
-
- if (round(shape.x1 * 2) === round(shape.x2 * 2)) {
- shape.x1 = shape.x2 = subPixelOptimize(shape.x1, lineWidth, true);
- }
- if (round(shape.y1 * 2) === round(shape.y2 * 2)) {
- shape.y1 = shape.y2 = subPixelOptimize(shape.y1, lineWidth, true);
- }
+ subPixelOptimizeUtil.subPixelOptimizeLine(param.shape, param.shape, param.style);
return param;
}
@@ -199,22 +191,7 @@ export function subPixelOptimizeLine(param) {
* @return {Object} Modified param
*/
export function subPixelOptimizeRect(param) {
- var shape = param.shape;
- var lineWidth = param.style.lineWidth;
- var originX = shape.x;
- var originY = shape.y;
- var originWidth = shape.width;
- var originHeight = shape.height;
- shape.x = subPixelOptimize(shape.x, lineWidth, true);
- shape.y = subPixelOptimize(shape.y, lineWidth, true);
- shape.width = Math.max(
- subPixelOptimize(originX + originWidth, lineWidth, false) - shape.x,
- originWidth === 0 ? 0 : 1
- );
- shape.height = Math.max(
- subPixelOptimize(originY + originHeight, lineWidth, false) - shape.y,
- originHeight === 0 ? 0 : 1
- );
+ subPixelOptimizeUtil.subPixelOptimizeRect(param.shape, param.shape, param.style);
return param;
}
@@ -226,14 +203,8 @@ export function subPixelOptimizeRect(param) {
* @param {boolean=} positiveOrNegative Default false (negative).
* @return {number} Optimized position.
*/
-export function subPixelOptimize(position, lineWidth, positiveOrNegative) {
- // Assure that (position + lineWidth / 2) is near integer edge,
- // otherwise line will be fuzzy in canvas.
- var doubledPosition = round(position * 2);
- return (doubledPosition + round(lineWidth)) % 2 === 0
- ? doubledPosition / 2
- : (doubledPosition + (positiveOrNegative ? 1 : -1)) / 2;
-}
+export var subPixelOptimize = subPixelOptimizeUtil.subPixelOptimize;
+
function hasFillOrStroke(fillOrStroke) {
return fillOrStroke != null && fillOrStroke !== 'none';
diff --git a/test/markLine-subPixel.html b/test/markLine-subPixel.html
index 9fe69e8..ebdafb7 100644
--- a/test/markLine-subPixel.html
+++ b/test/markLine-subPixel.html
@@ -65,7 +65,6 @@ under the License.
chart.setOption({
title: {
text: 'When resize the window the width of two markLines should be same',
- subtext: '有点牛集团'
},
tooltip: {
trigger: 'axis'
@@ -73,6 +72,7 @@ under the License.
legend: {
data: ['预算收入', '实际收入']
},
+ animation: false,
toolbox: {
show: true,
feature: {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org