Element.js 5.3 KB

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