SImgTextItem.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <div>
  3. <el-button @click="changemaodian">切换锚点显示状态</el-button>
  4. <el-button @click="changetext">切换文本显示状态</el-button>
  5. <canvas id="editPolygon" width="740" height="400" tabindex="0"></canvas>
  6. </div>
  7. </template>
  8. <script lang="ts">
  9. import {SGraphItem, SGraphScene, SGraphView, SObjectItem, STextItem, SImageItem, SAnchorItem} from "@persagy-web/graph/lib";
  10. import { SItemStatus }from "@persagy-web/big/lib";
  11. import {SColor, SPainter, SRect, SSize} from "@persagy-web/draw/lib";
  12. import {SMouseEvent} from "@persagy-web/base/lib";
  13. /**
  14. * 图例item icon
  15. *
  16. * */
  17. class SImgTextItem extends SObjectItem {
  18. /** item状态 */
  19. _status: SItemStatus = SItemStatus.Normal;
  20. get status(): SItemStatus {
  21. return this._status;
  22. }
  23. set status(v: SItemStatus) {
  24. this._status = v;
  25. this.update();
  26. }
  27. /** 是否显示文字 */
  28. _showText: boolean = true;
  29. get showText(): boolean {
  30. return this._showText;
  31. }
  32. set showText(v: boolean) {
  33. if (v === this._showText) {
  34. return
  35. }
  36. this._showText = v;
  37. this.textItem.visible = v;
  38. }
  39. /** 是否显示锚点 */
  40. _showAnchor: boolean = false;
  41. get showAnchor():boolean{
  42. return this._showAnchor;
  43. }
  44. set showAnchor(v:boolean){
  45. this._showAnchor = v;
  46. this.anchorList.forEach(t => {
  47. t.visible = v;
  48. })
  49. }
  50. /** X轴坐标 */
  51. get x(): number {
  52. return this.pos.x;
  53. } // Get x
  54. set x(v: number) {
  55. this.pos.x = v;
  56. this.$emit("changePos");
  57. this.update();
  58. } // Set x
  59. /** Y轴坐标 */
  60. get y(): number {
  61. return this.pos.y;
  62. } // Get y
  63. set y(v: number) {
  64. this.pos.y = v;
  65. this.$emit("changePos");
  66. this.update();
  67. } // Set y
  68. /** img Item */
  69. img: SImageItem = new SImageItem(this);
  70. /** text item */
  71. textItem: STextItem = new STextItem(this);
  72. /**
  73. * 构造体
  74. *
  75. * */
  76. constructor(parent: SGraphItem | null) {
  77. super(parent);
  78. this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
  79. this.img.width = 32;
  80. this.img.height = 32;
  81. let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
  82. this.anchorList = anchorPoint.map(t => {
  83. let item = new SAnchorItem(this);
  84. item.moveTo(t.x, t.y);
  85. return item;
  86. });
  87. this.update();
  88. this.textItem.text = "x2";
  89. this.textItem.moveTo(18, -6);
  90. this.moveable = true;
  91. this.selectable = true;
  92. this.textItem.enabled = false;
  93. this.img.enabled = false;
  94. }
  95. onMouseEnter(event: SMouseEvent): boolean {
  96. this.showAnchor = true;
  97. return true;
  98. }
  99. onMouseLeave(event: SMouseEvent): boolean {
  100. this.showAnchor = false;
  101. return true;
  102. }
  103. onMouseMove(event: SMouseEvent): boolean {
  104. return super.onMouseMove(event);
  105. }
  106. /**
  107. * 鼠标按下事件
  108. *
  109. * */
  110. onMouseDown(event: SMouseEvent): boolean {
  111. console.log(this.textItem)
  112. if (this.status == SItemStatus.Normal) {
  113. return super.onMouseDown(event);
  114. } else if (this.status == SItemStatus.Edit) {
  115. return super.onMouseDown(event);
  116. }
  117. return true;
  118. } // Function onMouseDown()
  119. /**
  120. * 宽高发发生变化
  121. *
  122. * @param oldSize 改之前的大小
  123. * @param newSize 改之后大小
  124. * */
  125. onResize(oldSize: SSize, newSize: SSize) {
  126. console.log(arguments);
  127. } // Function onResize()
  128. /**
  129. * 鼠标双击事件
  130. *
  131. * @param event 鼠标事件
  132. * @return 是否处理事件
  133. * */
  134. onDoubleClick(event: SMouseEvent): boolean {
  135. this.status = SItemStatus.Edit;
  136. return true;
  137. } // Function onDoubleClick()
  138. /**
  139. * 宽高发发生变化
  140. *
  141. * @return SRect 所有子对象的并集
  142. * */
  143. boundingRect(): SRect {
  144. let rect = this.img.boundingRect().adjusted(this.img.pos.x,this.img.pos.y,0,0);
  145. if (this.showText) {
  146. rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x,this.textItem.pos.y,0,0))
  147. }
  148. return rect;
  149. } // Function boundingRect()
  150. /**
  151. * Item绘制操作
  152. *
  153. * @param painter painter对象
  154. */
  155. onDraw(painter: SPainter): void {
  156. painter.pen.lineWidth = painter.toPx(1);
  157. painter.pen.color = new SColor("#00FF00");
  158. painter.brush.color = SColor.Transparent;
  159. if (this.showAnchor) {
  160. painter.brush.color = SColor.Gray
  161. }
  162. painter.drawRect(this.boundingRect());
  163. } // Function onDraw()
  164. }
  165. export default {
  166. name: "ImgTextItem",
  167. data() {
  168. return {
  169. scene: null,
  170. view: null,
  171. input:'',
  172. };
  173. },
  174. mounted() {
  175. console.log(22222222222222222)
  176. // @ts-ignore
  177. this.view = new SGraphView("editPolygon");
  178. // @ts-ignore
  179. this.scene = new SGraphScene();
  180. // @ts-ignore
  181. this.view.scene = this.scene;
  182. // @ts-ignore
  183. this.init()
  184. },
  185. methods:{
  186. init(){
  187. // @ts-ignore
  188. this.item = new SImgTextItem(null);
  189. // @ts-ignore
  190. this.item.moveable = true;
  191. // @ts-ignore
  192. this.scene.addItem(this.item);
  193. // this.view.fitSceneToView();
  194. },
  195. changemaodian(){
  196. // @ts-ignore
  197. this.item.showAnchor = !this.item.showAnchor;
  198. },
  199. changetext(){
  200. // @ts-ignore
  201. this.item.showText = !this.item.showText;
  202. }
  203. }
  204. }
  205. </script>
  206. <style scoped>
  207. canvas{
  208. border:1px solid #ccc;
  209. }
  210. canvas:focus{
  211. outline: none;
  212. }
  213. </style>