SImageItem.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.SImageItem = void 0;
  4. const SObjectItem_1 = require("./SObjectItem");
  5. const lib_1 = require("@persagy-web/draw/lib");
  6. const __1 = require("..");
  7. class SImageItem extends SObjectItem_1.SObjectItem {
  8. constructor(parent, url) {
  9. super(parent);
  10. this._showType = __1.SImageShowType.Full;
  11. this._strokeColor = lib_1.SColor.Transparent;
  12. this._lineWidth = 1;
  13. this._originPosition = __1.STextOrigin.LeftTop;
  14. this.isLoadOver = false;
  15. this.imgWidth = this.width;
  16. this.imgHeight = this.height;
  17. this._url = "";
  18. if (url)
  19. this.url = url;
  20. }
  21. get showType() {
  22. return this._showType;
  23. }
  24. set showType(v) {
  25. this._showType = v;
  26. this.computeImgSize();
  27. this.update();
  28. }
  29. get strokeColor() {
  30. return this._strokeColor;
  31. }
  32. set strokeColor(v) {
  33. this._strokeColor = v;
  34. this.update();
  35. }
  36. get lineWidth() {
  37. return this._lineWidth;
  38. }
  39. set lineWidth(v) {
  40. this._lineWidth = v;
  41. this.update();
  42. }
  43. get originPosition() {
  44. return this._originPosition;
  45. }
  46. set originPosition(v) {
  47. this._originPosition = v;
  48. this.update();
  49. }
  50. get url() {
  51. return this._url;
  52. }
  53. set url(v) {
  54. this._url = v;
  55. this.img = new Image();
  56. this.img.onload = (e) => {
  57. const imgSrc = e.path[0].src;
  58. if (this.isUrlIdentical(imgSrc)) {
  59. this.isLoadOver = true;
  60. this.computeImgSize();
  61. this.$emit("imgLoadOver");
  62. this.update();
  63. }
  64. };
  65. this.img.onerror = (e) => {
  66. const imgSrc = e.path[0].src;
  67. if (this.isUrlIdentical(imgSrc)) {
  68. this.isLoadOver = false;
  69. this.$emit("imgLoadOver");
  70. this.update();
  71. console.log("加载图片错误!", e);
  72. }
  73. };
  74. this.img.src = v;
  75. }
  76. computeImgSize() {
  77. if (this.isLoadOver) {
  78. let width = 0;
  79. let height = 0;
  80. let itemAspectRatio = this.width / this.height;
  81. let imgAspectRatio = this.img.width / this.img.height;
  82. let imgHwRatio = this.img.height / this.img.width;
  83. if (this.showType == __1.SImageShowType.Full) {
  84. width = this.width;
  85. height = this.height;
  86. }
  87. else if (this.showType == __1.SImageShowType.Equivalency) {
  88. if (itemAspectRatio > imgAspectRatio) {
  89. height = this.height;
  90. width = imgAspectRatio * height;
  91. }
  92. else if (itemAspectRatio < imgAspectRatio) {
  93. width = this.width;
  94. height = width * imgHwRatio;
  95. }
  96. else {
  97. width = this.width;
  98. height = this.height;
  99. }
  100. }
  101. else if (this.showType == __1.SImageShowType.AutoFit) {
  102. this.width = this.img.width;
  103. this.height = this.img.height;
  104. width = this.width;
  105. height = this.height;
  106. }
  107. this.imgWidth = width;
  108. this.imgHeight = height;
  109. if (this.originPosition == __1.STextOrigin.Centrum) {
  110. this.origin = new lib_1.SPoint(this.width / 2, this.height / 2);
  111. }
  112. }
  113. }
  114. isUrlIdentical(imgUrl) {
  115. if (this.url.indexOf("://") == -1) {
  116. const reg = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
  117. if (reg.test(this.url)) {
  118. if (this.url == imgUrl) {
  119. return true;
  120. }
  121. else {
  122. return false;
  123. }
  124. }
  125. else {
  126. if (this.url == this.GetUrlRelativePath(imgUrl)) {
  127. return true;
  128. }
  129. else {
  130. return false;
  131. }
  132. }
  133. }
  134. else {
  135. if (this.url == imgUrl) {
  136. return true;
  137. }
  138. else {
  139. return false;
  140. }
  141. }
  142. }
  143. GetUrlRelativePath(url) {
  144. var arrUrl = url.split("//");
  145. var start = arrUrl[1].indexOf("/");
  146. var relUrl = arrUrl[1].substring(start);
  147. return relUrl;
  148. }
  149. boundingRect() {
  150. return new lib_1.SRect(-this.origin.x, -this.origin.y, this.width, this.height);
  151. }
  152. onResize(oldSize, newSize) {
  153. this.computeImgSize();
  154. this.update();
  155. }
  156. onDraw(painter) {
  157. painter.translate(-this.origin.x, -this.origin.y);
  158. if (this.isLoadOver) {
  159. painter.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight);
  160. }
  161. if (this.selected) {
  162. painter.shadow.shadowBlur = 10;
  163. painter.shadow.shadowColor = new lib_1.SColor(`#00000033`);
  164. painter.shadow.shadowOffsetX = 5;
  165. painter.shadow.shadowOffsetY = 5;
  166. }
  167. else {
  168. painter.shadow.shadowColor = lib_1.SColor.Transparent;
  169. }
  170. painter.pen.lineWidth = this.lineWidth;
  171. painter.pen.color = this.strokeColor;
  172. painter.brush.color = lib_1.SColor.Transparent;
  173. painter.drawRect(0, 0, this.width, this.height);
  174. }
  175. }
  176. exports.SImageItem = SImageItem;