SImgTextItem.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. import {SItemStatus} from "@saga-web/big/lib";
  2. <template>
  3. <div>
  4. <el-input v-model="input" placeholder="请输入内容"></el-input>
  5. <el-button @click="change">00000</el-button>
  6. <canvas id="editPolygon" width="740" height="400" tabindex="0"></canvas>
  7. </div>
  8. </template>
  9. <script lang="ts">
  10. import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/lib";
  11. import {SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
  12. import {SColor, SPainter, SRect, SSize, STextBaseLine} from "@saga-web/draw/lib";
  13. import {SMouseEvent} from "@saga-web/base/lib";
  14. /**
  15. * 图例item icon
  16. *
  17. * */
  18. class SImgTextItem extends SObjectItem{
  19. /** item状态 */
  20. _status:SItemStatus = SItemStatus.Create;
  21. get status():SItemStatus{
  22. return this._status;
  23. }
  24. set status(v:SItemStatus){
  25. this._status = v;
  26. this.update();
  27. }
  28. /** 是否显示文字 */
  29. _showText:boolean = true;
  30. get showText():boolean{
  31. return this._showText;
  32. }
  33. set showText(v:boolean){
  34. if (v === this._showText) {
  35. return
  36. }
  37. this._showText = v;
  38. if (v) {
  39. this.textItem.show();
  40. } else {
  41. this.textItem.hide();
  42. }
  43. }
  44. /** img Item */
  45. img: SImageItem = new SImageItem(this);
  46. /** text item */
  47. textItem: STextItem = new STextItem(this);
  48. /**
  49. * 构造体
  50. *
  51. * */
  52. constructor(parent:SGraphItem|null){
  53. super(parent);
  54. this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
  55. setTimeout(() => {
  56. this.img.width = 28;
  57. this.img.height = 28;
  58. this.update();
  59. },1000);
  60. this.img.isTransform = true;
  61. this.textItem.text = `图例item示例`;
  62. this.textItem.moveTo(16,0);
  63. this.textItem.font.textBaseLine = STextBaseLine.Middle;
  64. }
  65. /**
  66. * 宽高发发生变化
  67. *
  68. * @param oldSize 改之前的大小
  69. * @param newSize 改之后大小
  70. * */
  71. onResize(oldSize: SSize, newSize: SSize) {
  72. console.log(arguments);
  73. } // Function onResize()
  74. /**
  75. * 鼠标双击事件
  76. *
  77. * @param event 鼠标事件
  78. * @return 是否处理事件
  79. * */
  80. onDoubleClick(event: SMouseEvent): boolean {
  81. console.log('doubleclick');
  82. this.status = SItemStatus.Edit;
  83. return true;
  84. } // Function onDoubleClick()
  85. /**
  86. * 宽高发发生变化
  87. *
  88. * @return SRect 所有子对象的并集
  89. * */
  90. boundingRect(): SRect {
  91. let rect = new SRect();
  92. this.children.forEach(t => {
  93. rect = rect.unioned(t.boundingRect());
  94. });
  95. return rect;
  96. } // Function boundingRect()
  97. /**
  98. * Item绘制操作
  99. *
  100. * @param painter painter对象
  101. */
  102. onDraw(painter: SPainter): void {
  103. painter.pen.lineWidth = painter.toPx(1);
  104. painter.pen.color = new SColor("#00FF00");
  105. painter.brush.color = SColor.Transparent;
  106. painter.drawRect(this.boundingRect());
  107. super.onDraw(painter);
  108. if (this.status == SItemStatus.Edit) {
  109. this.anchorList.forEach(t => {
  110. })
  111. }
  112. } // Function onDraw()
  113. }
  114. export default {
  115. name: "ImgTextItem",
  116. data() {
  117. return {
  118. scene: null,
  119. view: null,
  120. input:'',
  121. };
  122. },
  123. mounted() {
  124. console.log(22222222222222222)
  125. this.view = new SGraphView("editPolygon");
  126. this.scene = new SGraphScene();
  127. this.view.scene = this.scene;
  128. this.init()
  129. },
  130. methods:{
  131. init(){
  132. const item = new SImgTextItem(null);
  133. item.moveable = true;
  134. this.scene.addItem(item);
  135. this.view.fitSceneToView();
  136. },
  137. change() {
  138. }
  139. }
  140. }
  141. </script>
  142. <style scoped>
  143. canvas{
  144. border:1px solid #ccc;
  145. }
  146. canvas:focus{
  147. outline: none;
  148. }
  149. </style>