SEditLine.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <template>
  2. <div>
  3. <el-button @click="show">展示</el-button>
  4. <el-button @click="create">创建</el-button>
  5. <el-button @click="edit">编辑</el-button>
  6. <canvas id="editLine" width="740" height="400" tabindex="0" />
  7. </div>
  8. </template>
  9. <script lang='ts'>
  10. import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/";
  11. import {SMouseEvent} from "@saga-web/base/";
  12. import {SColor, SLine, SPainter, SPoint, SRect} from "@saga-web/draw";
  13. import {SRelationState} from "@saga-web/big/lib/enums/SRelationState";
  14. import {SMathUtil} from "@saga-web/big/lib/utils/SMathUtil";
  15. /**
  16. * 直线item
  17. *
  18. * @author 张宇(taohuzy@163.com)
  19. * */
  20. class SLineItem extends SGraphItem {
  21. /** X坐标最小值 */
  22. private minX = Number.MAX_SAFE_INTEGER;
  23. /** X坐标最大值 */
  24. private maxX = Number.MIN_SAFE_INTEGER;
  25. /** Y坐标最小值 */
  26. private minY = Number.MAX_SAFE_INTEGER;
  27. /** Y坐标最大值 */
  28. private maxY = Number.MIN_SAFE_INTEGER;
  29. /** 线段 */
  30. _line: SPoint[] = [];
  31. get line(): SPoint[] {
  32. return this._line;
  33. }
  34. set line(arr: SPoint[]) {
  35. this._line = arr;
  36. this._xyzListToSPointList(arr);
  37. this.update();
  38. }
  39. /** 是否完成绘制 */
  40. _status: SRelationState = SRelationState.Create;
  41. get status(): SRelationState {
  42. return this._status;
  43. }
  44. set status(v: SRelationState) {
  45. this._status = v;
  46. this.update();
  47. }
  48. /** 线条颜色 */
  49. _strokeColor: string = "#000000";
  50. get strokeColor(): string {
  51. return this._strokeColor;
  52. }
  53. set strokeColor(v: string) {
  54. this._strokeColor = v;
  55. this.update();
  56. }
  57. /** 填充色 */
  58. _fillColor: string = "#2196f3";
  59. get fillColor(): string {
  60. return this._fillColor;
  61. }
  62. set fillColor(v: string) {
  63. this._fillColor = v;
  64. this.update();
  65. }
  66. /** 线条宽度 */
  67. _lineWidth: number = 1;
  68. get lineWidth(): number {
  69. return this._lineWidth;
  70. }
  71. set lineWidth(v: number) {
  72. this._lineWidth = v;
  73. this.update();
  74. }
  75. /** 拖动灵敏度 */
  76. dis: number = 10;
  77. /** 拖动灵敏度 */
  78. sceneDis: number = 10;
  79. /** 当前点索引 */
  80. curIndex: number = -1;
  81. /**
  82. * 构造函数
  83. *
  84. * @param parent 父级
  85. * @param line 坐标集合
  86. * */
  87. constructor(parent: SGraphItem | null, line: SPoint[]);
  88. /**
  89. * 构造函数
  90. *
  91. * @param parent 父级
  92. * @param point 第一个点坐标
  93. * */
  94. constructor(parent: SGraphItem | null, point: SPoint);
  95. /**
  96. * 构造函数
  97. *
  98. * @param parent 父级
  99. * @param l 坐标集合|第一个点坐标
  100. * */
  101. constructor(parent: SGraphItem | null, l: SPoint | SPoint[]) {
  102. super(parent);
  103. if (l instanceof SPoint) {
  104. this.line.push(l);
  105. } else {
  106. this.line = l;
  107. }
  108. }
  109. /**
  110. * 添加点至数组中
  111. *
  112. * @param p 添加的点
  113. * @param index 添加到的索引
  114. * */
  115. private addPoint(p: SPoint): void {
  116. if (this.line.length < 2) {
  117. this.line.push(p);
  118. } else {
  119. this.line[1] = p;
  120. this.status = SRelationState.Normal;
  121. }
  122. this._xyzListToSPointList(this.line);
  123. this.update();
  124. } // Function addPoint()
  125. /**
  126. * 鼠标双击事件
  127. *
  128. * @param event 事件参数
  129. * @return boolean
  130. */
  131. onDoubleClick(event: SMouseEvent): boolean {
  132. if (this.contains(event.x, event.y)) { // 判断是否点击到线上
  133. if (this.status == SRelationState.Normal) {
  134. if (this.scene) {
  135. this.scene.grabItem = this;
  136. }
  137. this.status = SRelationState.Edit;
  138. } else if (this.status = SRelationState.Edit) {
  139. this.status = SRelationState.Normal;
  140. }
  141. this.update();
  142. }
  143. return true;
  144. } // Function onDoubleClick()
  145. /**
  146. * 鼠标按下事件
  147. *
  148. * @param event 鼠标事件
  149. * @return 是否处理事件
  150. * */
  151. onMouseDown(event: SMouseEvent): boolean {
  152. if (this.status == SRelationState.Normal) {
  153. return super.onMouseDown(event);
  154. } else if (this.status == SRelationState.Edit) {
  155. // 判断是否点击到端点上(获取端点索引值)
  156. this.findNearestPoint(new SPoint(event.x, event.y));
  157. } else if (this.status == SRelationState.Create) {
  158. this.addPoint(new SPoint(event.x, event.y));
  159. return true;
  160. }
  161. this.$emit("mousedown");
  162. return true;
  163. } // Function onMouseDown()
  164. /**
  165. * 鼠标抬起事件
  166. *
  167. * @param event 事件参数
  168. * @return boolean
  169. */
  170. onMouseUp(event: SMouseEvent): boolean {
  171. if (this._status == SRelationState.Edit) {
  172. this.curIndex = -1;
  173. }
  174. return true;
  175. } // Function onMouseUp()
  176. /**
  177. * 鼠标移动事件
  178. *
  179. * @param event 鼠标事件
  180. * @return 是否处理事件
  181. * */
  182. onMouseMove(event: SMouseEvent): boolean {
  183. if (this.status == SRelationState.Create) {
  184. if (this.line[0] instanceof SPoint) {
  185. this.line[1] = new SPoint(event.x, event.y);
  186. }
  187. } else if (this.status == SRelationState.Edit) {
  188. if (-1 != this.curIndex) {
  189. this.line[this.curIndex].x = event.x;
  190. this.line[this.curIndex].y = event.y;
  191. }
  192. } else {
  193. return super.onMouseMove(event);
  194. }
  195. this._xyzListToSPointList(this.line);
  196. this.update();
  197. return true;
  198. } // Function onMouseMove()
  199. /**
  200. * 获取点击点与Point[]中的点距离最近点
  201. *
  202. * @param p 鼠标点击点
  203. * */
  204. findNearestPoint(p: SPoint): void {
  205. let len = this.sceneDis;
  206. for (let i = 0; i < 2; i++) {
  207. let dis = SMathUtil.pointDistance(
  208. p.x,
  209. p.y,
  210. this.line[i].x,
  211. this.line[i].y
  212. );
  213. if (dis < len) {
  214. len = dis;
  215. this.curIndex = i;
  216. }
  217. }
  218. } // Function findNearestPoint()
  219. /**
  220. * xyz数据转换为SPoint格式函数;获取外接矩阵参数
  221. *
  222. * @param arr 外层传入的数据PointList
  223. */
  224. protected _xyzListToSPointList(arr: SPoint[]): void {
  225. if (arr.length) {
  226. this.minX = Number.MAX_SAFE_INTEGER;
  227. this.maxX = Number.MIN_SAFE_INTEGER;
  228. this.minY = Number.MAX_SAFE_INTEGER;
  229. this.maxY = Number.MIN_SAFE_INTEGER;
  230. arr.forEach(it => {
  231. let x = it.x,
  232. y = it.y;
  233. if (x < this.minX) {
  234. this.minX = x;
  235. }
  236. if (y < this.minY) {
  237. this.minY = y;
  238. }
  239. if (x > this.maxX) {
  240. this.maxX = x;
  241. }
  242. if (y > this.maxY) {
  243. this.maxY = y;
  244. }
  245. });
  246. }
  247. }
  248. /**
  249. * 判断点是否在区域内
  250. *
  251. * @param x
  252. * @param y
  253. * @return true-是
  254. */
  255. contains(x: number, y: number): boolean {
  256. if (this.line.length == 2) {
  257. let p = new SPoint(x, y);
  258. if (
  259. SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1])).MinDis <
  260. this.dis
  261. ) {
  262. return true;
  263. }
  264. }
  265. return false;
  266. } // Function contains()
  267. /**
  268. * 取消操作item事件
  269. *
  270. * */
  271. cancelOperate(): void {
  272. if (this.status == SRelationState.Create) {
  273. this.parent = null;
  274. this.releaseItem();
  275. } else if (this.status == SRelationState.Edit) {
  276. this.status = SRelationState.Normal;
  277. this.releaseItem();
  278. }
  279. } // Function cancelOperate()
  280. /**
  281. * Item对象边界区域
  282. *
  283. * @return SRect
  284. */
  285. boundingRect(): SRect {
  286. return new SRect(
  287. this.minX,
  288. this.minY,
  289. this.maxX - this.minX,
  290. this.maxY - this.minY
  291. );
  292. } // Function boundingRect()
  293. /**
  294. * Item绘制操作
  295. *
  296. * @param painter painter对象
  297. */
  298. onDraw(painter: SPainter): void {
  299. this.sceneDis = painter.toPx(this.dis);
  300. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  301. painter.pen.color = new SColor(this.strokeColor);
  302. if (this.line.length == 2) {
  303. // 绘制外轮廓
  304. // painter.brush.color = SColor.Transparent;
  305. // painter.pen.color = new SColor("#128eee");
  306. // painter.drawRect(this.boundingRect());
  307. // 绘制直线
  308. painter.pen.color = new SColor(this.strokeColor);
  309. painter.drawLine(this.line[0], this.line[1]);
  310. if (this.status == SRelationState.Edit || this.status == SRelationState.Create) {
  311. // 绘制端点
  312. painter.brush.color = new SColor(this.fillColor);
  313. painter.drawCircle(this.line[0].x, this.line[0].y, painter.toPx(5));
  314. painter.drawCircle(this.line[1].x, this.line[1].y, painter.toPx(5));
  315. }
  316. } else if (this.line.length == 1) {
  317. if (this.status == SRelationState.Edit || this.status == SRelationState.Create) {
  318. // 绘制端点
  319. painter.brush.color = new SColor(this.fillColor);
  320. painter.drawCircle(this.line[0].x, this.line[0].y, painter.toPx(5));
  321. }
  322. }
  323. } // Function onDraw()
  324. } // Class SLineItem
  325. export default {
  326. data() {
  327. return {
  328. scene: null,
  329. view: null
  330. };
  331. },
  332. mounted(): void {
  333. this.view = new SGraphView("editLine");
  334. },
  335. methods: {
  336. show() {
  337. const scene = new SGraphScene();
  338. this.view.scene = scene;
  339. const line: SPoint[] = [new SPoint(100, 100), new SPoint(300, 300)];
  340. const lineItem = new SLineItem(null, line);
  341. lineItem.status = SRelationState.Normal;
  342. scene.addItem(lineItem);
  343. this.view.fitSceneToView();
  344. },
  345. create() {
  346. const scene = new SGraphScene();
  347. this.view.scene = scene;
  348. const lineItem = new SLineItem(null, [] );
  349. lineItem.status = SRelationState.Create;
  350. scene.addItem(lineItem);
  351. scene.grabItem = lineItem;
  352. this.view.fitSceneToView();
  353. },
  354. edit() {
  355. const scene = new SGraphScene();
  356. this.view.scene = scene;
  357. const line: SPoint[] = [new SPoint(100, 100), new SPoint(300, 300)];
  358. const lineItem = new SLineItem(null, line);
  359. lineItem.status = SRelationState.Edit;
  360. scene.addItem(lineItem);
  361. scene.grabItem = lineItem;
  362. this.view.fitSceneToView();
  363. }
  364. }
  365. };
  366. </script>