|
@@ -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
|