Pārlūkot izejas kodu

'优化图片渲染'

zhangyu 5 gadi atpakaļ
vecāks
revīzija
2489a0eb03
1 mainītis faili ar 59 papildinājumiem un 8 dzēšanām
  1. 59 8
      saga-web-graph/src/items/SImageItem.ts

+ 59 - 8
saga-web-graph/src/items/SImageItem.ts

@@ -70,16 +70,24 @@ export class SImageItem extends SObjectItem {
     set url(v: string) {
         this._url = v;
         this.img = new Image();
-        this.img.onload = (): void => {
-            this.isLoadOver = true;
-            this.computeImgSize();
-            this.$emit("imgLoadOver");
-            this.update();
+        this.img.onload = (e): void => {
+            // @ts-ignore
+            const imgSrc = e.path[0].src;
+            if (this.isUrlIdentical(imgSrc)) {
+                this.isLoadOver = true;
+                this.computeImgSize();
+                this.$emit("imgLoadOver");
+                this.update();
+            }
         };
         this.img.onerror = (e): void => {
-            this.isLoadOver = false;
-            this.update();
-            console.log("加载图片错误!", e);
+            // @ts-ignore
+            const imgSrc = e.path[0].src;
+            if (this.isUrlIdentical(imgSrc)) {
+                this.isLoadOver = false;
+                this.update();
+                console.log("加载图片错误!", e);
+            }
         };
         this.img.src = v;
     }
@@ -146,6 +154,49 @@ export class SImageItem extends SObjectItem {
     } // Function computeImgSize()
 
     /**
+     * 判断当前地址和回调地址是否相同
+     * @param   imgUrl      图片回调地址
+     * 
+     */
+    private isUrlIdentical(imgUrl: string): boolean {
+        if (this.url.indexOf("://") == -1) {
+            const reg = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
+            if (reg.test(this.url)) {// url是base64地址
+                if(this.url == imgUrl) {
+                    return true;
+                } else {
+                    return false;
+                }
+            } else {// url是相对地址
+                if (this.url == this.GetUrlRelativePath(imgUrl)) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+        } else {// url是绝对地址
+            if(this.url == imgUrl) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+            
+    } // Function isUrlIdentical()
+
+    /**
+     * 截取绝对路径中的相对路径
+     * @param   url      绝对路径
+     * 
+     */
+    private GetUrlRelativePath(url: string): string {
+        var arrUrl = url.split("//");
+        var start = arrUrl[1].indexOf("/");
+      var relUrl = arrUrl[1].substring(start);
+        return relUrl;
+    } // Function GetUrlRelativePath()
+
+    /**
      * Item对象边界区域
      *
      * @return	SRect