arrow.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  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="arrow" width="740" height="400" tabindex="0"/>
  18. </div>
  19. </template>
  20. <script>
  21. import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  22. import {SRect, SArrowStyleType, SColor, SPoint} from "@persagy-web/draw/lib"
  23. class Polyline extends SGraphItem{
  24. /** 起始点样式 */
  25. _begin = SArrowStyleType.Basic;
  26. get begin(){
  27. return this._begin;
  28. }
  29. set begin(v){
  30. this._begin = v;
  31. this.update();
  32. }
  33. /** 结束点样式 */
  34. _end = SArrowStyleType.Basic;
  35. get end(){
  36. return this._end;
  37. }
  38. set end(v){
  39. this._end = v;
  40. this.update();
  41. }
  42. pointList = [
  43. new SPoint(0, 0),
  44. new SPoint(2000, 100),
  45. new SPoint(1800, 1800),
  46. new SPoint(1200, 1800),
  47. new SPoint(1000, 1000),
  48. new SPoint(0, 0)
  49. ];
  50. boundingRect() {
  51. return new SRect(0,0,2000,1800);
  52. }
  53. onDraw(painter) {
  54. painter.pen.lineWidth = painter.toPx(1);
  55. const style = {
  56. begin: this.begin,
  57. end: this.end
  58. };
  59. for(let i = 0; i < this.pointList.length - 1; i++){
  60. painter.drawArrowLine(this.pointList[i], this.pointList[i+1], style)
  61. }
  62. }
  63. }
  64. export default {
  65. name: "arrow",
  66. data(){
  67. return {
  68. view:'',
  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. item: null,
  91. tableData: [
  92. {
  93. val: 'None',
  94. desc: '无样式'
  95. },{
  96. val: 'Basic',
  97. desc: '基本箭头'
  98. },
  99. {
  100. val: 'Triangle',
  101. desc: '三角形箭头'
  102. },
  103. {
  104. val: 'Diamond',
  105. desc: '菱形箭头'
  106. },
  107. {
  108. val: 'Square',
  109. desc: '方形箭头'
  110. },
  111. {
  112. val: 'Circle',
  113. desc: '圆形箭头'
  114. },
  115. ],
  116. begin: SArrowStyleType.None,
  117. end: SArrowStyleType.None
  118. }
  119. },
  120. mounted() {
  121. this.init()
  122. },
  123. methods:{
  124. init(){
  125. this.view = new SGraphView('arrow');
  126. const scene = new SGraphScene();
  127. this.item = new Polyline(null);
  128. scene.addItem(this.item);
  129. this.view.scene = scene;
  130. this.view.fitSceneToView();
  131. this.view.scalable = false;
  132. },
  133. changeStart(val){
  134. this.item.begin = val
  135. },
  136. changeEnd(val){
  137. this.item.end = val
  138. }
  139. }
  140. }
  141. </script>