Browse Source

'添加图片尺寸修改方式'

zhangyu 5 years ago
parent
commit
bf5b88b3e7
1 changed files with 55 additions and 37 deletions
  1. 55 37
      saga-web-graph/src/items/SImageItem.ts

+ 55 - 37
saga-web-graph/src/items/SImageItem.ts

@@ -19,12 +19,19 @@ export class SImageItem extends SObjectItem {
     }
     set showType(v: SImageShowType) {
         this._showType = v;
+        this.computeImgSize();
         this.update();
     }
 
     /** 图片加载是否完成 */
     isLoadOver: boolean = false;
 
+    /** 图片的宽度 */
+    private imgWidth: number = this.width;
+
+    /** 图片的高度 */
+    private imgHeight: number = this.height;
+
     /** 图片地址 */
     private _url: string = "";
     get url(): string {
@@ -35,7 +42,9 @@ export class SImageItem extends SObjectItem {
         this.img = new Image();
         this.img.src = v;
         this.img.onload = (): void => {
+            this.computeImgSize();
             this.isLoadOver = true;
+            this.$emit("imgLoadOver");
             this.update();
         };
         this.img.onerror = (e): void => {
@@ -58,6 +67,50 @@ export class SImageItem extends SObjectItem {
     } // Constructor
 
     /**
+     * 根据显示模式计算图片的宽高
+     */
+    computeImgSize(): void {
+        // 要绘制图片的宽度
+        let width = 0;
+        // 要绘制图片的宽度
+        let height = 0;
+        // 图片item的宽高比
+        let itemAspectRatio: number = this.width / this.height;
+        // 原始图片的宽高比
+        let imgAspectRatio: number =
+            // @ts-ignore
+            (this.img.width as number) / (this.img.height as number);
+        // 原始图片的高宽比
+        let imgHwRatio: number =
+            // @ts-ignore
+            (this.img.height as number) / (this.img.width as number);
+        if (this.showType == SImageShowType.Full) {
+            width = this.width;
+            height = this.height;
+        } else if (this.showType == SImageShowType.Equivalency) {
+            if (itemAspectRatio > imgAspectRatio) {
+                height = this.height;
+                width = imgAspectRatio * height;
+            } else if (itemAspectRatio < imgAspectRatio) {
+                width = this.width;
+                height = width * imgHwRatio;
+            } else {
+                width = this.width;
+                height = this.height;
+            }
+        } else if (this.showType == SImageShowType.AutoFit) {
+            // @ts-ignore
+            this.width = this.img.width as number;
+            // @ts-ignore
+            this.height = this.img.height as number;
+            width = this.width;
+            height = this.height;
+        }
+        this.imgWidth = width;
+        this.imgHeight = height;
+    } // Function computeImgSize()
+
+    /**
      * Item对象边界区域
      *
      * @return	SRect
@@ -78,6 +131,7 @@ export class SImageItem extends SObjectItem {
      * @param   newSize 改之后大小
      * */
     protected onResize(oldSize: SSize, newSize: SSize): void {
+        this.computeImgSize();
         this.update();
     } // Function onResize()
 
@@ -88,44 +142,8 @@ export class SImageItem extends SObjectItem {
      */
     onDraw(painter: SPainter): void {
         if (this.isLoadOver) {
-            // 要绘制图片的宽度
-            let width = 0;
-            // 要绘制图片的宽度
-            let height = 0;
-            // 图片item的宽高比
-            let itemAspectRatio: number = this.width / this.height;
-            // 原始图片的宽高比
-            let imgAspectRatio: number =
-                // @ts-ignore
-                (this.img.width as number) / (this.img.height as number);
-            // 原始图片的高宽比
-            let imgHwRatio: number =
-                // @ts-ignore
-                (this.img.height as number) / (this.img.width as number);
-            if (this.showType == SImageShowType.Full) {
-                width = this.width;
-                height = this.height;
-            } else if (this.showType == SImageShowType.Equivalency) {
-                if (itemAspectRatio > imgAspectRatio) {
-                    height = this.height;
-                    width = imgAspectRatio * height;
-                } else if (itemAspectRatio < imgAspectRatio) {
-                    width = this.width;
-                    height = width * imgHwRatio;
-                } else {
-                    width = this.width;
-                    height = this.height;
-                }
-            } else if (this.showType == SImageShowType.AutoFit) {
-                // @ts-ignore
-                this.width = this.img.width as number;
-                // @ts-ignore
-                this.height = this.img.height as number;
-                width = this.width;
-                height = this.height;
-            }
             // @ts-ignore
-            painter.drawImage(this.img, -width / 2, -height / 2, width, height);
+            painter.drawImage(this.img, -this.imgWidth / 2, -this.imgHeight / 2, this.imgWidth, this.imgHeight);
             if (this.selected) {
               painter.pen.lineWidth = 4;
               painter.pen.lineDash = [12, 28];