Element.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. import guid from './core/guid';
  2. import Eventful from './mixin/Eventful';
  3. import Transformable from './mixin/Transformable';
  4. import Animatable from './mixin/Animatable';
  5. import * as zrUtil from './core/util';
  6. /**
  7. * @alias module:zrender/Element
  8. * @constructor
  9. * @extends {module:zrender/mixin/Animatable}
  10. * @extends {module:zrender/mixin/Transformable}
  11. * @extends {module:zrender/mixin/Eventful}
  12. */
  13. var Element = function (opts) { // jshint ignore:line
  14. Transformable.call(this, opts);
  15. Eventful.call(this, opts);
  16. Animatable.call(this, opts);
  17. /**
  18. * 画布元素ID
  19. * @type {string}
  20. */
  21. this.id = opts.id || guid();
  22. };
  23. Element.prototype = {
  24. /**
  25. * 元素类型
  26. * Element type
  27. * @type {string}
  28. */
  29. type: 'element',
  30. /**
  31. * 元素名字
  32. * Element name
  33. * @type {string}
  34. */
  35. name: '',
  36. /**
  37. * ZRender 实例对象,会在 element 添加到 zrender 实例中后自动赋值
  38. * ZRender instance will be assigned when element is associated with zrender
  39. * @name module:/zrender/Element#__zr
  40. * @type {module:zrender/ZRender}
  41. */
  42. __zr: null,
  43. /**
  44. * 图形是否忽略,为true时忽略图形的绘制以及事件触发
  45. * If ignore drawing and events of the element object
  46. * @name module:/zrender/Element#ignore
  47. * @type {boolean}
  48. * @default false
  49. */
  50. ignore: false,
  51. /**
  52. * 用于裁剪的路径(shape),所有 Group 内的路径在绘制时都会被这个路径裁剪
  53. * 该路径会继承被裁减对象的变换
  54. * @type {module:zrender/graphic/Path}
  55. * @see http://www.w3.org/TR/2dcontext/#clipping-region
  56. * @readOnly
  57. */
  58. clipPath: null,
  59. /**
  60. * 是否是 Group
  61. * @type {boolean}
  62. */
  63. isGroup: false,
  64. /**
  65. * Drift element
  66. * @param {number} dx dx on the global space
  67. * @param {number} dy dy on the global space
  68. */
  69. drift: function (dx, dy) {
  70. switch (this.draggable) {
  71. case 'horizontal':
  72. dy = 0;
  73. break;
  74. case 'vertical':
  75. dx = 0;
  76. break;
  77. }
  78. var m = this.transform;
  79. if (!m) {
  80. m = this.transform = [1, 0, 0, 1, 0, 0];
  81. }
  82. m[4] += dx;
  83. m[5] += dy;
  84. this.decomposeTransform();
  85. this.dirty(false);
  86. },
  87. /**
  88. * Hook before update
  89. */
  90. beforeUpdate: function () {},
  91. /**
  92. * Hook after update
  93. */
  94. afterUpdate: function () {},
  95. /**
  96. * Update each frame
  97. */
  98. update: function () {
  99. this.updateTransform();
  100. },
  101. /**
  102. * @param {Function} cb
  103. * @param {} context
  104. */
  105. traverse: function (cb, context) {},
  106. /**
  107. * @protected
  108. */
  109. attrKV: function (key, value) {
  110. if (key === 'position' || key === 'scale' || key === 'origin') {
  111. // Copy the array
  112. if (value) {
  113. var target = this[key];
  114. if (!target) {
  115. target = this[key] = [];
  116. }
  117. target[0] = value[0];
  118. target[1] = value[1];
  119. }
  120. }
  121. else {
  122. this[key] = value;
  123. }
  124. },
  125. /**
  126. * Hide the element
  127. */
  128. hide: function () {
  129. this.ignore = true;
  130. this.__zr && this.__zr.refresh();
  131. },
  132. /**
  133. * Show the element
  134. */
  135. show: function () {
  136. this.ignore = false;
  137. this.__zr && this.__zr.refresh();
  138. },
  139. /**
  140. * @param {string|Object} key
  141. * @param {*} value
  142. */
  143. attr: function (key, value) {
  144. if (typeof key === 'string') {
  145. this.attrKV(key, value);
  146. }
  147. else if (zrUtil.isObject(key)) {
  148. for (var name in key) {
  149. if (key.hasOwnProperty(name)) {
  150. this.attrKV(name, key[name]);
  151. }
  152. }
  153. }
  154. this.dirty(false);
  155. return this;
  156. },
  157. /**
  158. * @param {module:zrender/graphic/Path} clipPath
  159. */
  160. setClipPath: function (clipPath) {
  161. var zr = this.__zr;
  162. if (zr) {
  163. clipPath.addSelfToZr(zr);
  164. }
  165. // Remove previous clip path
  166. if (this.clipPath && this.clipPath !== clipPath) {
  167. this.removeClipPath();
  168. }
  169. this.clipPath = clipPath;
  170. clipPath.__zr = zr;
  171. clipPath.__clipTarget = this;
  172. this.dirty(false);
  173. },
  174. /**
  175. */
  176. removeClipPath: function () {
  177. var clipPath = this.clipPath;
  178. if (clipPath) {
  179. if (clipPath.__zr) {
  180. clipPath.removeSelfFromZr(clipPath.__zr);
  181. }
  182. clipPath.__zr = null;
  183. clipPath.__clipTarget = null;
  184. this.clipPath = null;
  185. this.dirty(false);
  186. }
  187. },
  188. /**
  189. * Add self from zrender instance.
  190. * Not recursively because it will be invoked when element added to storage.
  191. * @param {module:zrender/ZRender} zr
  192. */
  193. addSelfToZr: function (zr) {
  194. this.__zr = zr;
  195. // 添加动画
  196. var animators = this.animators;
  197. if (animators) {
  198. for (var i = 0; i < animators.length; i++) {
  199. zr.animation.addAnimator(animators[i]);
  200. }
  201. }
  202. if (this.clipPath) {
  203. this.clipPath.addSelfToZr(zr);
  204. }
  205. },
  206. /**
  207. * Remove self from zrender instance.
  208. * Not recursively because it will be invoked when element added to storage.
  209. * @param {module:zrender/ZRender} zr
  210. */
  211. removeSelfFromZr: function (zr) {
  212. this.__zr = null;
  213. // 移除动画
  214. var animators = this.animators;
  215. if (animators) {
  216. for (var i = 0; i < animators.length; i++) {
  217. zr.animation.removeAnimator(animators[i]);
  218. }
  219. }
  220. if (this.clipPath) {
  221. this.clipPath.removeSelfFromZr(zr);
  222. }
  223. }
  224. };
  225. zrUtil.mixin(Element, Animatable);
  226. zrUtil.mixin(Element, Transformable);
  227. zrUtil.mixin(Element, Eventful);
  228. export default Element;