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