arrow.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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" :value="item.value"></el-option>
  11. </el-select>
  12. <span style="font-size: 14px;">选择结束点样式</span>
  13. <el-select placeholder="请选择" @change="changeEnd" size="small" v-model="end">
  14. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  15. </el-select>
  16. </div>
  17. <canvas :id="id" width="740" height="400" tabindex="0"/>
  18. </div>
  19. </template>
  20. <script lang="ts">
  21. import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  22. import {SRect, SArrowStyleType, SColor, SPoint, SPainter} from "@persagy-web/draw/lib"
  23. import { Component, Prop, Vue } from "vue-property-decorator";
  24. import { v1 as uuid } from "uuid";
  25. class Polyline extends SGraphItem{
  26. /** 起始点样式 */
  27. _begin = SArrowStyleType.Basic;
  28. get begin():SArrowStyleType{
  29. return this._begin;
  30. }
  31. set begin(v:SArrowStyleType){
  32. this._begin = v;
  33. this.update();
  34. }
  35. /** 结束点样式 */
  36. _end = SArrowStyleType.Basic;
  37. get end():SArrowStyleType{
  38. return this._end;
  39. }
  40. set end(v:SArrowStyleType){
  41. this._end = v;
  42. this.update();
  43. }
  44. pointList: SPoint[] = [
  45. new SPoint(0, 0),
  46. new SPoint(1000, 1000),
  47. new SPoint(1200, 1800),
  48. new SPoint(1800, 1800),
  49. new SPoint(2000, 100),
  50. // new SPoint(0, 0)
  51. ];
  52. boundingRect():SRect {
  53. return new SRect(0,0,2000,1800);
  54. }
  55. onDraw(painter:SPainter) {
  56. painter.pen.lineWidth = painter.toPx(1);
  57. const style = {
  58. begin: this.begin,
  59. end: this.end
  60. };
  61. for(let i = 0; i < this.pointList.length - 1; i++){
  62. painter.drawArrowLine(this.pointList[i], this.pointList[i+1], style)
  63. }
  64. }
  65. }
  66. @Component
  67. export default class ShadowCanvas extends Vue {
  68. id: string = uuid();
  69. options = [
  70. {
  71. value: SArrowStyleType.None,
  72. label: 'None'
  73. },{
  74. value: SArrowStyleType.Basic,
  75. label: 'Basic'
  76. },{
  77. value: SArrowStyleType.Triangle,
  78. label: 'Triangle'
  79. },{
  80. value: SArrowStyleType.Diamond,
  81. label: 'Diamond'
  82. },{
  83. value: SArrowStyleType.Square,
  84. label: 'Square'
  85. },{
  86. value: SArrowStyleType.Circle,
  87. label: 'Circle'
  88. }
  89. ];
  90. view: SGraphView | undefined;
  91. item: Polyline | undefined;
  92. tableData = [
  93. {
  94. val: 'None',
  95. desc: '无样式'
  96. },{
  97. val: 'Basic',
  98. desc: '基本箭头'
  99. },
  100. {
  101. val: 'Triangle',
  102. desc: '三角形箭头'
  103. },
  104. {
  105. val: 'Diamond',
  106. desc: '菱形箭头'
  107. },
  108. {
  109. val: 'Square',
  110. desc: '方形箭头'
  111. },
  112. {
  113. val: 'Circle',
  114. desc: '圆形箭头'
  115. },
  116. ];
  117. begin:SArrowStyleType = SArrowStyleType.Basic;
  118. end:SArrowStyleType = SArrowStyleType.Basic;
  119. mounted():void {
  120. this.init()
  121. };
  122. init(){
  123. this.view = new SGraphView(this.id);
  124. const scene = new SGraphScene();
  125. this.item = new Polyline(null);
  126. scene.addItem(this.item);
  127. this.view.scene = scene;
  128. this.view.fitSceneToView();
  129. this.view.scalable = false;
  130. };
  131. changeStart(val: SArrowStyleType):void{
  132. this.item!!.begin = val
  133. };
  134. changeEnd(val: SArrowStyleType):void{
  135. this.item!!.end = val
  136. }
  137. }
  138. </script>