symbol.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. // Symbol factory
  41. import { each, isArray, retrieve2 } from 'zrender/lib/core/util.js';
  42. import * as graphic from './graphic.js';
  43. import BoundingRect from 'zrender/lib/core/BoundingRect.js';
  44. import { calculateTextPosition } from 'zrender/lib/contain/text.js';
  45. import { parsePercent } from './number.js';
  46. /**
  47. * Triangle shape
  48. * @inner
  49. */
  50. var Triangle = graphic.Path.extend({
  51. type: 'triangle',
  52. shape: {
  53. cx: 0,
  54. cy: 0,
  55. width: 0,
  56. height: 0
  57. },
  58. buildPath: function (path, shape) {
  59. var cx = shape.cx;
  60. var cy = shape.cy;
  61. var width = shape.width / 2;
  62. var height = shape.height / 2;
  63. path.moveTo(cx, cy - height);
  64. path.lineTo(cx + width, cy + height);
  65. path.lineTo(cx - width, cy + height);
  66. path.closePath();
  67. }
  68. });
  69. /**
  70. * Diamond shape
  71. * @inner
  72. */
  73. var Diamond = graphic.Path.extend({
  74. type: 'diamond',
  75. shape: {
  76. cx: 0,
  77. cy: 0,
  78. width: 0,
  79. height: 0
  80. },
  81. buildPath: function (path, shape) {
  82. var cx = shape.cx;
  83. var cy = shape.cy;
  84. var width = shape.width / 2;
  85. var height = shape.height / 2;
  86. path.moveTo(cx, cy - height);
  87. path.lineTo(cx + width, cy);
  88. path.lineTo(cx, cy + height);
  89. path.lineTo(cx - width, cy);
  90. path.closePath();
  91. }
  92. });
  93. /**
  94. * Pin shape
  95. * @inner
  96. */
  97. var Pin = graphic.Path.extend({
  98. type: 'pin',
  99. shape: {
  100. // x, y on the cusp
  101. x: 0,
  102. y: 0,
  103. width: 0,
  104. height: 0
  105. },
  106. buildPath: function (path, shape) {
  107. var x = shape.x;
  108. var y = shape.y;
  109. var w = shape.width / 5 * 3;
  110. // Height must be larger than width
  111. var h = Math.max(w, shape.height);
  112. var r = w / 2;
  113. // Dist on y with tangent point and circle center
  114. var dy = r * r / (h - r);
  115. var cy = y - h + r + dy;
  116. var angle = Math.asin(dy / r);
  117. // Dist on x with tangent point and circle center
  118. var dx = Math.cos(angle) * r;
  119. var tanX = Math.sin(angle);
  120. var tanY = Math.cos(angle);
  121. var cpLen = r * 0.6;
  122. var cpLen2 = r * 0.7;
  123. path.moveTo(x - dx, cy + dy);
  124. path.arc(x, cy, r, Math.PI - angle, Math.PI * 2 + angle);
  125. path.bezierCurveTo(x + dx - tanX * cpLen, cy + dy + tanY * cpLen, x, y - cpLen2, x, y);
  126. path.bezierCurveTo(x, y - cpLen2, x - dx + tanX * cpLen, cy + dy + tanY * cpLen, x - dx, cy + dy);
  127. path.closePath();
  128. }
  129. });
  130. /**
  131. * Arrow shape
  132. * @inner
  133. */
  134. var Arrow = graphic.Path.extend({
  135. type: 'arrow',
  136. shape: {
  137. x: 0,
  138. y: 0,
  139. width: 0,
  140. height: 0
  141. },
  142. buildPath: function (ctx, shape) {
  143. var height = shape.height;
  144. var width = shape.width;
  145. var x = shape.x;
  146. var y = shape.y;
  147. var dx = width / 3 * 2;
  148. ctx.moveTo(x, y);
  149. ctx.lineTo(x + dx, y + height);
  150. ctx.lineTo(x, y + height / 4 * 3);
  151. ctx.lineTo(x - dx, y + height);
  152. ctx.lineTo(x, y);
  153. ctx.closePath();
  154. }
  155. });
  156. /**
  157. * Map of path constructors
  158. */
  159. // TODO Use function to build symbol path.
  160. var symbolCtors = {
  161. line: graphic.Line,
  162. rect: graphic.Rect,
  163. roundRect: graphic.Rect,
  164. square: graphic.Rect,
  165. circle: graphic.Circle,
  166. diamond: Diamond,
  167. pin: Pin,
  168. arrow: Arrow,
  169. triangle: Triangle
  170. };
  171. var symbolShapeMakers = {
  172. line: function (x, y, w, h, shape) {
  173. shape.x1 = x;
  174. shape.y1 = y + h / 2;
  175. shape.x2 = x + w;
  176. shape.y2 = y + h / 2;
  177. },
  178. rect: function (x, y, w, h, shape) {
  179. shape.x = x;
  180. shape.y = y;
  181. shape.width = w;
  182. shape.height = h;
  183. },
  184. roundRect: function (x, y, w, h, shape) {
  185. shape.x = x;
  186. shape.y = y;
  187. shape.width = w;
  188. shape.height = h;
  189. shape.r = Math.min(w, h) / 4;
  190. },
  191. square: function (x, y, w, h, shape) {
  192. var size = Math.min(w, h);
  193. shape.x = x;
  194. shape.y = y;
  195. shape.width = size;
  196. shape.height = size;
  197. },
  198. circle: function (x, y, w, h, shape) {
  199. // Put circle in the center of square
  200. shape.cx = x + w / 2;
  201. shape.cy = y + h / 2;
  202. shape.r = Math.min(w, h) / 2;
  203. },
  204. diamond: function (x, y, w, h, shape) {
  205. shape.cx = x + w / 2;
  206. shape.cy = y + h / 2;
  207. shape.width = w;
  208. shape.height = h;
  209. },
  210. pin: function (x, y, w, h, shape) {
  211. shape.x = x + w / 2;
  212. shape.y = y + h / 2;
  213. shape.width = w;
  214. shape.height = h;
  215. },
  216. arrow: function (x, y, w, h, shape) {
  217. shape.x = x + w / 2;
  218. shape.y = y + h / 2;
  219. shape.width = w;
  220. shape.height = h;
  221. },
  222. triangle: function (x, y, w, h, shape) {
  223. shape.cx = x + w / 2;
  224. shape.cy = y + h / 2;
  225. shape.width = w;
  226. shape.height = h;
  227. }
  228. };
  229. export var symbolBuildProxies = {};
  230. each(symbolCtors, function (Ctor, name) {
  231. symbolBuildProxies[name] = new Ctor();
  232. });
  233. var SymbolClz = graphic.Path.extend({
  234. type: 'symbol',
  235. shape: {
  236. symbolType: '',
  237. x: 0,
  238. y: 0,
  239. width: 0,
  240. height: 0
  241. },
  242. calculateTextPosition: function (out, config, rect) {
  243. var res = calculateTextPosition(out, config, rect);
  244. var shape = this.shape;
  245. if (shape && shape.symbolType === 'pin' && config.position === 'inside') {
  246. res.y = rect.y + rect.height * 0.4;
  247. }
  248. return res;
  249. },
  250. buildPath: function (ctx, shape, inBundle) {
  251. var symbolType = shape.symbolType;
  252. if (symbolType !== 'none') {
  253. var proxySymbol = symbolBuildProxies[symbolType];
  254. if (!proxySymbol) {
  255. // Default rect
  256. symbolType = 'rect';
  257. proxySymbol = symbolBuildProxies[symbolType];
  258. }
  259. symbolShapeMakers[symbolType](shape.x, shape.y, shape.width, shape.height, proxySymbol.shape);
  260. proxySymbol.buildPath(ctx, proxySymbol.shape, inBundle);
  261. }
  262. }
  263. });
  264. // Provide setColor helper method to avoid determine if set the fill or stroke outside
  265. function symbolPathSetColor(color, innerColor) {
  266. if (this.type !== 'image') {
  267. var symbolStyle = this.style;
  268. if (this.__isEmptyBrush) {
  269. symbolStyle.stroke = color;
  270. symbolStyle.fill = innerColor || '#fff';
  271. // TODO Same width with lineStyle in LineView
  272. symbolStyle.lineWidth = 2;
  273. } else if (this.shape.symbolType === 'line') {
  274. symbolStyle.stroke = color;
  275. } else {
  276. symbolStyle.fill = color;
  277. }
  278. this.markRedraw();
  279. }
  280. }
  281. /**
  282. * Create a symbol element with given symbol configuration: shape, x, y, width, height, color
  283. */
  284. export function createSymbol(symbolType, x, y, w, h, color,
  285. // whether to keep the ratio of w/h,
  286. keepAspect) {
  287. // TODO Support image object, DynamicImage.
  288. var isEmpty = symbolType.indexOf('empty') === 0;
  289. if (isEmpty) {
  290. symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
  291. }
  292. var symbolPath;
  293. if (symbolType.indexOf('image://') === 0) {
  294. symbolPath = graphic.makeImage(symbolType.slice(8), new BoundingRect(x, y, w, h), keepAspect ? 'center' : 'cover');
  295. } else if (symbolType.indexOf('path://') === 0) {
  296. symbolPath = graphic.makePath(symbolType.slice(7), {}, new BoundingRect(x, y, w, h), keepAspect ? 'center' : 'cover');
  297. } else {
  298. symbolPath = new SymbolClz({
  299. shape: {
  300. symbolType: symbolType,
  301. x: x,
  302. y: y,
  303. width: w,
  304. height: h
  305. }
  306. });
  307. }
  308. symbolPath.__isEmptyBrush = isEmpty;
  309. // TODO Should deprecate setColor
  310. symbolPath.setColor = symbolPathSetColor;
  311. if (color) {
  312. symbolPath.setColor(color);
  313. }
  314. return symbolPath;
  315. }
  316. export function normalizeSymbolSize(symbolSize) {
  317. if (!isArray(symbolSize)) {
  318. symbolSize = [+symbolSize, +symbolSize];
  319. }
  320. return [symbolSize[0] || 0, symbolSize[1] || 0];
  321. }
  322. export function normalizeSymbolOffset(symbolOffset, symbolSize) {
  323. if (symbolOffset == null) {
  324. return;
  325. }
  326. if (!isArray(symbolOffset)) {
  327. symbolOffset = [symbolOffset, symbolOffset];
  328. }
  329. return [parsePercent(symbolOffset[0], symbolSize[0]) || 0, parsePercent(retrieve2(symbolOffset[1], symbolOffset[0]), symbolSize[1]) || 0];
  330. }