|
@@ -1,15 +1,15 @@
|
|
|
import { SObjectItem } from "./SObjectItem";
|
|
|
-import { SPainter, SRect, SSize, SColor, SPoint } from "@saga-web/draw/lib";
|
|
|
+import { SColor, SPainter, SPoint, SRect, SSize } from "@saga-web/draw";
|
|
|
import { SImageShowType, STextOrigin } from "..";
|
|
|
import { SGraphItem } from "../SGraphItem";
|
|
|
|
|
|
/**
|
|
|
- * 图片item
|
|
|
+ * 图片 item
|
|
|
*
|
|
|
- * @author 张宇(taohuzy@163.com)
|
|
|
+ * @author 张宇 <taohuzy@163.com>
|
|
|
*/
|
|
|
export class SImageItem extends SObjectItem {
|
|
|
- /** 图片dom */
|
|
|
+ /** 图片 dom */
|
|
|
img: CanvasImageSource | undefined;
|
|
|
|
|
|
/** 展示模式 */
|
|
@@ -43,7 +43,7 @@ export class SImageItem extends SObjectItem {
|
|
|
this.update();
|
|
|
}
|
|
|
|
|
|
- /** 原点位置 */
|
|
|
+ /** 原点位置 */
|
|
|
private _originPosition: STextOrigin = STextOrigin.LeftTop;
|
|
|
get originPosition(): STextOrigin {
|
|
|
return this._originPosition;
|
|
@@ -71,23 +71,13 @@ export class SImageItem extends SObjectItem {
|
|
|
this._url = v;
|
|
|
this.img = new Image();
|
|
|
this.img.onload = (e): void => {
|
|
|
- const isiOS = !!navigator.userAgent.match(
|
|
|
- /\(i[^;]+;( U;)? CPU.+Mac OS X/
|
|
|
- ); //ios终端
|
|
|
- if (isiOS) {
|
|
|
+ // @ts-ignore
|
|
|
+ const imgSrc = e.path[0].src;
|
|
|
+ if (this.isUrlIdentical(imgSrc)) {
|
|
|
this.isLoadOver = true;
|
|
|
this.computeImgSize();
|
|
|
this.$emit("imgLoadOver");
|
|
|
this.update();
|
|
|
- } else {
|
|
|
- // @ts-ignore
|
|
|
- const imgSrc = e.path[0].src;
|
|
|
- if (this.isUrlIdentical(imgSrc)) {
|
|
|
- this.isLoadOver = true;
|
|
|
- this.computeImgSize();
|
|
|
- this.$emit("imgLoadOver");
|
|
|
- this.update();
|
|
|
- }
|
|
|
}
|
|
|
};
|
|
|
this.img.onerror = (e): void => {
|
|
@@ -106,13 +96,13 @@ export class SImageItem extends SObjectItem {
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
|
- * @param parent 指向父Item
|
|
|
- * @param url 图片地址
|
|
|
+ * @param parent 指向父 Item
|
|
|
+ * @param url 图片地址
|
|
|
*/
|
|
|
constructor(parent: SGraphItem | null, url?: string) {
|
|
|
super(parent);
|
|
|
if (url) this.url = url;
|
|
|
- } // Constructor
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 根据显示模式计算图片的宽高
|
|
@@ -123,7 +113,7 @@ export class SImageItem extends SObjectItem {
|
|
|
let width = 0;
|
|
|
// 要绘制图片的宽度
|
|
|
let height = 0;
|
|
|
- // 图片item的宽高比
|
|
|
+ // 图片 item 的宽高比
|
|
|
let itemAspectRatio: number = this.width / this.height;
|
|
|
// 原始图片的宽高比
|
|
|
let imgAspectRatio: number =
|
|
@@ -158,79 +148,73 @@ export class SImageItem extends SObjectItem {
|
|
|
this.imgWidth = width;
|
|
|
this.imgHeight = height;
|
|
|
// 设置原点位置(默认左上角)
|
|
|
- if (this.originPosition == STextOrigin.Centrum) {
|
|
|
+ if (this.originPosition == STextOrigin.Center) {
|
|
|
this.origin = new SPoint(this.width / 2, this.height / 2);
|
|
|
}
|
|
|
}
|
|
|
- } // Function computeImgSize()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 判断当前地址和回调地址是否相同
|
|
|
- * @param imgUrl 图片回调地址
|
|
|
*
|
|
|
+ * @param imgUrl 图片回调地址
|
|
|
+ * @return 当前地址和回调地址是否相同
|
|
|
*/
|
|
|
private isUrlIdentical(imgUrl: string): boolean {
|
|
|
if (this.url.indexOf("://") == -1) {
|
|
|
+ // eslint-disable-next-line max-len
|
|
|
const reg = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
|
|
|
- if (reg.test(this.url)) {// url是base64地址
|
|
|
- if(this.url == imgUrl) {
|
|
|
- return true;
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- } else {// url是相对地址
|
|
|
- if (this.url == this.GetUrlRelativePath(imgUrl)) {
|
|
|
- return true;
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- }
|
|
|
- } else {// url是绝对地址
|
|
|
- if(this.url == imgUrl) {
|
|
|
- return true;
|
|
|
+ if (reg.test(this.url)) {
|
|
|
+ return this.url == imgUrl;
|
|
|
} else {
|
|
|
- return false;
|
|
|
+ return this.url == this.GetUrlRelativePath(imgUrl);
|
|
|
}
|
|
|
+ } else {
|
|
|
+ return this.url == imgUrl;
|
|
|
}
|
|
|
-
|
|
|
- } // Function isUrlIdentical()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 截取绝对路径中的相对路径
|
|
|
- * @param url 绝对路径
|
|
|
*
|
|
|
+ * @param url 绝对路径
|
|
|
+ * @return 截取出的绝对路径中的相对路径
|
|
|
*/
|
|
|
private GetUrlRelativePath(url: string): string {
|
|
|
- var arrUrl = url.split("//");
|
|
|
- var start = arrUrl[1].indexOf("/");
|
|
|
- var relUrl = arrUrl[1].substring(start);
|
|
|
- return relUrl;
|
|
|
- } // Function GetUrlRelativePath()
|
|
|
+ const arrUrl = url.split("//");
|
|
|
+ const start = arrUrl[1].indexOf("/");
|
|
|
+ return arrUrl[1].substring(start);
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Item对象边界区域
|
|
|
+ * Item 对象边界区域
|
|
|
*
|
|
|
- * @return SRect
|
|
|
+ * @return 边界区域
|
|
|
*/
|
|
|
boundingRect(): SRect {
|
|
|
- return new SRect(-this.origin.x, -this.origin.y, this.width, this.height);
|
|
|
- } // Function boundingRect()
|
|
|
+ return new SRect(
|
|
|
+ -this.origin.x,
|
|
|
+ -this.origin.y,
|
|
|
+ this.width,
|
|
|
+ this.height
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 宽高发发生变化
|
|
|
*
|
|
|
- * @param oldSize 改之前的大小
|
|
|
- * @param newSize 改之后大小
|
|
|
- * */
|
|
|
+ * @param oldSize 改之前的大小
|
|
|
+ * @param newSize 改之后大小
|
|
|
+ */
|
|
|
protected onResize(oldSize: SSize, newSize: SSize): void {
|
|
|
this.computeImgSize();
|
|
|
this.update();
|
|
|
- } // Function onResize()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Item绘制操作
|
|
|
+ * Item 绘制操作
|
|
|
*
|
|
|
- * @param painter 绘画类
|
|
|
+ * @param painter 绘制对象
|
|
|
*/
|
|
|
onDraw(painter: SPainter): void {
|
|
|
painter.translate(-this.origin.x, -this.origin.y);
|
|
@@ -250,5 +234,5 @@ export class SImageItem extends SObjectItem {
|
|
|
painter.pen.color = this.strokeColor;
|
|
|
painter.brush.color = SColor.Transparent;
|
|
|
painter.drawRect(0, 0, this.width, this.height);
|
|
|
- } // Function onDraw()
|
|
|
-} // Class SImageItem
|
|
|
+ }
|
|
|
+}
|