Align.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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, SGraphLayoutType, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  13. import { SColor, SRect } from "@persagy-web/draw/lib";
  14. /**
  15. * 对其
  16. *
  17. * @author 郝洁 <haojie@persagy.com>
  18. */
  19. class RectItem extends SGraphItem {
  20. width = 200;
  21. height = 100;
  22. text = '';
  23. constructor(parent) {
  24. super(parent);
  25. this.moveable = true;
  26. this.selectable = true;
  27. this.text = new Date().getMilliseconds().toString()
  28. }
  29. /**
  30. * 矩形数据类型绘制
  31. *
  32. * @return 边界区域
  33. */
  34. boundingRect() {
  35. return new SRect(0, 0, this.width, this.height);
  36. }
  37. /**
  38. * Item 绘制操作
  39. * @param canvas 绘制对象
  40. */
  41. onDraw(canvas) {
  42. canvas.pen.color = SColor.Transparent;
  43. canvas.pen.lineWidth = canvas.toPx(1);
  44. canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
  45. canvas.drawRect(0, 0, this.width, this.height);
  46. canvas.pen.lineDash = [10, 10];
  47. canvas.pen.color = SColor.Yellow;
  48. canvas.brush.color = SColor.Transparent;
  49. canvas.drawRect(this.boundingRect());
  50. canvas.brush.color = SColor.Black;
  51. canvas.drawText(`${this.x},${this.y}`, 0, 0);
  52. }
  53. }
  54. class CircleItem extends SGraphItem {
  55. r = 75;
  56. text = '';
  57. constructor(parent) {
  58. super(parent);
  59. this.moveable = true;
  60. this.selectable = true;
  61. this.text = new Date().getMilliseconds().toString()
  62. }
  63. /**
  64. * 矩形数据类型绘制
  65. *
  66. * @return 边界区域
  67. */
  68. boundingRect() {
  69. return new SRect(0, 0, this.r * 2, this.r * 2);
  70. }
  71. onDraw(canvas) {
  72. canvas.pen.color = SColor.Transparent;
  73. canvas.pen.lineWidth = canvas.toPx(1);
  74. canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
  75. canvas.drawCircle(this.r, this.r, this.r);
  76. canvas.pen.color = SColor.Yellow;
  77. canvas.brush.color = SColor.Transparent;
  78. canvas.pen.lineDash = [10, 10];
  79. canvas.drawRect(this.boundingRect());
  80. canvas.brush.color = SColor.Black;
  81. canvas.drawText(`${this.x},${this.y}`, 0, 0);
  82. }
  83. }
  84. class SScene extends SGraphScene {
  85. /** 定义命令 */
  86. cmd = 0;
  87. /**
  88. * 构造函数
  89. */
  90. constructor() {
  91. super();
  92. }
  93. /**
  94. * 鼠标抬起事件
  95. *
  96. * @param event 事件参数
  97. * @return 是否处理
  98. */
  99. onMouseUp(event) {
  100. switch (this.cmd) {
  101. case 1:
  102. this.addCircle(event.x, event.y);
  103. break;
  104. case 2:
  105. this.addRect(event.x, event.y);
  106. break;
  107. default:
  108. super.onMouseUp(event);
  109. }
  110. this.cmd = 0;
  111. return false
  112. }
  113. /**
  114. * 添加圆形
  115. * @param x x轴
  116. * @param y y轴
  117. */
  118. addCircle(x, y) {
  119. let item = new CircleItem(null);
  120. item.moveTo(x - 50, y - 50);
  121. this.addItem(item);
  122. }
  123. addRect(x, y) {
  124. let item = new RectItem(null);
  125. item.moveTo(x - 50, y - 50);
  126. this.addItem(item);
  127. }
  128. }
  129. class TestView extends SGraphView {
  130. /**
  131. * 构造函数
  132. */
  133. constructor() {
  134. super("align");
  135. }
  136. }
  137. export default {
  138. data() {
  139. return {
  140. /** 命令所属的场景类 */
  141. scene: new SScene(),
  142. value: -1,
  143. options: [
  144. {
  145. value: SGraphLayoutType.Left,
  146. label: '左对齐'
  147. },
  148. {
  149. value: SGraphLayoutType.Right,
  150. label: '右对齐'
  151. },
  152. {
  153. value: SGraphLayoutType.Top,
  154. label: '顶对齐'
  155. },
  156. {
  157. value: SGraphLayoutType.Bottom,
  158. label: '底对齐'
  159. },
  160. {
  161. value: SGraphLayoutType.Center,
  162. label: '水平居中对齐'
  163. },
  164. {
  165. value: SGraphLayoutType.Middle,
  166. label: '垂直居中对齐'
  167. },
  168. {
  169. value: SGraphLayoutType.Vertical,
  170. label: '垂直分布'
  171. },
  172. {
  173. value: SGraphLayoutType.Horizontal,
  174. label: '水平分布'
  175. }
  176. ]
  177. }
  178. },
  179. /**
  180. * 页面挂载
  181. */
  182. mounted() {
  183. let view = new TestView();
  184. view.scene = this.scene;//new SScene(); //this.data.scene;
  185. },
  186. methods: {
  187. addCircle() {
  188. this.scene.cmd = 1;
  189. },
  190. addRect() {
  191. this.scene.cmd = 2;
  192. },
  193. changeAlign(v) {
  194. this.scene.selectContainer.layout(v)
  195. // console.log(this.scene.selectContainer.layout(SGraphLayoutType.Left))
  196. }
  197. }
  198. }
  199. </script>
  200. <style scoped>
  201. </style>