SEditLine.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  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. * */
  19. class SLineItem extends SGraphItem {
  20. /** 线段 */
  21. line: SPoint[] = [];
  22. /** 是否完成绘制 */
  23. _status: SRelationState = SRelationState.Create;
  24. get status(): SRelationState {
  25. return this._status;
  26. }
  27. set status(v: SRelationState) {
  28. this._status = v;
  29. this.update();
  30. }
  31. /** 线条颜色 */
  32. _strokeColor: string = "#000000";
  33. get strokeColor(): string {
  34. return this._strokeColor;
  35. }
  36. set strokeColor(v: string) {
  37. this._strokeColor = v;
  38. this.update();
  39. }
  40. /** 填充色 */
  41. _fillColor: string = "#2196f3";
  42. get fillColor(): string {
  43. return this._fillColor;
  44. }
  45. set fillColor(v: string) {
  46. this._fillColor = v;
  47. this.update();
  48. }
  49. /** 线条宽度 */
  50. _lineWidth: number = 1;
  51. get lineWidth(): number {
  52. return this._lineWidth;
  53. }
  54. set lineWidth(v: number) {
  55. this._lineWidth = v;
  56. this.update();
  57. }
  58. /** 拖动灵敏度 */
  59. dis: number = 10;
  60. /** 拖动灵敏度 */
  61. sceneDis: number = 10;
  62. /**
  63. * 构造函数
  64. *
  65. * @param parent 父级
  66. * @param line 坐标集合
  67. * */
  68. constructor(parent: SGraphItem | null, line: SPoint[]);
  69. /**
  70. * 构造函数
  71. *
  72. * @param parent 父级
  73. * @param point 第一个点坐标
  74. * */
  75. constructor(parent: SGraphItem | null, point: SPoint);
  76. /**
  77. * 构造函数
  78. *
  79. * @param parent 父级
  80. * @param l 坐标集合|第一个点坐标
  81. * */
  82. constructor(parent: SGraphItem | null, l: SPoint | SPoint[]) {
  83. super(parent);
  84. if (l instanceof SPoint) {
  85. this.line.push(l);
  86. } else {
  87. this.line = l;
  88. }
  89. }
  90. /**
  91. * 鼠标按下事件
  92. *
  93. * @param event 鼠标事件
  94. * @return 是否处理事件
  95. * */
  96. onMouseDown(event: SMouseEvent): boolean {
  97. console.log(this);
  98. if (this.status == SRelationState.Normal) {
  99. return super.onMouseDown(event);
  100. } else if (this.status == SRelationState.Edit) {
  101. } else if (this.status == SRelationState.Create) {
  102. }
  103. this.$emit("mousedown");
  104. return true;
  105. } // Function onMouseDown()
  106. /**
  107. * 鼠标移动事件
  108. *
  109. * @param event 鼠标事件
  110. * @return 是否处理事件
  111. * */
  112. onMouseMove(event: SMouseEvent): boolean {
  113. if (this.status == SRelationState.Create) {
  114. return true;
  115. } else {
  116. return super.onMouseMove(event);
  117. }
  118. } // Function onMouseMove()
  119. /**
  120. * 鼠标移动事件
  121. *
  122. * @param event 鼠标事件
  123. * @return 是否处理事件
  124. * */
  125. onMouseUp(event: SMouseEvent): boolean {
  126. // if (this.status == SRelationState.Create) {
  127. // this.status = SRelationState.Edit;
  128. // return true;
  129. // } else {
  130. return super.onMouseUp(event);
  131. // }
  132. } // Function onMouseUp()
  133. /**
  134. * 判断点是否在区域内
  135. *
  136. * @param x
  137. * @param y
  138. * @return true-是
  139. */
  140. contains(x: number, y: number): boolean {
  141. if (this.line.length == 2) {
  142. let p = new SPoint(x, y);
  143. if (
  144. SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1])).MinDis <
  145. this.dis
  146. ) {
  147. return true;
  148. }
  149. }
  150. return false;
  151. } // Function contains()
  152. /**
  153. * Item对象边界区域
  154. *
  155. * @return SRect
  156. */
  157. boundingRect(): SRect {
  158. if (this.line.length == 2) {
  159. let x: number = this.line[0].x > this.line[1].x ? this.line[1].x : this.line[0].x;
  160. let y: number = this.line[0].x > this.line[1].x ? this.line[1].y : this.line[0].y;
  161. let width: number = Math.abs(this.line[0].x - this.line[1].x);
  162. let height: number = Math.abs(this.line[0].y - this.line[1].y);
  163. return new SRect(
  164. x,
  165. y,
  166. width,
  167. height
  168. );
  169. } else {
  170. return new SRect();
  171. }
  172. } // Function boundingRect()
  173. /**
  174. * Item绘制操作
  175. *
  176. * @param painter painter对象
  177. */
  178. onDraw(painter: SPainter): void {
  179. this.sceneDis = painter.toPx(this.dis);
  180. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  181. painter.pen.color = new SColor(this.strokeColor);
  182. if (this.p1 instanceof SPoint && this.p2 instanceof SPoint) {
  183. // 绘制外轮廓
  184. painter.brush.color = SColor.Transparent;
  185. painter.pen.color = new SColor("#128eee");
  186. painter.drawRect(this.boundingRect());
  187. // 绘制基本图形
  188. painter.pen.color = new SColor(this.strokeColor);// 需注释
  189. painter.drawLine(this.p1, this.p2);
  190. // 编辑态
  191. if (this.status == SRelationState.Edit) {
  192. painter.brush.color = SColor.White;
  193. // painter.brush.color = new SColor(this.fillColor);
  194. painter.drawCircle(this.p1.x, this.p1.y, painter.toPx(5));
  195. painter.drawCircle(this.p2.x, this.p2.y, painter.toPx(5));
  196. }
  197. }
  198. } // Function onDraw()
  199. } // Class SLineItem
  200. export default {
  201. data() {
  202. return {
  203. scene: null,
  204. view: null
  205. };
  206. },
  207. mounted(): void {
  208. this.view = new SGraphView("editLine");
  209. },
  210. methods: {
  211. show() {
  212. const scene = new SGraphScene();
  213. this.view.scene = scene;
  214. const line: SPoint[] = [new SPoint(100, 100), new SPoint(300, 300)];
  215. const lineItem = new SLineItem(null, line);
  216. lineItem.status = SRelationState.Normal;
  217. scene.addItem(lineItem);
  218. this.view.fitSceneToView();
  219. },
  220. create() {
  221. const scene = new SGraphScene();
  222. this.view.scene = scene;
  223. const lineItem = new SLineItem(null, [] );
  224. lineItem.status = SRelationState.Create;
  225. scene.addItem(lineItem);
  226. scene.grabItem = lineItem;
  227. this.view.fitSceneToView();
  228. },
  229. edit() {
  230. }
  231. }
  232. };
  233. </script>