arrow.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <div>
  3. <el-table :data="tableData" style="width: 100%" class="elementTable">
  4. <el-table-column prop="val" label="值" width="180"></el-table-column>
  5. <el-table-column prop="desc" label="描述"></el-table-column>
  6. </el-table>
  7. <div style="margin: 14px 0;">
  8. <span style="font-size: 14px;">选择起始点样式</span>
  9. <el-select placeholder="请选择" @change="changeStart" size="small" v-model="begin">
  10. <el-option v-for="item in options" :key="item.value" :label="item.label"
  11. :value="item.value"></el-option>
  12. </el-select>
  13. <span style="font-size: 14px;">选择结束点样式</span>
  14. <el-select placeholder="请选择" @change="changeEnd" size="small" v-model="end">
  15. <el-option v-for="item in options" :key="item.value" :label="item.label"
  16. :value="item.value"></el-option>
  17. </el-select>
  18. </div>
  19. <canvas :id="id" width="740" height="400" tabindex="0"/>
  20. </div>
  21. </template>
  22. <script lang="ts">
  23. import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  24. import { SArrowStyleType, SPainter, SPoint, SRect } from "@persagy-web/draw/lib"
  25. import { Component, Vue } from "vue-property-decorator";
  26. import { v1 as uuid } from "uuid";
  27. /**
  28. * 绘制带有末端样式的线段
  29. *
  30. * @author 郝洁 <haojie@persagy.com>
  31. */
  32. class Polyline extends SGraphItem {
  33. /** 起始点样式 */
  34. _begin = SArrowStyleType.Basic;
  35. get begin(): SArrowStyleType {
  36. return this._begin;
  37. }
  38. set begin(v: SArrowStyleType) {
  39. this._begin = v;
  40. this.update();
  41. }
  42. /** 结束点样式 */
  43. _end = SArrowStyleType.Basic;
  44. get end(): SArrowStyleType {
  45. return this._end;
  46. }
  47. set end(v: SArrowStyleType) {
  48. this._end = v;
  49. this.update();
  50. }
  51. /** 绘制多边形数组 */
  52. pointList: SPoint[] = [
  53. new SPoint(0, 0),
  54. new SPoint(1000, 1000),
  55. new SPoint(1200, 1800),
  56. new SPoint(1800, 1800),
  57. new SPoint(2000, 100),
  58. // new SPoint(0, 0)
  59. ];
  60. /**
  61. * 矩形数据类型绘制
  62. *
  63. * @return 边界区域
  64. */
  65. boundingRect(): SRect {
  66. return new SRect(0, 0, 2000, 1800);
  67. }
  68. /**
  69. * Item 绘制操作
  70. * @param painter 绘制对象
  71. */
  72. onDraw(painter: SPainter) {
  73. //线宽
  74. painter.pen.lineWidth = painter.toPx(1);
  75. //箭头起点,终点样式
  76. const style = {
  77. begin: this.begin,
  78. end: this.end
  79. };
  80. for (let i = 0; i < this.pointList.length - 1; i++) {
  81. //绘制带箭头的线段
  82. painter.drawArrowLine(this.pointList[i], this.pointList[i + 1], style)
  83. }
  84. }
  85. }
  86. @Component
  87. export default class ShadowCanvas extends Vue {
  88. /** 图 id */
  89. id: string = uuid();
  90. /** 箭头列表 */
  91. options = [
  92. {
  93. value: SArrowStyleType.None,
  94. label: 'None'
  95. }, {
  96. value: SArrowStyleType.Basic,
  97. label: 'Basic'
  98. }, {
  99. value: SArrowStyleType.Triangle,
  100. label: 'Triangle'
  101. }, {
  102. value: SArrowStyleType.Diamond,
  103. label: 'Diamond'
  104. }, {
  105. value: SArrowStyleType.Square,
  106. label: 'Square'
  107. }, {
  108. value: SArrowStyleType.Circle,
  109. label: 'Circle'
  110. }
  111. ];
  112. /** 实例化 view */
  113. view: SGraphView | undefined;
  114. /** 实例化 */
  115. item: Polyline | undefined;
  116. /** 参考列表 */
  117. tableData = [
  118. {
  119. val: 'None',
  120. desc: '无样式'
  121. }, {
  122. val: 'Basic',
  123. desc: '基本箭头'
  124. },
  125. {
  126. val: 'Triangle',
  127. desc: '三角形箭头'
  128. },
  129. {
  130. val: 'Diamond',
  131. desc: '菱形箭头'
  132. },
  133. {
  134. val: 'Square',
  135. desc: '方形箭头'
  136. },
  137. {
  138. val: 'Circle',
  139. desc: '圆形箭头'
  140. },
  141. ];
  142. /** 起点 */
  143. begin: SArrowStyleType = SArrowStyleType.Basic;
  144. /** 终点 */
  145. end: SArrowStyleType = SArrowStyleType.Basic;
  146. /**
  147. * 页面挂载
  148. */
  149. mounted(): void {
  150. this.init()
  151. };
  152. /**
  153. * 初始化加载
  154. */
  155. init() {
  156. this.view = new SGraphView(this.id);
  157. const scene = new SGraphScene();
  158. this.item = new Polyline(null);
  159. scene.addItem(this.item);
  160. this.view.scene = scene;
  161. this.view.fitSceneToView();
  162. this.view.scalable = false;
  163. };
  164. /** 起点事件 */
  165. changeStart(val: SArrowStyleType): void {
  166. this.item!!.begin = val
  167. };
  168. /** 终点事件 */
  169. changeEnd(val: SArrowStyleType): void {
  170. this.item!!.end = val
  171. }
  172. }
  173. </script>