symbol.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  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; // Height must be larger than width
  110. var h = Math.max(w, shape.height);
  111. var r = w / 2; // Dist on y with tangent point and circle center
  112. var dy = r * r / (h - r);
  113. var cy = y - h + r + dy;
  114. var angle = Math.asin(dy / r); // Dist on x with tangent point and circle center
  115. var dx = Math.cos(angle) * r;
  116. var tanX = Math.sin(angle);
  117. var tanY = Math.cos(angle);
  118. var cpLen = r * 0.6;
  119. var cpLen2 = r * 0.7;
  120. path.moveTo(x - dx, cy + dy);
  121. path.arc(x, cy, r, Math.PI - angle, Math.PI * 2 + angle);
  122. path.bezierCurveTo(x + dx - tanX * cpLen, cy + dy + tanY * cpLen, x, y - cpLen2, x, y);
  123. path.bezierCurveTo(x, y - cpLen2, x - dx + tanX * cpLen, cy + dy + tanY * cpLen, x - dx, cy + dy);
  124. path.closePath();
  125. }
  126. });
  127. /**
  128. * Arrow shape
  129. * @inner
  130. */
  131. var Arrow = graphic.Path.extend({
  132. type: 'arrow',
  133. shape: {
  134. x: 0,
  135. y: 0,
  136. width: 0,
  137. height: 0
  138. },
  139. buildPath: function (ctx, shape) {
  140. var height = shape.height;
  141. var width = shape.width;
  142. var x = shape.x;
  143. var y = shape.y;
  144. var dx = width / 3 * 2;
  145. ctx.moveTo(x, y);
  146. ctx.lineTo(x + dx, y + height);
  147. ctx.lineTo(x, y + height / 4 * 3);
  148. ctx.lineTo(x - dx, y + height);
  149. ctx.lineTo(x, y);
  150. ctx.closePath();
  151. }
  152. });
  153. /**
  154. * Map of path constructors
  155. */
  156. // TODO Use function to build symbol path.
  157. var symbolCtors = {
  158. line: graphic.Line,
  159. rect: graphic.Rect,
  160. roundRect: graphic.Rect,
  161. square: graphic.Rect,
  162. circle: graphic.Circle,
  163. diamond: Diamond,
  164. pin: Pin,
  165. arrow: Arrow,
  166. triangle: Triangle
  167. };
  168. var symbolShapeMakers = {
  169. line: function (x, y, w, h, shape) {
  170. shape.x1 = x;
  171. shape.y1 = y + h / 2;
  172. shape.x2 = x + w;
  173. shape.y2 = y + h / 2;
  174. },
  175. rect: function (x, y, w, h, shape) {
  176. shape.x = x;
  177. shape.y = y;
  178. shape.width = w;
  179. shape.height = h;
  180. },
  181. roundRect: function (x, y, w, h, shape) {
  182. shape.x = x;
  183. shape.y = y;
  184. shape.width = w;
  185. shape.height = h;
  186. shape.r = Math.min(w, h) / 4;
  187. },
  188. square: function (x, y, w, h, shape) {
  189. var size = Math.min(w, h);
  190. shape.x = x;
  191. shape.y = y;
  192. shape.width = size;
  193. shape.height = size;
  194. },
  195. circle: function (x, y, w, h, shape) {
  196. // Put circle in the center of square
  197. shape.cx = x + w / 2;
  198. shape.cy = y + h / 2;
  199. shape.r = Math.min(w, h) / 2;
  200. },
  201. diamond: function (x, y, w, h, shape) {
  202. shape.cx = x + w / 2;
  203. shape.cy = y + h / 2;
  204. shape.width = w;
  205. shape.height = h;
  206. },
  207. pin: function (x, y, w, h, shape) {
  208. shape.x = x + w / 2;
  209. shape.y = y + h / 2;
  210. shape.width = w;
  211. shape.height = h;
  212. },
  213. arrow: function (x, y, w, h, shape) {
  214. shape.x = x + w / 2;
  215. shape.y = y + h / 2;
  216. shape.width = w;
  217. shape.height = h;
  218. },
  219. triangle: function (x, y, w, h, shape) {
  220. shape.cx = x + w / 2;
  221. shape.cy = y + h / 2;
  222. shape.width = w;
  223. shape.height = h;
  224. }
  225. };
  226. export var symbolBuildProxies = {};
  227. each(symbolCtors, function (Ctor, name) {
  228. symbolBuildProxies[name] = new Ctor();
  229. });
  230. var SymbolClz = graphic.Path.extend({
  231. type: 'symbol',
  232. shape: {
  233. symbolType: '',
  234. x: 0,
  235. y: 0,
  236. width: 0,
  237. height: 0
  238. },
  239. calculateTextPosition: function (out, config, rect) {
  240. var res = calculateTextPosition(out, config, rect);
  241. var shape = this.shape;
  242. if (shape && shape.symbolType === 'pin' && config.position === 'inside') {
  243. res.y = rect.y + rect.height * 0.4;
  244. }
  245. return res;
  246. },
  247. buildPath: function (ctx, shape, inBundle) {
  248. var symbolType = shape.symbolType;
  249. if (symbolType !== 'none') {
  250. var proxySymbol = symbolBuildProxies[symbolType];
  251. if (!proxySymbol) {
  252. // Default rect
  253. symbolType = 'rect';
  254. proxySymbol = symbolBuildProxies[symbolType];
  255. }
  256. symbolShapeMakers[symbolType](shape.x, shape.y, shape.width, shape.height, proxySymbol.shape);
  257. proxySymbol.buildPath(ctx, proxySymbol.shape, inBundle);
  258. }
  259. }
  260. }); // Provide setColor helper method to avoid determine if set the fill or stroke outside
  261. function symbolPathSetColor(color, innerColor) {
  262. if (this.type !== 'image') {
  263. var symbolStyle = this.style;
  264. if (this.__isEmptyBrush) {
  265. symbolStyle.stroke = color;
  266. symbolStyle.fill = innerColor || '#fff'; // TODO Same width with lineStyle in LineView
  267. symbolStyle.lineWidth = 2;
  268. } else if (this.shape.symbolType === 'line') {
  269. symbolStyle.stroke = color;
  270. } else {
  271. symbolStyle.fill = color;
  272. }
  273. this.markRedraw();
  274. }
  275. }
  276. /**
  277. * Create a symbol element with given symbol configuration: shape, x, y, width, height, color
  278. */
  279. export function createSymbol(symbolType, x, y, w, h, color, // whether to keep the ratio of w/h,
  280. keepAspect) {
  281. // TODO Support image object, DynamicImage.
  282. var isEmpty = symbolType.indexOf('empty') === 0;
  283. if (isEmpty) {
  284. symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
  285. }
  286. var symbolPath;
  287. if (symbolType.indexOf('image://') === 0) {
  288. symbolPath = graphic.makeImage(symbolType.slice(8), new BoundingRect(x, y, w, h), keepAspect ? 'center' : 'cover');
  289. } else if (symbolType.indexOf('path://') === 0) {
  290. symbolPath = graphic.makePath(symbolType.slice(7), {}, new BoundingRect(x, y, w, h), keepAspect ? 'center' : 'cover');
  291. } else {
  292. symbolPath = new SymbolClz({
  293. shape: {
  294. symbolType: symbolType,
  295. x: x,
  296. y: y,
  297. width: w,
  298. height: h
  299. }
  300. });
  301. }
  302. symbolPath.__isEmptyBrush = isEmpty; // TODO Should deprecate setColor
  303. symbolPath.setColor = symbolPathSetColor;
  304. if (color) {
  305. symbolPath.setColor(color);
  306. }
  307. return symbolPath;
  308. }
  309. export function normalizeSymbolSize(symbolSize) {
  310. if (!isArray(symbolSize)) {
  311. symbolSize = [+symbolSize, +symbolSize];
  312. }
  313. return [symbolSize[0] || 0, symbolSize[1] || 0];
  314. }
  315. export function normalizeSymbolOffset(symbolOffset, symbolSize) {
  316. if (symbolOffset == null) {
  317. return;
  318. }
  319. if (!isArray(symbolOffset)) {
  320. symbolOffset = [symbolOffset, symbolOffset];
  321. }
  322. return [parsePercent(symbolOffset[0], symbolSize[0]) || 0, parsePercent(retrieve2(symbolOffset[1], symbolOffset[0]), symbolSize[1]) || 0];
  323. }