|
@@ -62,16 +62,15 @@ export class SImageItem extends SObjectItem {
|
|
|
this.img = new Image();
|
|
|
this.img.src = v;
|
|
|
this.img.onload = (): void => {
|
|
|
- this.computeImgSize();
|
|
|
this.isLoadOver = true;
|
|
|
+ this.computeImgSize();
|
|
|
this.$emit("imgLoadOver");
|
|
|
this.update();
|
|
|
};
|
|
|
this.img.onerror = (e): void => {
|
|
|
this.isLoadOver = false;
|
|
|
this.update();
|
|
|
- console.log("加载图片错误!");
|
|
|
- console.log(e);
|
|
|
+ console.log("加载图片错误!", e);
|
|
|
};
|
|
|
}
|
|
|
|
|
@@ -90,44 +89,46 @@ export class SImageItem extends SObjectItem {
|
|
|
* 根据显示模式计算图片的宽高
|
|
|
*/
|
|
|
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) {
|
|
|
+ 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 = width * imgHwRatio;
|
|
|
- } else {
|
|
|
+ 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;
|
|
|
}
|
|
|
- } 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;
|
|
|
}
|
|
|
- this.imgWidth = width;
|
|
|
- this.imgHeight = height;
|
|
|
} // Function computeImgSize()
|
|
|
|
|
|
/**
|
|
@@ -157,7 +158,7 @@ export class SImageItem extends SObjectItem {
|
|
|
*/
|
|
|
onDraw(painter: SPainter): void {
|
|
|
painter.translate(-this.origin.x, -this.origin.y);
|
|
|
- if (this.isLoadOver && this.url) {
|
|
|
+ if (this.isLoadOver) {
|
|
|
// @ts-ignore
|
|
|
painter.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight);
|
|
|
}
|