Align.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <div>
  3. <el-button @click="addCircle">Circle</el-button>
  4. <el-button @click="addRect">Rect</el-button>
  5. <el-select placeholder="请选择" @change="changeAlign" v-model="value">
  6. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  7. </el-select>
  8. <canvas id="align" width="740" height="400" tabindex="0"></canvas>
  9. </div>
  10. </template>
  11. <script>
  12. import {SGraphItem, SGraphScene, SGraphView, SGraphLayoutType} from "@persagy-web/graph/lib";
  13. import { SColor, SPainter, SRect } from "@persagy-web/draw/lib";
  14. class RectItem extends SGraphItem {
  15. width = 200;
  16. height = 100;
  17. text = '';
  18. constructor(parent) {
  19. super(parent);
  20. this.moveable = true;
  21. this.selectable = true;
  22. this.text = new Date().getMilliseconds().toString()
  23. }
  24. boundingRect() {
  25. return new SRect(0, 0, this.width, this.height);
  26. }
  27. onDraw(canvas) {
  28. canvas.pen.color = SColor.Transparent;
  29. canvas.pen.lineWidth = canvas.toPx(1);
  30. canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
  31. canvas.drawRect(0, 0, this.width, this.height);
  32. canvas.pen.lineDash = [10,10];
  33. canvas.pen.color = SColor.Yellow;
  34. canvas.brush.color = SColor.Transparent;
  35. canvas.drawRect(this.boundingRect());
  36. canvas.brush.color = SColor.Black;
  37. canvas.drawText(`${this.x},${this.y}`,0,0);
  38. }
  39. }
  40. class CircleItem extends SGraphItem {
  41. r = 75;
  42. text = '';
  43. constructor(parent) {
  44. super(parent);
  45. this.moveable = true;
  46. this.selectable = true;
  47. this.text = new Date().getMilliseconds().toString()
  48. }
  49. boundingRect() {
  50. return new SRect(0, 0, this.r * 2, this.r * 2);
  51. }
  52. onDraw(canvas) {
  53. canvas.pen.color = SColor.Transparent;
  54. canvas.pen.lineWidth = canvas.toPx(1);
  55. canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
  56. canvas.drawCircle(this.r, this.r, this.r);
  57. canvas.pen.color = SColor.Yellow;
  58. canvas.brush.color = SColor.Transparent;
  59. canvas.pen.lineDash = [10,10];
  60. canvas.drawRect(this.boundingRect());
  61. canvas.brush.color = SColor.Black;
  62. canvas.drawText(`${this.x},${this.y}`,0,0);
  63. }
  64. }
  65. class SScene extends SGraphScene {
  66. /** 定义命令 */
  67. cmd = 0;
  68. constructor() {
  69. super();
  70. }
  71. onMouseUp(event) {
  72. switch(this.cmd) {
  73. case 1:
  74. this.addCircle(event.x, event.y);
  75. break;
  76. case 2:
  77. this.addRect(event.x, event.y);
  78. break;
  79. default:
  80. super.onMouseUp(event);
  81. }
  82. this.cmd = 0;
  83. return false
  84. }
  85. addCircle(x, y) {
  86. let item = new CircleItem(null);
  87. item.moveTo(x - 50, y - 50);
  88. this.addItem(item);
  89. }
  90. addRect(x, y) {
  91. let item = new RectItem(null);
  92. item.moveTo(x - 50, y - 50);
  93. this.addItem(item);
  94. }
  95. }
  96. class TestView extends SGraphView {
  97. constructor() {
  98. super("align");
  99. }
  100. }
  101. export default {
  102. data() {
  103. return {
  104. scene: new SScene(),
  105. value: -1,
  106. options:[
  107. {
  108. value:SGraphLayoutType.Left,
  109. label:'左对齐'
  110. },
  111. {
  112. value:SGraphLayoutType.Right,
  113. label:'右对齐'
  114. },
  115. {
  116. value:SGraphLayoutType.Top,
  117. label:'顶对齐'
  118. },
  119. {
  120. value:SGraphLayoutType.Bottom,
  121. label:'底对齐'
  122. },
  123. {
  124. value:SGraphLayoutType.Center,
  125. label:'水平居中对齐'
  126. },
  127. {
  128. value:SGraphLayoutType.Middle,
  129. label:'垂直居中对齐'
  130. },
  131. {
  132. value:SGraphLayoutType.Vertical,
  133. label:'垂直分布'
  134. },
  135. {
  136. value:SGraphLayoutType.Horizontal,
  137. label:'水平分布'
  138. }
  139. ]
  140. }
  141. },
  142. mounted() {
  143. let view = new TestView();
  144. view.scene = this.scene;//new SScene(); //this.data.scene;
  145. },
  146. methods: {
  147. addCircle() {
  148. this.scene.cmd = 1;
  149. },
  150. addRect() {
  151. this.scene.cmd = 2;
  152. },
  153. changeAlign(v){
  154. this.scene.selectContainer.layout(v)
  155. // console.log(this.scene.selectContainer.layout(SGraphLayoutType.Left))
  156. }
  157. }
  158. }
  159. </script>
  160. <style scoped>
  161. </style>