Element.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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. * Drift element
  62. * @param {number} dx dx on the global space
  63. * @param {number} dy dy on the global space
  64. */
  65. drift: function (dx, dy) {
  66. switch (this.draggable) {
  67. case 'horizontal':
  68. dy = 0;
  69. break;
  70. case 'vertical':
  71. dx = 0;
  72. break;
  73. }
  74. var m = this.transform;
  75. if (!m) {
  76. m = this.transform = [1, 0, 0, 1, 0, 0];
  77. }
  78. m[4] += dx;
  79. m[5] += dy;
  80. this.decomposeTransform();
  81. this.dirty(false);
  82. },
  83. /**
  84. * Hook before update
  85. */
  86. beforeUpdate: function () {},
  87. /**
  88. * Hook after update
  89. */
  90. afterUpdate: function () {},
  91. /**
  92. * Update each frame
  93. */
  94. update: function () {
  95. this.updateTransform();
  96. },
  97. /**
  98. * @param {Function} cb
  99. * @param {} context
  100. */
  101. traverse: function (cb, context) {},
  102. /**
  103. * @protected
  104. */
  105. attrKV: function (key, value) {
  106. if (key === 'position' || key === 'scale' || key === 'origin') {
  107. // Copy the array
  108. if (value) {
  109. var target = this[key];
  110. if (!target) {
  111. target = this[key] = [];
  112. }
  113. target[0] = value[0];
  114. target[1] = value[1];
  115. }
  116. } else {
  117. this[key] = value;
  118. }
  119. },
  120. /**
  121. * Hide the element
  122. */
  123. hide: function () {
  124. this.ignore = true;
  125. this.__zr && this.__zr.refresh();
  126. },
  127. /**
  128. * Show the element
  129. */
  130. show: function () {
  131. this.ignore = false;
  132. this.__zr && this.__zr.refresh();
  133. },
  134. /**
  135. * @param {string|Object} key
  136. * @param {*} value
  137. */
  138. attr: function (key, value) {
  139. if (typeof key === 'string') {
  140. this.attrKV(key, value);
  141. } else if (zrUtil.isObject(key)) {
  142. for (var name in key) {
  143. if (key.hasOwnProperty(name)) {
  144. this.attrKV(name, key[name]);
  145. }
  146. }
  147. }
  148. this.dirty(false);
  149. return this;
  150. },
  151. /**
  152. * @param {module:zrender/graphic/Path} clipPath
  153. */
  154. setClipPath: function (clipPath) {
  155. var zr = this.__zr;
  156. if (zr) {
  157. clipPath.addSelfToZr(zr);
  158. } // Remove previous clip path
  159. if (this.clipPath && this.clipPath !== clipPath) {
  160. this.removeClipPath();
  161. }
  162. this.clipPath = clipPath;
  163. clipPath.__zr = zr;
  164. clipPath.__clipTarget = this;
  165. this.dirty(false);
  166. },
  167. /**
  168. */
  169. removeClipPath: function () {
  170. var clipPath = this.clipPath;
  171. if (clipPath) {
  172. if (clipPath.__zr) {
  173. clipPath.removeSelfFromZr(clipPath.__zr);
  174. }
  175. clipPath.__zr = null;
  176. clipPath.__clipTarget = null;
  177. this.clipPath = null;
  178. this.dirty(false);
  179. }
  180. },
  181. /**
  182. * Add self from zrender instance.
  183. * Not recursively because it will be invoked when element added to storage.
  184. * @param {module:zrender/ZRender} zr
  185. */
  186. addSelfToZr: function (zr) {
  187. this.__zr = zr; // 添加动画
  188. var animators = this.animators;
  189. if (animators) {
  190. for (var i = 0; i < animators.length; i++) {
  191. zr.animation.addAnimator(animators[i]);
  192. }
  193. }
  194. if (this.clipPath) {
  195. this.clipPath.addSelfToZr(zr);
  196. }
  197. },
  198. /**
  199. * Remove self from zrender instance.
  200. * Not recursively because it will be invoked when element added to storage.
  201. * @param {module:zrender/ZRender} zr
  202. */
  203. removeSelfFromZr: function (zr) {
  204. this.__zr = null; // 移除动画
  205. var animators = this.animators;
  206. if (animators) {
  207. for (var i = 0; i < animators.length; i++) {
  208. zr.animation.removeAnimator(animators[i]);
  209. }
  210. }
  211. if (this.clipPath) {
  212. this.clipPath.removeSelfFromZr(zr);
  213. }
  214. }
  215. };
  216. zrUtil.mixin(Element, Animatable);
  217. zrUtil.mixin(Element, Transformable);
  218. zrUtil.mixin(Element, Eventful);
  219. var _default = Element;
  220. module.exports = _default;