SBaseCirclePolylineEdit.ts 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2016-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import {
  27. SColor,
  28. SLine,
  29. SPainter,
  30. SPoint,
  31. SRect,
  32. SPath
  33. } from "@persagy-web/draw";
  34. import { SKeyCode, SMouseEvent, SUndoStack } from "@persagy-web/base";
  35. import { SItemStatus } from "@persagy-web/big";
  36. import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
  37. import {
  38. SGraphPointListDelete,
  39. SGraphPointListInsert,
  40. SGraphPointListUpdate,
  41. SLineStyle,
  42. SGraphItem
  43. } from "@persagy-web/graph/";
  44. import { SGraphEdit } from "..";
  45. import { Marker } from "../type/Marker";
  46. /**
  47. * 折线编辑类
  48. *
  49. * @author 韩耀龙 <han_yao_long@163.com>
  50. */
  51. export default class SBaseCirclePolylineEdit extends SGraphEdit {
  52. /** 传入数据 */
  53. _data: Marker | null = null;
  54. get data(): Marker | null {
  55. return this._data;
  56. } // Get data
  57. set data(v: Marker | null) {
  58. this._data = v;
  59. this.initData();
  60. this.update();
  61. } // Set data
  62. /** X 坐标最小值 */
  63. private minX = Number.MAX_SAFE_INTEGER;
  64. /** X 坐标最大值 */
  65. private maxX = Number.MIN_SAFE_INTEGER;
  66. /** Y 坐标最小值 */
  67. private minY = Number.MAX_SAFE_INTEGER;
  68. /** Y 坐标最大值 */
  69. private maxY = Number.MIN_SAFE_INTEGER;
  70. /** 折点信息 */
  71. pointList: SPoint[] = [];
  72. /** 是否绘制完成 */
  73. _status: SItemStatus = SItemStatus.Normal;
  74. get status(): SItemStatus {
  75. return this._status;
  76. }
  77. set status(v: SItemStatus) {
  78. this._status = v;
  79. this.undoStack.clear();
  80. this.update();
  81. }
  82. /** 鼠标移动时的点 */
  83. private lastPoint: SPoint | null = null;
  84. /** 线条颜色 */
  85. _strokeColor: SColor = SColor.Black;
  86. get strokeColor(): SColor {
  87. return this._strokeColor;
  88. }
  89. set strokeColor(v: SColor) {
  90. this._strokeColor = v;
  91. this.update();
  92. }
  93. /** 填充色 */
  94. _fillColor: SColor = new SColor("#2196f3");
  95. get fillColor(): SColor {
  96. return this._fillColor;
  97. }
  98. set fillColor(v: SColor) {
  99. this._fillColor = v;
  100. this.update();
  101. }
  102. /** 边框样式 */
  103. _lineStyle: SLineStyle = SLineStyle.Solid;
  104. get lineStyle(): SLineStyle {
  105. return this._lineStyle;
  106. }
  107. set lineStyle(v: SLineStyle) {
  108. this._lineStyle = v;
  109. this.update();
  110. }
  111. /** 线条宽度 */
  112. _lineWidth: number = 1;
  113. get lineWidth(): number {
  114. return this._lineWidth;
  115. }
  116. set lineWidth(v: number) {
  117. this._lineWidth = v;
  118. this.update();
  119. }
  120. /** 是否垂直水平绘制 */
  121. private _verAndLeve: boolean = false;
  122. get verAndLeve(): boolean {
  123. return this._verAndLeve;
  124. }
  125. set verAndLeve(bool: boolean) {
  126. this._verAndLeve = bool;
  127. this.update();
  128. }
  129. /** 全局灵敏度 */
  130. dis: number = 10;
  131. /** 灵敏度转换为场景长度 */
  132. private sceneDis: number = 10;
  133. /** 当前点索引 */
  134. private curIndex: number = -1;
  135. /** 当前点 */
  136. private curPoint: SPoint | null = null;
  137. /** undo / redo 堆栈 */
  138. private undoStack: SUndoStack = new SUndoStack();
  139. /** 圆角半径 */
  140. private _radius: number = 5;
  141. get radius(): number {
  142. return this._radius;
  143. }
  144. set radius(v: number) {
  145. if (v === this._radius) {
  146. // 与旧值相等
  147. return;
  148. }
  149. this._radius = v;
  150. this.update();
  151. }
  152. /** 圆角半径是否需要转像素值 */
  153. radiusIsPx: boolean = false;
  154. /** path 对象 */
  155. path: SPath = new SPath();
  156. /**
  157. * 构造函数
  158. *
  159. * @param parent 父级
  160. * @param data 折线数据
  161. */
  162. constructor(parent: null | SGraphItem, data: Marker | null = null) {
  163. super(parent);
  164. if (data) {
  165. // 传入数据则存储
  166. this.data = data;
  167. }
  168. } // Constructor
  169. /**
  170. * 初始化 data 数据
  171. */
  172. initData(): void {
  173. const data = this.data;
  174. // 没有存储数据不处理
  175. if (!data) return;
  176. this.name = data.name;
  177. this.moveTo(data.pos.x, data.pos.y);
  178. this.showSelect = false;
  179. if (data && data.style) {
  180. // 数据中存在样式属性
  181. if (data.style.outLine) {
  182. // 存在轮廓线
  183. let setPointList: SPoint[];
  184. setPointList = data.style.outLine.map(i => {
  185. return new SPoint(i.x, i.y);
  186. });
  187. this.pointList = setPointList;
  188. }
  189. this.moveable = data.style.isMove ? data.style.isMove : false;
  190. if (data.style && data.style.default) {
  191. // 存在默认样式
  192. // 颜色
  193. if (data.style.default.strokeColor) {
  194. this.strokeColor = new SColor(
  195. data.style.default.strokeColor
  196. );
  197. }
  198. // 线宽
  199. if (data.style.default.lineWidth) {
  200. this.lineWidth = data.style.default.lineWidth;
  201. }
  202. // 线样式
  203. if (data.style.default.lineStyle) {
  204. this.lineStyle = data.style.default.lineStyle;
  205. }
  206. }
  207. }
  208. } // Function initData()
  209. /**
  210. * 添加点至数组中
  211. *
  212. * @param p 添加的点
  213. * @param index 添加到的索引
  214. */
  215. private addPoint(p: SPoint, index?: number): void {
  216. if (index && this.canHandle(index)) {
  217. // 传入索引且索引有效
  218. this.pointList.splice(index, 0, p);
  219. this.recordAction(SGraphPointListInsert, [
  220. this.pointList,
  221. p,
  222. index
  223. ]);
  224. } else {
  225. // 否则
  226. this.pointList.push(p);
  227. this.recordAction(SGraphPointListInsert, [this.pointList, p]);
  228. }
  229. this.update();
  230. }
  231. /**
  232. * 是否可以添加点到数组中
  233. *
  234. * @param index 要添加到的索引
  235. * @return 是否可添加
  236. */
  237. private canHandle(index: number): boolean {
  238. return index >= 0 && index <= this.pointList.length;
  239. }
  240. /**
  241. * 根据索引删除点
  242. *
  243. * @param index 删除点
  244. */
  245. deletePoint(index: number): void {
  246. if (this.canHandle(index) && this.pointList.length > 2) {
  247. // 索引值有效且本对象的点数据个数大于2个
  248. const p = new SPoint(
  249. this.pointList[this.curIndex].x,
  250. this.pointList[this.curIndex].y
  251. );
  252. this.pointList.splice(index, 1);
  253. this.recordAction(SGraphPointListDelete, [
  254. this.pointList,
  255. p,
  256. index
  257. ]);
  258. this.curIndex = -1;
  259. this.curPoint = null;
  260. this.update();
  261. }
  262. }
  263. /**
  264. * 鼠标按下事件
  265. *
  266. * @param event 鼠标事件
  267. * @return 是否处理事件
  268. */
  269. onMouseDown(event: SMouseEvent): boolean {
  270. this.curIndex = -1;
  271. this.curPoint = null;
  272. if (event.shiftKey || this.verAndLeve) {
  273. // 按下了 shift 键 或者模拟 shift 键功能开启
  274. event = this.compare(event);
  275. }
  276. if (event.buttons == 1) {
  277. // 按下的是左键
  278. if (this.status == SItemStatus.Create) {
  279. // 处于创建态
  280. this.addPoint(new SPoint(event.x, event.y));
  281. return true;
  282. } else if (this.status == SItemStatus.Edit) {
  283. // 处于编辑态
  284. // 查询鼠标最近的索引
  285. this.findNearestPoint(new SPoint(event.x, event.y));
  286. // 增加点
  287. if (this.curIndex < 0) {
  288. this.findAddPos(new SPoint(event.x, event.y));
  289. }
  290. // 删除点
  291. if (event.altKey && this.canHandle(this.curIndex)) {
  292. this.deletePoint(this.curIndex);
  293. }
  294. this.update();
  295. return true;
  296. } else {
  297. return super.onMouseDown(event);
  298. }
  299. }
  300. return super.onMouseDown(event);
  301. }
  302. /**
  303. * 鼠标移动事件
  304. *
  305. * @param event 鼠标事件
  306. * @return 是否处理事件
  307. */
  308. onMouseMove(event: SMouseEvent): boolean {
  309. if (event.shiftKey || this.verAndLeve) {
  310. // 按下了 shift 键 或者模拟 shift 键功能开启
  311. event = this.compare(event);
  312. }
  313. if (this.status == SItemStatus.Create) {
  314. // 处于创建态
  315. if (this.lastPoint) {
  316. // 最后一个点存在
  317. this.lastPoint.x = event.x;
  318. this.lastPoint.y = event.y;
  319. } else {
  320. // 否则
  321. this.lastPoint = new SPoint(event.x, event.y);
  322. }
  323. this.update();
  324. return true;
  325. } else if (this.status == SItemStatus.Edit) {
  326. // 处于编辑态
  327. if (event.buttons == 1) {
  328. // 按下的是左键
  329. if (this.canHandle(this.curIndex)) {
  330. // 索引值有效
  331. this.pointList[this.curIndex].x = event.x;
  332. this.pointList[this.curIndex].y = event.y;
  333. }
  334. }
  335. this.update();
  336. return true;
  337. } else {
  338. // 否则
  339. return super.onMouseMove(event);
  340. }
  341. }
  342. /**
  343. * 鼠标移动事件
  344. *
  345. * @param event 鼠标事件
  346. * @return 是否处理事件
  347. */
  348. onMouseUp(event: SMouseEvent): boolean {
  349. if (this.status == SItemStatus.Edit) {
  350. // 处于编辑态
  351. if (this.curIndex > -1) {
  352. // 索引值有效
  353. const p = new SPoint(
  354. this.pointList[this.curIndex].x,
  355. this.pointList[this.curIndex].y
  356. );
  357. this.recordAction(SGraphPointListUpdate, [
  358. this.pointList,
  359. this.curPoint,
  360. p,
  361. this.curIndex
  362. ]);
  363. }
  364. } else if (this.status == SItemStatus.Normal) {
  365. // 处于正常态
  366. super.onMouseUp(event);
  367. return true;
  368. }
  369. return true;
  370. }
  371. /**
  372. * 鼠标双击事件
  373. *
  374. * @param event 事件参数
  375. * @return 是否处理事件
  376. */
  377. onDoubleClick(event: SMouseEvent): boolean {
  378. if (this.status == SItemStatus.Normal) {
  379. // 处于正常态 双击改为编辑状态
  380. this.status = SItemStatus.Edit;
  381. // @ts-ignore
  382. this.grabItem(this);
  383. } else if (this.status == SItemStatus.Edit) {
  384. // 处于编辑状态 双击则改为正常态
  385. this.status = SItemStatus.Normal;
  386. this.releaseItem();
  387. } else if (this.status == SItemStatus.Create) {
  388. // 处于创建状态
  389. if (this.pointList.length > 1) {
  390. // 本对象点数据中已经给存在的点个数大于1个
  391. this.status = SItemStatus.Normal;
  392. this.releaseItem();
  393. this.$emit("finishCreated");
  394. }
  395. }
  396. this.$emit("onDoubleClick", event);
  397. return true;
  398. }
  399. /**
  400. * 键盘按键弹起事件
  401. *
  402. * @param event 事件参数
  403. */
  404. onKeyUp(event: KeyboardEvent): void {
  405. if (event.keyCode == SKeyCode.Enter) {
  406. // 按键为 enter 键
  407. if (this.pointList.length > 1) {
  408. // 点数据个数大于一个
  409. if (this.status == SItemStatus.Create) {
  410. // 处于创建态
  411. this.$emit("finishCreated");
  412. }
  413. this.status = SItemStatus.Normal;
  414. this.releaseItem();
  415. }
  416. }
  417. if (
  418. event.keyCode == SKeyCode.Delete &&
  419. this.status == SItemStatus.Edit
  420. ) {
  421. // 处于编辑态且按键为 delete 键, 则删除点
  422. this.deletePoint(this.curIndex);
  423. }
  424. }
  425. /**
  426. * 移动后处理所有坐标,并肩原点置为场景原点
  427. */
  428. moveToOrigin(): void {
  429. // 遍历本身点数据坐标
  430. this.pointList = this.pointList.map(t => {
  431. t.x = t.x + this.x;
  432. t.y = t.y + this.y;
  433. return t;
  434. });
  435. this.x = 0;
  436. this.y = 0;
  437. }
  438. /**
  439. * 获取点击点与点集中距离最近点
  440. *
  441. * @param p 鼠标点击点
  442. */
  443. findNearestPoint(p: SPoint): void {
  444. let len = this.sceneDis;
  445. // 遍历本身点数据列表
  446. for (let i = 0; i < this.pointList.length; i++) {
  447. let dis = SMathUtil.pointDistance(
  448. p.x,
  449. p.y,
  450. this.pointList[i].x,
  451. this.pointList[i].y
  452. );
  453. if (dis < len) {
  454. // 点击点到对象中的点距离在吸附距离之内
  455. len = dis;
  456. this.curIndex = i;
  457. this.curPoint = new SPoint(
  458. this.pointList[this.curIndex].x,
  459. this.pointList[this.curIndex].y
  460. );
  461. }
  462. }
  463. }
  464. /**
  465. * 计算增加点的位置
  466. *
  467. * @param p 鼠标点击点
  468. */
  469. findAddPos(p: SPoint): void {
  470. let len = SMathUtil.pointToLine(
  471. p,
  472. new SLine(this.pointList[0], this.pointList[1])
  473. ),
  474. index = 0;
  475. // 点数据个数大于2
  476. if (this.pointList.length > 2) {
  477. // 遍历点数据列表
  478. for (let i = 1; i < this.pointList.length - 1; i++) {
  479. let dis = SMathUtil.pointToLine(
  480. p,
  481. new SLine(this.pointList[i], this.pointList[i + 1])
  482. );
  483. // 点击点到对象中的点距离在吸附距离之内
  484. if (dis.MinDis < len.MinDis) {
  485. len = dis;
  486. index = i;
  487. }
  488. }
  489. }
  490. if (len.MinDis < this.sceneDis) {
  491. // 如果点击点到第条线距离在吸附距离之内
  492. if (len.Point) {
  493. // 存在吸附的点
  494. this.addPoint(len.Point, index + 1);
  495. }
  496. }
  497. }
  498. /**
  499. * shift 垂直水平创建或编辑
  500. *
  501. * @param event 事件
  502. * @return 处理后的鼠标事件
  503. */
  504. compare(event: SMouseEvent): SMouseEvent {
  505. if (this.pointList.length) {
  506. // 点数据列表有效
  507. let last = new SPoint(event.x, event.y);
  508. if (this.status == SItemStatus.Create) {
  509. // 处于创建态
  510. last = this.pointList[this.pointList.length - 1];
  511. } else if (this.status == SItemStatus.Edit) {
  512. // 处于编辑态
  513. if (this.curIndex > 1) {
  514. // 当前选中点的索引不是前两个点
  515. last = this.pointList[this.curIndex - 1];
  516. }
  517. }
  518. const dx = Math.abs(event.x - last.x);
  519. const dy = Math.abs(event.y - last.y);
  520. if (dy > dx) {
  521. // y 轴方向差值量大
  522. event.x = last.x;
  523. } else {
  524. // x 轴方向差值量大
  525. event.y = last.y;
  526. }
  527. }
  528. return event;
  529. }
  530. /**
  531. * 记录相关动作并推入栈中
  532. *
  533. * @param SGraphCommand 相关命令类
  534. * @param any 对应传入参数
  535. */
  536. protected recordAction(SGraphCommand: any, any: any[]): void {
  537. // 记录相关命令并推入堆栈中
  538. const command = new SGraphCommand(this.scene, this, ...any);
  539. this.undoStack.push(command);
  540. }
  541. /**
  542. * Item 对象边界区域
  543. *
  544. * @return 对象边界区域
  545. */
  546. boundingRect(): SRect {
  547. if (this.pointList.length) {
  548. // 当前折线有效
  549. this.minX = this.pointList[0].x;
  550. this.maxX = this.pointList[0].x;
  551. this.minY = this.pointList[0].y;
  552. this.maxY = this.pointList[0].y;
  553. this.pointList.forEach(it => {
  554. let x = it.x,
  555. y = it.y;
  556. // 计算 x 的最小值
  557. if (x < this.minX) {
  558. this.minX = x;
  559. }
  560. // 计算 y 的最小值
  561. if (y < this.minY) {
  562. this.minY = y;
  563. }
  564. // 计算 x 的最大值
  565. if (x > this.maxX) {
  566. this.maxX = x;
  567. }
  568. // 计算 y 的最大值
  569. if (y > this.maxY) {
  570. this.maxY = y;
  571. }
  572. });
  573. }
  574. return new SRect(
  575. this.minX,
  576. this.minY,
  577. this.maxX - this.minX,
  578. this.maxY - this.minY
  579. );
  580. }
  581. /**
  582. * 判断点是否在区域内
  583. *
  584. * @param x x 坐标
  585. * @param y y 坐标
  586. * @return 是否在区域内
  587. */
  588. contains(x: number, y: number): boolean {
  589. let p = new SPoint(x, y);
  590. // 遍历点集列表
  591. for (let i = 1; i < this.pointList.length; i++) {
  592. let PTL = SMathUtil.pointToLine(
  593. p,
  594. new SLine(
  595. this.pointList[i - 1].x,
  596. this.pointList[i - 1].y,
  597. this.pointList[i].x,
  598. this.pointList[i].y
  599. )
  600. );
  601. // 点击点距离折线的距离在吸附范围内
  602. if (PTL.MinDis < this.sceneDis) {
  603. return true;
  604. }
  605. }
  606. return false;
  607. }
  608. /**
  609. * 撤销操作
  610. */
  611. undo(): void {
  612. // 处于非正常态
  613. if (this._status != SItemStatus.Normal) {
  614. this.undoStack.undo();
  615. }
  616. }
  617. /**
  618. * 重做操作
  619. */
  620. redo(): void {
  621. // 处于非正常态
  622. if (this._status != SItemStatus.Normal) {
  623. this.undoStack.redo();
  624. }
  625. }
  626. /**
  627. * 取消操作执行
  628. */
  629. cancelOperate(): void {
  630. if (this.status == SItemStatus.Create) {
  631. // 处于创建态
  632. this.parent = null;
  633. this.releaseItem();
  634. } else if (this.status == SItemStatus.Edit) {
  635. // 处于编辑态
  636. this.status = SItemStatus.Normal;
  637. this.releaseItem();
  638. }
  639. }
  640. /**
  641. * 根据点集生成 path 对象
  642. *
  643. * @param list 需要生成的点击
  644. * @param r 拐点处圆角半径
  645. */
  646. generatePath(list: SPoint[], r: number = 0): void {
  647. const len = list.length;
  648. // 当前这小有效
  649. if (len) {
  650. this.path = new SPath();
  651. this.path.moveTo(list[0].x, list[0].y);
  652. // 遍历点集列表
  653. for (let i = 1; i < len - 1; i++) {
  654. const temp = list[i];
  655. const next = list[i + 1];
  656. this.path.arcTo(temp.x, temp.y, next.x, next.y, r);
  657. }
  658. const last = list[len - 1];
  659. this.path.lineTo(last.x, last.y);
  660. }
  661. }
  662. /**
  663. * 绘制基本图形
  664. *
  665. * @param painter 绘制对象
  666. */
  667. drawBaseLine(painter: SPainter): void {
  668. // 绘制基本图形
  669. painter.pen.color = this.strokeColor;
  670. if (this.lineStyle == SLineStyle.Dashed) {
  671. // 类型为虚线
  672. painter.pen.lineDash = [
  673. painter.toPx(this.lineWidth * 3),
  674. painter.toPx(this.lineWidth * 7)
  675. ];
  676. } else if (this.lineStyle == SLineStyle.Dotted) {
  677. // 类型为点线
  678. painter.pen.lineDash = [
  679. painter.toPx(this.lineWidth),
  680. painter.toPx(this.lineWidth)
  681. ];
  682. }
  683. const temp = JSON.parse(JSON.stringify(this.pointList));
  684. // 处于创建态且最后一个点存在
  685. if (this.status == SItemStatus.Create && this.lastPoint) {
  686. temp.push(this.lastPoint);
  687. }
  688. if (temp.length > 2) {
  689. // 当前点集中点数超过2个点,生成 path 路径
  690. let radius = this.radius;
  691. if (this.radiusIsPx) {
  692. // 如果圆角半径需要转像素值
  693. radius = painter.toPx(this.radius);
  694. }
  695. this.generatePath(temp, radius);
  696. painter.drawPath(this.path);
  697. } else {
  698. // 否则绘制折线
  699. painter.drawPolyline(temp);
  700. }
  701. }
  702. /**
  703. * 返回对象储存的相关数据
  704. *
  705. * @return 对象储存的相关数据
  706. */
  707. toData(): any {
  708. this.moveToOrigin();
  709. // 数据不存在,不做转换
  710. if (!this.data) return;
  711. // 遍历点集列表
  712. const Line = this.pointList.map(pos => {
  713. return {
  714. x: pos.x,
  715. y: pos.y
  716. };
  717. });
  718. this.data.style.outLine = Line;
  719. this.data.style.default.lineWidth = this.lineWidth;
  720. this.data.style.default.lineStyle = this.lineStyle;
  721. this.data.style.default.strokeColor = this.strokeColor.value;
  722. return this.data;
  723. }
  724. /**
  725. * Item 绘制操作
  726. *
  727. * @param painter 绘制对象
  728. */
  729. onDraw(painter: SPainter): void {
  730. // 缓存场景长度
  731. this.sceneDis = painter.toPx(this.dis);
  732. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  733. // 处于创建状态且最后一个点存在
  734. if (this.status == SItemStatus.Create && this.lastPoint) {
  735. // 绘制基本图形
  736. this.drawBaseLine(painter);
  737. // 编辑状态
  738. this.pointList.forEach((t, i): void => {
  739. painter.brush.color = SColor.White;
  740. if (i == this.curIndex) {
  741. painter.brush.color = this.fillColor;
  742. }
  743. painter.drawCircle(t.x, t.y, painter.toPx(5));
  744. });
  745. } else if (this.status == SItemStatus.Edit) {
  746. // 处于编辑状态
  747. // 绘制基本图形
  748. this.drawBaseLine(painter);
  749. // 遍历点集列表
  750. this.pointList.forEach((t, i): void => {
  751. painter.brush.color = SColor.White;
  752. // 该点是当前选中的点
  753. if (i == this.curIndex) {
  754. painter.brush.color = this.fillColor;
  755. }
  756. painter.drawCircle(t.x, t.y, painter.toPx(5));
  757. });
  758. } else {
  759. // 查看状态,是否选中
  760. if (this.selected) {
  761. painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
  762. painter.shadow.shadowBlur = 10;
  763. painter.shadow.shadowColor = new SColor(`#00000033`);
  764. painter.shadow.shadowOffsetX = 5;
  765. painter.shadow.shadowOffsetY = 5;
  766. }
  767. // 绘制基本图形
  768. this.drawBaseLine(painter);
  769. }
  770. }
  771. }