arrow.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  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. ];
  49. boundingRect() {
  50. return new SRect(0,0,2000,2000);
  51. }
  52. onDraw(painter) {
  53. painter.pen.lineWidth = painter.toPx(1);
  54. const style = {
  55. begin: 3,
  56. end: 3
  57. };
  58. for(let i = 0; i < this.pointList.length - 1; i++){
  59. painter.drawArrowLine(this.pointList[i], this.pointList[i+1], style)
  60. }
  61. }
  62. }
  63. export default {
  64. name: "arrow",
  65. data(){
  66. return {
  67. view:'',
  68. options: [
  69. {
  70. value: SArrowStyleType.None,
  71. label: 'None'
  72. },{
  73. value: SArrowStyleType.Basic,
  74. label: 'Basic'
  75. },{
  76. value: SArrowStyleType.Triangle,
  77. label: 'Triangle'
  78. },{
  79. value: SArrowStyleType.Diamond,
  80. label: 'Diamond'
  81. },{
  82. value: SArrowStyleType.Square,
  83. label: 'Square'
  84. },{
  85. value: SArrowStyleType.Circle,
  86. label: 'Circle'
  87. }
  88. ],
  89. item: null,
  90. tableData: [
  91. {
  92. val: 'None',
  93. desc: '无样式'
  94. },{
  95. val: 'Basic',
  96. desc: '基本箭头'
  97. },
  98. {
  99. val: 'Triangle',
  100. desc: '三角形箭头'
  101. },
  102. {
  103. val: 'Diamond',
  104. desc: '菱形箭头'
  105. },
  106. {
  107. val: 'Square',
  108. desc: '方形箭头'
  109. },
  110. {
  111. val: 'Circle',
  112. desc: '圆形箭头'
  113. },
  114. ],
  115. begin: SArrowStyleType.None,
  116. end: SArrowStyleType.None
  117. }
  118. },
  119. mounted() {
  120. this.init()
  121. },
  122. methods:{
  123. init(){
  124. this.view = new SGraphView('arrow');
  125. const scene = new SGraphScene();
  126. this.item = new Polyline(null);
  127. scene.addItem(this.item);
  128. this.view.scene = scene;
  129. this.view.fitSceneToView();
  130. // this.view.scalable = false;
  131. },
  132. changeStart(val){
  133. },
  134. changeEnd(val){
  135. }
  136. }
  137. }
  138. </script>