Przeglądaj źródła

添加图片item类

zhangyu 5 lat temu
rodzic
commit
70fe32fa85
1 zmienionych plików z 55 dodań i 26 usunięć
  1. 55 26
      saga-web-big/src/items/SImageItem.ts

+ 55 - 26
saga-web-big/src/items/SImageItem.ts

@@ -4,13 +4,26 @@ import { SGraphItem } from "@saga-web/graph/lib";
 import { SImageShowType } from "../enums/SImageShowType";
 
 /**
- *  图片绘制
+ * 图片item
  *
- * * @author  郝建龙(1061851420@qq.com)
+ * @author  张宇(taohuzy@163.com)
  */
 export class SImageItem extends SObjectItem {
-    /** 图片地址    */
-    _url: string = "";
+    /** 图片dom */
+    img: CanvasImageSource | undefined;
+
+    /** 展示模式 */
+    private _showType: SImageShowType = SImageShowType.Full;
+    get showType(): SImageShowType {
+        return this._showType;
+    }
+    set showType(v: SImageShowType) {
+        this._showType = v;
+        this.update();
+    }
+
+    /** 图片地址 */
+    private _url: string = "";
     get url(): string {
         return this._url;
     }
@@ -19,28 +32,19 @@ export class SImageItem extends SObjectItem {
         this.img = new Image();
         this.img.src = v;
         this.img.onload = (): void => {
-            if (this.showType == SImageShowType.AutoFit) {
-                // @ts-ignore
-                this.width = this.Img.width;
-                // @ts-ignore
-                this.height = this.Img.height;
-            }
             this.update();
         };
     }
-    /** 图片dom */
-    img: CanvasImageSource | undefined;
-    /** 展示模式    */
-    showType: SImageShowType = SImageShowType.Full;
 
     /**
      * 构造函数
      *
-     *  @param parent    指向父对象
-     * */
+     * @param   parent      指向父Item
+     * @param   str         文本内容
+     */
     constructor(parent: SGraphItem | null) {
         super(parent);
-    }
+    } // Constructor
 
     /**
      * Item对象边界区域
@@ -49,12 +53,12 @@ export class SImageItem extends SObjectItem {
      */
     boundingRect(): SRect {
         return new SRect(
-            -this.width / 2,
-            -this.height / 2,
+            0,
+            0,
             this.width,
             this.height
         );
-    }
+    } // Function boundingRect()
 
     /**
      * 宽高发发生变化
@@ -69,17 +73,42 @@ export class SImageItem extends SObjectItem {
     /**
      * Item绘制操作
      *
-     * @param   painter       painter对象
+     * @param   painter      绘画类
      */
     onDraw(painter: SPainter): void {
         if (this.img) {
+            // 要绘制图片的宽度
+            let width: number = 0;
+            // 要绘制图片的宽度
+            let height: number = 0;
+            // 图片item的宽高比
+            let itemAspectRatio: number = this.width / this.height;
+            // 原始图片的宽高比
+            let imgAspectRatio: number = (this.img.width as number) / (this.img.height as number);
+            // 原始图片的高宽比
+            let imgHwRatio: number = (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.AutoFit) {
+                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;
+                }
+            }
             painter.drawImage(
                 this.img,
-                -this.width / 2,
-                -this.height / 2,
-                this.width,
-                this.height
+                0,
+                0,
+                width,
+                height
             );
         }
     } // Function onDraw()
-} // Class SImageItem
+}// Class SImageItem