EffectLine.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var graphic = require("../../util/graphic");
  20. var Line = require("./Line");
  21. var zrUtil = require("zrender/lib/core/util");
  22. var _symbol = require("../../util/symbol");
  23. var createSymbol = _symbol.createSymbol;
  24. var vec2 = require("zrender/lib/core/vector");
  25. var curveUtil = require("zrender/lib/core/curve");
  26. /*
  27. * Licensed to the Apache Software Foundation (ASF) under one
  28. * or more contributor license agreements. See the NOTICE file
  29. * distributed with this work for additional information
  30. * regarding copyright ownership. The ASF licenses this file
  31. * to you under the Apache License, Version 2.0 (the
  32. * "License"); you may not use this file except in compliance
  33. * with the License. You may obtain a copy of the License at
  34. *
  35. * http://www.apache.org/licenses/LICENSE-2.0
  36. *
  37. * Unless required by applicable law or agreed to in writing,
  38. * software distributed under the License is distributed on an
  39. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  40. * KIND, either express or implied. See the License for the
  41. * specific language governing permissions and limitations
  42. * under the License.
  43. */
  44. /**
  45. * Provide effect for line
  46. * @module echarts/chart/helper/EffectLine
  47. */
  48. /**
  49. * @constructor
  50. * @extends {module:zrender/graphic/Group}
  51. * @alias {module:echarts/chart/helper/Line}
  52. */
  53. function EffectLine(lineData, idx, seriesScope) {
  54. graphic.Group.call(this);
  55. this.add(this.createLine(lineData, idx, seriesScope));
  56. this._updateEffectSymbol(lineData, idx);
  57. }
  58. var effectLineProto = EffectLine.prototype;
  59. effectLineProto.createLine = function (lineData, idx, seriesScope) {
  60. return new Line(lineData, idx, seriesScope);
  61. };
  62. effectLineProto._updateEffectSymbol = function (lineData, idx) {
  63. var itemModel = lineData.getItemModel(idx);
  64. var effectModel = itemModel.getModel('effect');
  65. var size = effectModel.get('symbolSize');
  66. var symbolType = effectModel.get('symbol');
  67. if (!zrUtil.isArray(size)) {
  68. size = [size, size];
  69. }
  70. var color = effectModel.get('color') || lineData.getItemVisual(idx, 'color');
  71. var symbol = this.childAt(1);
  72. if (this._symbolType !== symbolType) {
  73. // Remove previous
  74. this.remove(symbol);
  75. symbol = createSymbol(symbolType, -0.5, -0.5, 1, 1, color);
  76. symbol.z2 = 100;
  77. symbol.culling = true;
  78. this.add(symbol);
  79. } // Symbol may be removed if loop is false
  80. if (!symbol) {
  81. return;
  82. } // Shadow color is same with color in default
  83. symbol.setStyle('shadowColor', color);
  84. symbol.setStyle(effectModel.getItemStyle(['color']));
  85. symbol.attr('scale', size);
  86. symbol.setColor(color);
  87. symbol.attr('scale', size);
  88. this._symbolType = symbolType;
  89. this._symbolScale = size;
  90. this._updateEffectAnimation(lineData, effectModel, idx);
  91. };
  92. effectLineProto._updateEffectAnimation = function (lineData, effectModel, idx) {
  93. var symbol = this.childAt(1);
  94. if (!symbol) {
  95. return;
  96. }
  97. var self = this;
  98. var points = lineData.getItemLayout(idx);
  99. var period = effectModel.get('period') * 1000;
  100. var loop = effectModel.get('loop');
  101. var constantSpeed = effectModel.get('constantSpeed');
  102. var delayExpr = zrUtil.retrieve(effectModel.get('delay'), function (idx) {
  103. return idx / lineData.count() * period / 3;
  104. });
  105. var isDelayFunc = typeof delayExpr === 'function'; // Ignore when updating
  106. symbol.ignore = true;
  107. this.updateAnimationPoints(symbol, points);
  108. if (constantSpeed > 0) {
  109. period = this.getLineLength(symbol) / constantSpeed * 1000;
  110. }
  111. if (period !== this._period || loop !== this._loop) {
  112. symbol.stopAnimation();
  113. var delay = delayExpr;
  114. if (isDelayFunc) {
  115. delay = delayExpr(idx);
  116. }
  117. if (symbol.__t > 0) {
  118. delay = -period * symbol.__t;
  119. }
  120. symbol.__t = 0;
  121. var animator = symbol.animate('', loop).when(period, {
  122. __t: 1
  123. }).delay(delay).during(function () {
  124. self.updateSymbolPosition(symbol);
  125. });
  126. if (!loop) {
  127. animator.done(function () {
  128. self.remove(symbol);
  129. });
  130. }
  131. animator.start();
  132. }
  133. this._period = period;
  134. this._loop = loop;
  135. };
  136. effectLineProto.getLineLength = function (symbol) {
  137. // Not so accurate
  138. return vec2.dist(symbol.__p1, symbol.__cp1) + vec2.dist(symbol.__cp1, symbol.__p2);
  139. };
  140. effectLineProto.updateAnimationPoints = function (symbol, points) {
  141. symbol.__p1 = points[0];
  142. symbol.__p2 = points[1];
  143. symbol.__cp1 = points[2] || [(points[0][0] + points[1][0]) / 2, (points[0][1] + points[1][1]) / 2];
  144. };
  145. effectLineProto.updateData = function (lineData, idx, seriesScope) {
  146. this.childAt(0).updateData(lineData, idx, seriesScope);
  147. this._updateEffectSymbol(lineData, idx);
  148. };
  149. effectLineProto.updateSymbolPosition = function (symbol) {
  150. var p1 = symbol.__p1;
  151. var p2 = symbol.__p2;
  152. var cp1 = symbol.__cp1;
  153. var t = symbol.__t;
  154. var pos = symbol.position;
  155. var lastPos = [pos[0], pos[1]];
  156. var quadraticAt = curveUtil.quadraticAt;
  157. var quadraticDerivativeAt = curveUtil.quadraticDerivativeAt;
  158. pos[0] = quadraticAt(p1[0], cp1[0], p2[0], t);
  159. pos[1] = quadraticAt(p1[1], cp1[1], p2[1], t); // Tangent
  160. var tx = quadraticDerivativeAt(p1[0], cp1[0], p2[0], t);
  161. var ty = quadraticDerivativeAt(p1[1], cp1[1], p2[1], t);
  162. symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2; // enable continuity trail for 'line', 'rect', 'roundRect' symbolType
  163. if (this._symbolType === 'line' || this._symbolType === 'rect' || this._symbolType === 'roundRect') {
  164. if (symbol.__lastT !== undefined && symbol.__lastT < symbol.__t) {
  165. var scaleY = vec2.dist(lastPos, pos) * 1.05;
  166. symbol.attr('scale', [symbol.scale[0], scaleY]); // make sure the last segment render within endPoint
  167. if (t === 1) {
  168. pos[0] = lastPos[0] + (pos[0] - lastPos[0]) / 2;
  169. pos[1] = lastPos[1] + (pos[1] - lastPos[1]) / 2;
  170. }
  171. } else if (symbol.__lastT === 1) {
  172. // After first loop, symbol.__t does NOT start with 0, so connect p1 to pos directly.
  173. var scaleY = 2 * vec2.dist(p1, pos);
  174. symbol.attr('scale', [symbol.scale[0], scaleY]);
  175. } else {
  176. symbol.attr('scale', this._symbolScale);
  177. }
  178. }
  179. symbol.__lastT = symbol.__t;
  180. symbol.ignore = false;
  181. };
  182. effectLineProto.updateLayout = function (lineData, idx) {
  183. this.childAt(0).updateLayout(lineData, idx);
  184. var effectModel = lineData.getItemModel(idx).getModel('effect');
  185. this._updateEffectAnimation(lineData, effectModel, idx);
  186. };
  187. zrUtil.inherits(EffectLine, graphic.Group);
  188. var _default = EffectLine;
  189. module.exports = _default;