This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch feature/clip
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/feature/clip by this push:
new 755787f fix: fix scatter clipping on polar
755787f is described below
commit 755787f72f8d342736c156b86c93f9c2787446a7
Author: pissang <bm2736...@gmail.com>
AuthorDate: Tue Sep 17 13:05:03 2019 +0800
fix: fix scatter clipping on polar
---
src/chart/helper/LargeSymbolDraw.js | 22 +++++--
src/chart/scatter/ScatterView.js | 14 +++--
src/coord/polar/Polar.js | 27 +++++---
test/clip.html | 122 +++++++++++++++++++++++++++---------
4 files changed, 138 insertions(+), 47 deletions(-)
diff --git a/src/chart/helper/LargeSymbolDraw.js
b/src/chart/helper/LargeSymbolDraw.js
index a5ad194..8db5332 100644
--- a/src/chart/helper/LargeSymbolDraw.js
+++ b/src/chart/helper/LargeSymbolDraw.js
@@ -35,6 +35,8 @@ var LargeSymbolPath = graphic.extendShape({
symbolProxy: null,
+ softClipShape: null,
+
buildPath: function (path, shape) {
var points = shape.points;
var size = shape.size;
@@ -56,6 +58,9 @@ var LargeSymbolPath = graphic.extendShape({
if (isNaN(x) || isNaN(y)) {
continue;
}
+ if (this.softClipShape && !this.softClipShape.contain(x, y)) {
+ continue;
+ }
symbolProxyShape.x = x - size[0] / 2;
symbolProxyShape.y = y - size[1] / 2;
@@ -84,6 +89,9 @@ var LargeSymbolPath = graphic.extendShape({
if (isNaN(x) || isNaN(y)) {
continue;
}
+ if (this.softClipShape && !this.softClipShape.contain(x, y)) {
+ continue;
+ }
// fillRect is faster than building a rect path and draw.
// And it support light globalCompositeOperation.
ctx.fillRect(
@@ -135,8 +143,10 @@ largeSymbolProto.isPersistent = function () {
/**
* Update symbols draw by new data
* @param {module:echarts/data/List} data
+ * @param {Object} opt
+ * @param {Object} [opt.clipShape]
*/
-largeSymbolProto.updateData = function (data) {
+largeSymbolProto.updateData = function (data, opt) {
this.group.removeAll();
var symbolEl = new LargeSymbolPath({
rectHover: true,
@@ -146,7 +156,7 @@ largeSymbolProto.updateData = function (data) {
symbolEl.setShape({
points: data.getLayout('symbolPoints')
});
- this._setCommon(symbolEl, data);
+ this._setCommon(symbolEl, data, false, opt);
this.group.add(symbolEl);
this._incremental = null;
@@ -187,7 +197,7 @@ largeSymbolProto.incrementalPrepareUpdate = function (data)
{
}
};
-largeSymbolProto.incrementalUpdate = function (taskParams, data) {
+largeSymbolProto.incrementalUpdate = function (taskParams, data, opt) {
var symbolEl;
if (this._incremental) {
symbolEl = new LargeSymbolPath();
@@ -207,12 +217,13 @@ largeSymbolProto.incrementalUpdate = function
(taskParams, data) {
symbolEl.setShape({
points: data.getLayout('symbolPoints')
});
- this._setCommon(symbolEl, data, !!this._incremental);
+ this._setCommon(symbolEl, data, !!this._incremental, opt);
};
-largeSymbolProto._setCommon = function (symbolEl, data, isIncremental) {
+largeSymbolProto._setCommon = function (symbolEl, data, isIncremental, opt) {
var hostModel = data.hostModel;
+ opt = opt || {};
// TODO
// if (data.hasItemVisual.symbolSize) {
// // TODO typed array?
@@ -228,6 +239,7 @@ largeSymbolProto._setCommon = function (symbolEl, data,
isIncremental) {
symbolEl.setShape('size', (size instanceof Array) ? size : [size, size]);
// }
+ symbolEl.softClipShape = opt.clipShape || null;
// Create symbolProxy to build path for each data
symbolEl.symbolProxy = createSymbol(
data.getVisual('symbol'), 0, 0, 0, 0
diff --git a/src/chart/scatter/ScatterView.js b/src/chart/scatter/ScatterView.js
index 6c24bf2..0dd16a1 100644
--- a/src/chart/scatter/ScatterView.js
+++ b/src/chart/scatter/ScatterView.js
@@ -29,8 +29,6 @@ echarts.extendChartView({
render: function (seriesModel, ecModel, api) {
var data = seriesModel.getData();
- var coordSys = seriesModel.coordinateSystem;
- var clipArea = coordSys && coordSys.getArea && coordSys.getArea();
var symbolDraw = this._updateSymbolDraw(data, seriesModel);
@@ -39,7 +37,7 @@ echarts.extendChartView({
// If this parameter should be a shape or a bounding volume
// shape will be more general.
// But bounding volume like bounding rect will be much faster in
the contain calculation
- clipShape: seriesModel.get('clip') ? clipArea : null
+ clipShape: this._getClipShape(seriesModel)
});
this._finished = true;
@@ -55,7 +53,9 @@ echarts.extendChartView({
},
incrementalRender: function (taskParams, seriesModel, ecModel) {
- this._symbolDraw.incrementalUpdate(taskParams, seriesModel.getData());
+ this._symbolDraw.incrementalUpdate(taskParams, seriesModel.getData(), {
+ clipShape: this._getClipShape(seriesModel)
+ });
this._finished = taskParams.end === seriesModel.getData().count();
},
@@ -81,6 +81,12 @@ echarts.extendChartView({
}
},
+ _getClipShape: function (seriesModel) {
+ var coordSys = seriesModel.coordinateSystem;
+ var clipArea = coordSys && coordSys.getArea && coordSys.getArea();
+ return seriesModel.get('clip') ? clipArea : null;
+ },
+
_updateSymbolDraw: function (data, seriesModel) {
var symbolDraw = this._symbolDraw;
var pipelineContext = seriesModel.pipelineContext;
diff --git a/src/coord/polar/Polar.js b/src/coord/polar/Polar.js
index 0f11e58..7185b0f 100644
--- a/src/coord/polar/Polar.js
+++ b/src/coord/polar/Polar.js
@@ -257,9 +257,9 @@ Polar.prototype = {
},
/**
- * Get sector area of cartesian.
+ * Get ring area of cartesian.
* Area will have a contain function to determine if a point is in the
coordinate system.
- * @return {Sector}
+ * @return {Ring}
*/
getArea: function () {
@@ -272,19 +272,26 @@ Polar.prototype = {
var RADIAN = Math.PI / 180;
- var pt = [0, 0];
+ var cx = this.cx;
+ var cy = this.cy;
+ var r = radiusExtent[1];
+ var r0 = radiusExtent[0];
return {
- cx: this.cx,
- cy: this.cy,
- r0: radiusExtent[0],
- r: radiusExtent[1],
+ cx: cx,
+ cy: cy,
+ r0: r0,
+ r: r,
startAngle: -angleExtent[0] * RADIAN,
endAngle: -angleExtent[1] * RADIAN,
clockwise: angleAxis.inverse,
contain: function (x, y) {
- pt[0] = x;
- pt[1] = y;
- return this.containPoint(pt);
+ // It's a ring shape.
+ // Start angle and end angle don't matter
+ var dx = x - cx;
+ var dy = y - cy;
+ var d2 = dx * dx + dy * dy;
+
+ return d2 <= r * r && d2 >= r0 * r0;
}
};
}
diff --git a/test/clip.html b/test/clip.html
index 062662f..a0fb68b 100644
--- a/test/clip.html
+++ b/test/clip.html
@@ -43,15 +43,11 @@ under the License.
}
</style>
- <h1>Scatter Clip on Cartesian</h1>
<div class="chart" id="scatter-clip-cartesian"></div>
- <h1>Scatter Clip on Polar</h1>
<div class="chart" id="scatter-clip-polar"></div>
- <h1>Large Scatter Clip</h1>
+ <!-- <h1>Scatter Clip with Incremental Rendering</h1>
+ <div class="chart" id="scatter-clip-incremental"></div> -->
<div class="chart" id="large-scatter-clip"></div>
- <h1>Scatter Clip on Cartesian with DataZoom</h1>
- <div class="chart" id="scatter-clip-cartesian"></div>
- <h1>Scatter Clip on Polar with DataZoom</h1>
<div class="chart" id="scatter-clip-polar"></div>
<h1>Lines</h1>
@@ -104,6 +100,7 @@ under the License.
}]
};
var chart = testHelper.create(echarts,
'scatter-clip-cartesian', {
+ title: 'Scatter Clip on Cartesian',
option: option,
height: 400,
buttons: makeToggleChartButtons(function (clip) {
@@ -125,31 +122,34 @@ under the License.
require([
'echarts'
], function (echarts) {
+ var data1 = [];
+
+ for (var i = 0; i < 100; i++) {
+ data1.push([Math.random() * 10, Math.random() * 360]);
+ }
+
var option = {
- xAxis: {},
- yAxis: {
- min: 5,
- max: 10
+ polar: {},
+ angleAxis: {
+ type: 'value',
+ min: 50,
+ max: 180
+ },
+ radiusAxis: {
+ axisAngle: 0,
+ min: 0,
+ max: 5
},
series: [{
- symbolSize: 20,
- data: [
- [10.0, 8.04],
- [8.0, 6.95],
- [13.0, 7.58],
- [9.0, 8.81],
- [11.0, 8.33],
- [14.0, 9.96],
- [6.0, 7.24],
- [4.0, 4.26],
- [12.0, 10.84],
- [7.0, 4.82],
- [5.0, 5.68]
- ],
- type: 'scatter'
+ coordinateSystem: 'polar',
+ name: 'scatter',
+ type: 'scatter',
+ symbolSize: 10,
+ data: data1
}]
};
- var chart = testHelper.create(echarts,
'scatter-clip-cartesian', {
+ var chart = testHelper.create(echarts, 'scatter-clip-polar', {
+ title: 'Scatter Clip on Polar',
option: option,
height: 400,
buttons: makeToggleChartButtons(function (clip) {
@@ -168,8 +168,74 @@ under the License.
require([
'echarts'
], function (echarts) {
-
- // testHelper.createChart(echarts, 'zoom-shift', option);
+ // Standard Normal variate using Box-Muller transform.
+ function rand() {
+ var u = 0, v = 0;
+ while(u === 0) u = Math.random(); //Converting [0,1) to
(0,1)
+ while(v === 0) v = Math.random();
+ return Math.sqrt(-2.0 * Math.log( u )) * Math.cos(2.0 *
Math.PI * v);
+ }
+
+ var data = [];
+
+ for (let i = 0; i < 1e4; i++) {
+ data.push([
+ rand(),
+ rand()
+ ]);
+ }
+ var option = {
+ xAxis: {
+ type: 'value',
+ min: -2,
+ max: 2
+ },
+ yAxis: {
+ type: 'value',
+ min: -2,
+ max: 2
+ },
+ series: [{
+ symbolSize: 2,
+ large: true,
+ data: data,
+ symbol: 'rect',
+ type: 'scatter'
+ }]
+ };
+ var chart = testHelper.create(echarts, 'large-scatter-clip', {
+ title: 'Large Scatter Clip',
+ option: option,
+ height: 400,
+ buttons: makeToggleChartButtons(function (clip) {
+ chart.setOption({
+ series: [{
+ clip: clip
+ }]
+ })
+ }).concat([{
+ text: 'Set Large',
+ onclick: function () {
+ chart.setOption({
+ series: [{
+ large: true,
+ progressive: 0
+ }]
+ })
+ }
+ }, {
+ text: 'Set Stream',
+ onclick: function () {
+ chart.setOption({
+ series: [{
+ large: false,
+ progressive: 2000
+ }]
+ })
+ }
+
+ }])
+ });
})
</script>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
