zrender.js 10 KB

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