MarkItem.ts 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2009-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SImageItem, SGraphItem } from "@persagy-web/graph"
  27. import { SPainter, SColor } from "@persagy-web/draw";
  28. import { SMouseEvent } from "@persagy-web/base/";
  29. export class MarkItem extends SImageItem {
  30. /** 图标数据 */
  31. data: any;
  32. /**
  33. * 构造函数
  34. */
  35. constructor(parent: SGraphItem | null, data: any) {
  36. super(parent);
  37. this.data = data;
  38. this.width = this.data.width;
  39. this.height = this.data.height;
  40. // 将原点置为图的中心
  41. this.origin.x = (this.data.width / 2);
  42. this.origin.y = (this.data.height / 2)
  43. this.zOrder = 1000;
  44. // 是否随放大缩小移动;
  45. this.isTransform = false;
  46. this.url = data.url;
  47. this.moveTo(this.data.x, this.data.y);
  48. }
  49. /**
  50. * 绘制
  51. *
  52. * @param painter 画笔
  53. */
  54. onDraw(painter: SPainter) {
  55. // 根据状态设置url
  56. // 修改原点;避免放大缩小出现位置错位的问题
  57. if (this.isLoadOver && this.img) {
  58. painter.translate(-this.origin.x, -this.origin.y);
  59. if (this.isLoadOver) {
  60. // @ts-ignore
  61. painter.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight);
  62. }
  63. // 是否选中
  64. if (this.selected) {
  65. painter.shadow.shadowBlur = 10;
  66. painter.shadow.shadowColor = new SColor(`#00000033`);
  67. painter.shadow.shadowOffsetX = 5;
  68. painter.shadow.shadowOffsetY = 5;
  69. } else {
  70. painter.shadow.shadowColor = SColor.Transparent;
  71. }
  72. painter.pen.lineWidth = this.lineWidth;
  73. painter.pen.color = this.strokeColor;
  74. painter.brush.color = SColor.Transparent;
  75. painter.drawRect(0, 0, this.width, this.height);
  76. };
  77. }
  78. /**
  79. * 鼠标移入事件
  80. *
  81. * @param event 鼠标事件
  82. */
  83. onMouseEnter(event: SMouseEvent): boolean {
  84. super.onMouseEnter(event)
  85. this.$emit("onMouseEnter", event);
  86. return true
  87. }
  88. /**
  89. * 鼠标移出事件
  90. *
  91. * @param event 鼠标事件
  92. */
  93. onMouseLeave(event: SMouseEvent): boolean {
  94. super.onMouseLeave(event);
  95. this.$emit("onMouseLeave", event);
  96. return true
  97. }
  98. /**
  99. * 点击事件
  100. */
  101. onMouseDown(event: SMouseEvent) {
  102. this.$emit("click", event);
  103. this.$emit('onMouseDown', event)
  104. return true;
  105. }
  106. }