SImgTextItem.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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} from "@saga-web/graph/lib";
  10. import {SAnchorItem, SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
  11. import {SColor, SPainter, SRect, SSize, STextBaseLine} from "@saga-web/draw/lib";
  12. import {SMouseEvent} from "@saga-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 = "请填写文本";
  89. this.textItem.moveTo(16, -6);
  90. this.moveable = true;
  91. this.selectable = true;
  92. }
  93. onMouseEnter(event: SMouseEvent): boolean {
  94. this.showAnchor = true;
  95. return true;
  96. }
  97. onMouseLeave(event: SMouseEvent): boolean {
  98. this.showAnchor = false;
  99. return true;
  100. }
  101. onMouseMove(event: SMouseEvent): boolean {
  102. return super.onMouseMove(event);
  103. }
  104. /**
  105. * 鼠标按下事件
  106. *
  107. * */
  108. onMouseDown(event: SMouseEvent): boolean {
  109. if (this.status == SItemStatus.Normal) {
  110. return super.onMouseDown(event);
  111. } else if (this.status == SItemStatus.Edit) {
  112. return super.onMouseDown(event);
  113. }
  114. return true;
  115. } // Function onMouseDown()
  116. /**
  117. * 宽高发发生变化
  118. *
  119. * @param oldSize 改之前的大小
  120. * @param newSize 改之后大小
  121. * */
  122. onResize(oldSize: SSize, newSize: SSize) {
  123. console.log(arguments);
  124. } // Function onResize()
  125. /**
  126. * 鼠标双击事件
  127. *
  128. * @param event 鼠标事件
  129. * @return 是否处理事件
  130. * */
  131. onDoubleClick(event: SMouseEvent): boolean {
  132. console.log('doubleclick');
  133. this.status = SItemStatus.Edit;
  134. return true;
  135. } // Function onDoubleClick()
  136. /**
  137. * 宽高发发生变化
  138. *
  139. * @return SRect 所有子对象的并集
  140. * */
  141. boundingRect(): SRect {
  142. let rect :SRect = new SRect();
  143. this.children.forEach(t => {
  144. if (rect.isNull()) {
  145. rect = t.boundingRect().adjusted(t.pos.x,t.pos.y,0,0);
  146. } else {
  147. rect = rect.unioned(t.boundingRect().adjusted(t.pos.x,t.pos.y,0,0));
  148. }
  149. });
  150. return rect;
  151. } // Function boundingRect()
  152. /**
  153. * Item绘制操作
  154. *
  155. * @param painter painter对象
  156. */
  157. onDraw(painter: SPainter): void {
  158. painter.pen.lineWidth = painter.toPx(1);
  159. painter.pen.color = new SColor("#00FF00");
  160. painter.brush.color = SColor.Transparent;
  161. if (this.showAnchor) {
  162. painter.brush.color = SColor.Gray
  163. }
  164. painter.drawRect(this.boundingRect());
  165. // super.onDraw(painter);
  166. } // Function onDraw()
  167. }
  168. export default {
  169. name: "ImgTextItem",
  170. data() {
  171. return {
  172. scene: null,
  173. view: null,
  174. input:'',
  175. };
  176. },
  177. mounted() {
  178. console.log(22222222222222222)
  179. this.view = new SGraphView("editPolygon");
  180. this.scene = new SGraphScene();
  181. this.view.scene = this.scene;
  182. this.init()
  183. },
  184. methods:{
  185. init(){
  186. this.item = new SImgTextItem(null);
  187. this.item.moveable = true;
  188. this.scene.addItem(this.item);
  189. // this.view.fitSceneToView();
  190. },
  191. change() {
  192. },
  193. changemaodian(){
  194. this.item.showAnchor = !this.item.showAnchor;
  195. },
  196. changetext(){
  197. this.item.showText = !this.item.showText;
  198. }
  199. }
  200. }
  201. </script>
  202. <style scoped>
  203. canvas{
  204. border:1px solid #ccc;
  205. }
  206. canvas:focus{
  207. outline: none;
  208. }
  209. </style>