zrender.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. /*!
  2. * ZRender, a high performance 2d drawing library.
  3. *
  4. * Copyright (c) 2013, Baidu Inc.
  5. * All rights reserved.
  6. *
  7. * LICENSE
  8. * https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
  9. */
  10. import guid from './core/guid';
  11. import env from './core/env';
  12. import * as zrUtil from './core/util';
  13. import Handler from './Handler';
  14. import Storage from './Storage';
  15. import Painter from './Painter';
  16. import Animation from './animation/Animation';
  17. import HandlerProxy from './dom/HandlerProxy';
  18. var useVML = !env.canvasSupported;
  19. var painterCtors = {
  20. canvas: Painter
  21. };
  22. var instances = {}; // ZRender实例map索引
  23. /**
  24. * @type {string}
  25. */
  26. export var version = '4.3.2';
  27. /**
  28. * Initializing a zrender instance
  29. * @param {HTMLElement} dom
  30. * @param {Object} [opts]
  31. * @param {string} [opts.renderer='canvas'] 'canvas' or 'svg'
  32. * @param {number} [opts.devicePixelRatio]
  33. * @param {number|string} [opts.width] Can be 'auto' (the same as null/undefined)
  34. * @param {number|string} [opts.height] Can be 'auto' (the same as null/undefined)
  35. * @return {module:zrender/ZRender}
  36. */
  37. export function init(dom, opts) {
  38. var zr = new ZRender(guid(), dom, opts);
  39. instances[zr.id] = zr;
  40. return zr;
  41. }
  42. /**
  43. * Dispose zrender instance
  44. * @param {module:zrender/ZRender} zr
  45. */
  46. export function dispose(zr) {
  47. if (zr) {
  48. zr.dispose();
  49. }
  50. else {
  51. for (var key in instances) {
  52. if (instances.hasOwnProperty(key)) {
  53. instances[key].dispose();
  54. }
  55. }
  56. instances = {};
  57. }
  58. return this;
  59. }
  60. /**
  61. * Get zrender instance by id
  62. * @param {string} id zrender instance id
  63. * @return {module:zrender/ZRender}
  64. */
  65. export function getInstance(id) {
  66. return instances[id];
  67. }
  68. export function registerPainter(name, Ctor) {
  69. painterCtors[name] = Ctor;
  70. }
  71. function delInstance(id) {
  72. delete instances[id];
  73. }
  74. /**
  75. * @module zrender/ZRender
  76. */
  77. /**
  78. * @constructor
  79. * @alias module:zrender/ZRender
  80. * @param {string} id
  81. * @param {HTMLElement} dom
  82. * @param {Object} opts
  83. * @param {string} [opts.renderer='canvas'] 'canvas' or 'svg'
  84. * @param {number} [opts.devicePixelRatio]
  85. * @param {number} [opts.width] Can be 'auto' (the same as null/undefined)
  86. * @param {number} [opts.height] Can be 'auto' (the same as null/undefined)
  87. */
  88. var ZRender = function (id, dom, opts) {
  89. opts = opts || {};
  90. /**
  91. * @type {HTMLDomElement}
  92. */
  93. this.dom = dom;
  94. /**
  95. * @type {string}
  96. */
  97. this.id = id;
  98. var self = this;
  99. var storage = new Storage();
  100. var rendererType = opts.renderer;
  101. // TODO WebGL
  102. if (useVML) {
  103. if (!painterCtors.vml) {
  104. throw new Error('You need to require \'zrender/vml/vml\' to support IE8');
  105. }
  106. rendererType = 'vml';
  107. }
  108. else if (!rendererType || !painterCtors[rendererType]) {
  109. rendererType = 'canvas';
  110. }
  111. var painter = new painterCtors[rendererType](dom, storage, opts, id);
  112. this.storage = storage;
  113. this.painter = painter;
  114. var handerProxy = (!env.node && !env.worker) ? new HandlerProxy(painter.getViewportRoot(), painter.root) : null;
  115. this.handler = new Handler(storage, painter, handerProxy, painter.root);
  116. /**
  117. * @type {module:zrender/animation/Animation}
  118. */
  119. this.animation = new Animation({
  120. stage: {
  121. update: zrUtil.bind(this.flush, this)
  122. }
  123. });
  124. this.animation.start();
  125. /**
  126. * @type {boolean}
  127. * @private
  128. */
  129. this._needsRefresh;
  130. // 修改 storage.delFromStorage, 每次删除元素之前删除动画
  131. // FIXME 有点ugly
  132. var oldDelFromStorage = storage.delFromStorage;
  133. var oldAddToStorage = storage.addToStorage;
  134. storage.delFromStorage = function (el) {
  135. oldDelFromStorage.call(storage, el);
  136. el && el.removeSelfFromZr(self);
  137. };
  138. storage.addToStorage = function (el) {
  139. oldAddToStorage.call(storage, el);
  140. el.addSelfToZr(self);
  141. };
  142. };
  143. ZRender.prototype = {
  144. constructor: ZRender,
  145. /**
  146. * 获取实例唯一标识
  147. * @return {string}
  148. */
  149. getId: function () {
  150. return this.id;
  151. },
  152. /**
  153. * 添加元素
  154. * @param {module:zrender/Element} el
  155. */
  156. add: function (el) {
  157. this.storage.addRoot(el);
  158. this._needsRefresh = true;
  159. },
  160. /**
  161. * 删除元素
  162. * @param {module:zrender/Element} el
  163. */
  164. remove: function (el) {
  165. this.storage.delRoot(el);
  166. this._needsRefresh = true;
  167. },
  168. /**
  169. * Change configuration of layer
  170. * @param {string} zLevel
  171. * @param {Object} config
  172. * @param {string} [config.clearColor=0] Clear color
  173. * @param {string} [config.motionBlur=false] If enable motion blur
  174. * @param {number} [config.lastFrameAlpha=0.7] Motion blur factor. Larger value cause longer trailer
  175. */
  176. configLayer: function (zLevel, config) {
  177. if (this.painter.configLayer) {
  178. this.painter.configLayer(zLevel, config);
  179. }
  180. this._needsRefresh = true;
  181. },
  182. /**
  183. * Set background color
  184. * @param {string} backgroundColor
  185. */
  186. setBackgroundColor: function (backgroundColor) {
  187. if (this.painter.setBackgroundColor) {
  188. this.painter.setBackgroundColor(backgroundColor);
  189. }
  190. this._needsRefresh = true;
  191. },
  192. /**
  193. * Repaint the canvas immediately
  194. */
  195. refreshImmediately: function () {
  196. // var start = new Date();
  197. // Clear needsRefresh ahead to avoid something wrong happens in refresh
  198. // Or it will cause zrender refreshes again and again.
  199. this._needsRefresh = this._needsRefreshHover = false;
  200. this.painter.refresh();
  201. // Avoid trigger zr.refresh in Element#beforeUpdate hook
  202. this._needsRefresh = this._needsRefreshHover = false;
  203. // var end = new Date();
  204. // var log = document.getElementById('log');
  205. // if (log) {
  206. // log.innerHTML = log.innerHTML + '<br>' + (end - start);
  207. // }
  208. },
  209. /**
  210. * Mark and repaint the canvas in the next frame of browser
  211. */
  212. refresh: function () {
  213. this._needsRefresh = true;
  214. },
  215. /**
  216. * Perform all refresh
  217. */
  218. flush: function () {
  219. var triggerRendered;
  220. if (this._needsRefresh) {
  221. triggerRendered = true;
  222. this.refreshImmediately();
  223. }
  224. if (this._needsRefreshHover) {
  225. triggerRendered = true;
  226. this.refreshHoverImmediately();
  227. }
  228. triggerRendered && this.trigger('rendered');
  229. },
  230. /**
  231. * Add element to hover layer
  232. * @param {module:zrender/Element} el
  233. * @param {Object} style
  234. */
  235. addHover: function (el, style) {
  236. if (this.painter.addHover) {
  237. var elMirror = this.painter.addHover(el, style);
  238. this.refreshHover();
  239. return elMirror;
  240. }
  241. },
  242. /**
  243. * Add element from hover layer
  244. * @param {module:zrender/Element} el
  245. */
  246. removeHover: function (el) {
  247. if (this.painter.removeHover) {
  248. this.painter.removeHover(el);
  249. this.refreshHover();
  250. }
  251. },
  252. /**
  253. * Clear all hover elements in hover layer
  254. * @param {module:zrender/Element} el
  255. */
  256. clearHover: function () {
  257. if (this.painter.clearHover) {
  258. this.painter.clearHover();
  259. this.refreshHover();
  260. }
  261. },
  262. /**
  263. * Refresh hover in next frame
  264. */
  265. refreshHover: function () {
  266. this._needsRefreshHover = true;
  267. },
  268. /**
  269. * Refresh hover immediately
  270. */
  271. refreshHoverImmediately: function () {
  272. this._needsRefreshHover = false;
  273. this.painter.refreshHover && this.painter.refreshHover();
  274. },
  275. /**
  276. * Resize the canvas.
  277. * Should be invoked when container size is changed
  278. * @param {Object} [opts]
  279. * @param {number|string} [opts.width] Can be 'auto' (the same as null/undefined)
  280. * @param {number|string} [opts.height] Can be 'auto' (the same as null/undefined)
  281. */
  282. resize: function (opts) {
  283. opts = opts || {};
  284. this.painter.resize(opts.width, opts.height);
  285. this.handler.resize();
  286. },
  287. /**
  288. * Stop and clear all animation immediately
  289. */
  290. clearAnimation: function () {
  291. this.animation.clear();
  292. },
  293. /**
  294. * Get container width
  295. */
  296. getWidth: function () {
  297. return this.painter.getWidth();
  298. },
  299. /**
  300. * Get container height
  301. */
  302. getHeight: function () {
  303. return this.painter.getHeight();
  304. },
  305. /**
  306. * Export the canvas as Base64 URL
  307. * @param {string} type
  308. * @param {string} [backgroundColor='#fff']
  309. * @return {string} Base64 URL
  310. */
  311. // toDataURL: function(type, backgroundColor) {
  312. // return this.painter.getRenderedCanvas({
  313. // backgroundColor: backgroundColor
  314. // }).toDataURL(type);
  315. // },
  316. /**
  317. * Converting a path to image.
  318. * It has much better performance of drawing image rather than drawing a vector path.
  319. * @param {module:zrender/graphic/Path} e
  320. * @param {number} width
  321. * @param {number} height
  322. */
  323. pathToImage: function (e, dpr) {
  324. return this.painter.pathToImage(e, dpr);
  325. },
  326. /**
  327. * Set default cursor
  328. * @param {string} [cursorStyle='default'] 例如 crosshair
  329. */
  330. setCursorStyle: function (cursorStyle) {
  331. this.handler.setCursorStyle(cursorStyle);
  332. },
  333. /**
  334. * Find hovered element
  335. * @param {number} x
  336. * @param {number} y
  337. * @return {Object} {target, topTarget}
  338. */
  339. findHover: function (x, y) {
  340. return this.handler.findHover(x, y);
  341. },
  342. /**
  343. * Bind event
  344. *
  345. * @param {string} eventName Event name
  346. * @param {Function} eventHandler Handler function
  347. * @param {Object} [context] Context object
  348. */
  349. on: function (eventName, eventHandler, context) {
  350. this.handler.on(eventName, eventHandler, context);
  351. },
  352. /**
  353. * Unbind event
  354. * @param {string} eventName Event name
  355. * @param {Function} [eventHandler] Handler function
  356. */
  357. off: function (eventName, eventHandler) {
  358. this.handler.off(eventName, eventHandler);
  359. },
  360. /**
  361. * Trigger event manually
  362. *
  363. * @param {string} eventName Event name
  364. * @param {event=} event Event object
  365. */
  366. trigger: function (eventName, event) {
  367. this.handler.trigger(eventName, event);
  368. },
  369. /**
  370. * Clear all objects and the canvas.
  371. */
  372. clear: function () {
  373. this.storage.delRoot();
  374. this.painter.clear();
  375. },
  376. /**
  377. * Dispose self.
  378. */
  379. dispose: function () {
  380. this.animation.stop();
  381. this.clear();
  382. this.storage.dispose();
  383. this.painter.dispose();
  384. this.handler.dispose();
  385. this.animation =
  386. this.storage =
  387. this.painter =
  388. this.handler = null;
  389. delInstance(this.id);
  390. }
  391. };