element.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. import { mix, isObject, isArray, Array } from '../../util/common';
  2. import MatrixUtil from '../util/matrix';
  3. import Vector2 from '../util/vector2';
  4. import { parseStyle } from '../util/style-parse';
  5. var ALIAS_ATTRS_MAP = {
  6. stroke: 'strokeStyle',
  7. fill: 'fillStyle',
  8. opacity: 'globalAlpha'
  9. };
  10. var SHAPE_ATTRS = ['fillStyle', 'font', 'globalAlpha', 'lineCap', 'lineWidth', 'lineJoin', 'miterLimit', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'strokeStyle', 'textAlign', 'textBaseline', 'lineDash', 'shadow' // 兼容支付宝小程序
  11. ];
  12. var CLIP_SHAPES = ['circle', 'sector', 'polygon', 'rect', 'polyline'];
  13. class Element {
  14. _initProperties() {
  15. this._attrs = {
  16. zIndex: 0,
  17. visible: true,
  18. destroyed: false
  19. };
  20. }
  21. constructor(cfg) {
  22. this._initProperties();
  23. mix(this._attrs, cfg);
  24. var attrs = this._attrs.attrs;
  25. if (attrs) {
  26. this.initAttrs(attrs);
  27. }
  28. this.initTransform();
  29. }
  30. get(name) {
  31. return this._attrs[name];
  32. }
  33. set(name, value) {
  34. this._attrs[name] = value;
  35. }
  36. isGroup() {
  37. return this.get('isGroup');
  38. }
  39. isShape() {
  40. return this.get('isShape');
  41. }
  42. initAttrs(attrs) {
  43. this.attr(mix(this.getDefaultAttrs(), attrs));
  44. }
  45. getDefaultAttrs() {
  46. return {};
  47. }
  48. _setAttr(name, value) {
  49. var attrs = this._attrs.attrs;
  50. if (name === 'clip') {
  51. value = this._setAttrClip(value);
  52. } else {
  53. var alias = ALIAS_ATTRS_MAP[name];
  54. if (alias) {
  55. attrs[alias] = value;
  56. }
  57. }
  58. attrs[name] = value;
  59. }
  60. _getAttr(name) {
  61. return this._attrs.attrs[name];
  62. } // _afterAttrsSet() {}
  63. _setAttrClip(clip) {
  64. if (clip && CLIP_SHAPES.indexOf(clip._attrs.type) > -1) {
  65. if (clip.get('canvas') === null) {
  66. clip = Object.assign({}, clip);
  67. }
  68. clip.set('parent', this.get('parent'));
  69. clip.set('context', this.get('context'));
  70. return clip;
  71. }
  72. return null;
  73. }
  74. attr(name, value) {
  75. var self = this;
  76. if (self.get('destroyed')) return null;
  77. var argumentsLen = arguments.length;
  78. if (argumentsLen === 0) {
  79. return self._attrs.attrs;
  80. }
  81. if (isObject(name)) {
  82. this._attrs.bbox = null;
  83. for (var k in name) {
  84. self._setAttr(k, name[k]);
  85. }
  86. if (self._afterAttrsSet) {
  87. self._afterAttrsSet();
  88. }
  89. return self;
  90. }
  91. if (argumentsLen === 2) {
  92. this._attrs.bbox = null;
  93. self._setAttr(name, value);
  94. if (self._afterAttrsSet) {
  95. self._afterAttrsSet();
  96. }
  97. return self;
  98. }
  99. return self._getAttr(name);
  100. }
  101. getParent() {
  102. return this.get('parent');
  103. }
  104. draw(context) {
  105. if (this.get('destroyed')) {
  106. return;
  107. }
  108. if (this.get('visible')) {
  109. this.setContext(context);
  110. this.drawInner(context);
  111. this.restoreContext(context);
  112. }
  113. }
  114. setContext(context) {
  115. var clip = this._attrs.attrs.clip;
  116. context.save();
  117. if (clip) {
  118. clip.resetTransform(context);
  119. clip.createPath(context);
  120. context.clip();
  121. }
  122. this.resetContext(context);
  123. this.resetTransform(context);
  124. }
  125. restoreContext(context) {
  126. context.restore();
  127. }
  128. resetContext(context) {
  129. var elAttrs = this._attrs.attrs;
  130. for (var k in elAttrs) {
  131. if (SHAPE_ATTRS.indexOf(k) > -1) {
  132. var v = elAttrs[k];
  133. if ((k === 'fillStyle' || k === 'strokeStyle') && v) {
  134. v = parseStyle(v, this, context);
  135. }
  136. if (k === 'lineDash' && context.setLineDash && isArray(v)) {
  137. context.setLineDash(v);
  138. } else {
  139. context[k] = v;
  140. }
  141. }
  142. }
  143. }
  144. hasFill() {
  145. return this.get('canFill') && this._attrs.attrs.fillStyle;
  146. }
  147. hasStroke() {
  148. return this.get('canStroke') && this._attrs.attrs.strokeStyle;
  149. }
  150. drawInner()
  151. /* context */
  152. {}
  153. show() {
  154. this.set('visible', true);
  155. return this;
  156. }
  157. hide() {
  158. this.set('visible', false);
  159. return this;
  160. }
  161. isVisible() {
  162. return this.get('visible');
  163. }
  164. getAriaLabel() {
  165. var {
  166. destroyed,
  167. visible,
  168. isShape,
  169. aria
  170. } = this._attrs;
  171. if (destroyed || !visible || isShape && !aria) {
  172. return;
  173. }
  174. return this._getAriaLabel();
  175. }
  176. _getAriaLabel() {
  177. return this._attrs.ariaLabel;
  178. }
  179. _removeFromParent() {
  180. var parent = this.get('parent');
  181. if (parent) {
  182. var children = parent.get('children');
  183. Array.remove(children, this);
  184. }
  185. return this;
  186. }
  187. remove(destroy) {
  188. if (destroy) {
  189. this.destroy();
  190. } else {
  191. this._removeFromParent();
  192. }
  193. }
  194. destroy() {
  195. var destroyed = this.get('destroyed');
  196. if (destroyed) {
  197. return null;
  198. }
  199. this._removeFromParent();
  200. this._attrs = {};
  201. this.set('destroyed', true);
  202. }
  203. getBBox() {
  204. return {
  205. minX: 0,
  206. maxX: 0,
  207. minY: 0,
  208. maxY: 0,
  209. width: 0,
  210. height: 0
  211. };
  212. }
  213. initTransform() {
  214. var attrs = this._attrs.attrs || {};
  215. if (!attrs.matrix) {
  216. attrs.matrix = [1, 0, 0, 1, 0, 0];
  217. }
  218. this._attrs.attrs = attrs;
  219. }
  220. getMatrix() {
  221. return this._attrs.attrs.matrix;
  222. }
  223. setMatrix(m) {
  224. this._attrs.attrs.matrix = [m[0], m[1], m[2], m[3], m[4], m[5]];
  225. }
  226. transform(actions) {
  227. var matrix = this._attrs.attrs.matrix;
  228. this._attrs.attrs.matrix = MatrixUtil.transform(matrix, actions);
  229. return this;
  230. }
  231. setTransform(actions) {
  232. this._attrs.attrs.matrix = [1, 0, 0, 1, 0, 0];
  233. return this.transform(actions);
  234. }
  235. translate(x, y) {
  236. var matrix = this._attrs.attrs.matrix;
  237. MatrixUtil.translate(matrix, matrix, [x, y]);
  238. }
  239. rotate(rad) {
  240. var matrix = this._attrs.attrs.matrix;
  241. MatrixUtil.rotate(matrix, matrix, rad);
  242. }
  243. scale(sx, sy) {
  244. var matrix = this._attrs.attrs.matrix;
  245. MatrixUtil.scale(matrix, matrix, [sx, sy]);
  246. }
  247. moveTo(x, y) {
  248. var cx = this._attrs.x || 0;
  249. var cy = this._attrs.y || 0;
  250. this.translate(x - cx, y - cy);
  251. this.set('x', x);
  252. this.set('y', y);
  253. }
  254. apply(v) {
  255. var m = this._attrs.attrs.matrix;
  256. Vector2.transformMat2d(v, v, m);
  257. return this;
  258. }
  259. resetTransform(context) {
  260. var mo = this._attrs.attrs.matrix;
  261. if (MatrixUtil.isChanged(mo)) {
  262. context.transform(mo[0], mo[1], mo[2], mo[3], mo[4], mo[5]);
  263. }
  264. }
  265. isDestroyed() {
  266. return this.get('destroyed');
  267. }
  268. }
  269. export default Element;