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