|
@@ -32,7 +32,7 @@ import { SGraphEdit } from "..";
|
|
|
import { Marker } from "../type/Marker";
|
|
|
import { ItemOrder } from '@persagy-web/big/lib';
|
|
|
import { SMouseEvent } from '@persagy-web/base/lib';
|
|
|
-import { svgTobase64 } from "@persagy-web/big-edit/lib/until"
|
|
|
+import { svgTobase64,svgUrlTobase64 } from "@persagy-web/big-edit/lib/until"
|
|
|
|
|
|
/**
|
|
|
* 图片编辑类
|
|
@@ -115,6 +115,16 @@ export class SBaseImageEdit extends SGraphEdit {
|
|
|
this.update();
|
|
|
}
|
|
|
|
|
|
+ // 新增测试属性
|
|
|
+ _filterColor: string = '';
|
|
|
+ get filterColor() {
|
|
|
+ return this._filterColor;
|
|
|
+ }
|
|
|
+ set filterColor(v) {
|
|
|
+ this._filterColor = v;
|
|
|
+ this.changeSvgColor(v)
|
|
|
+ }
|
|
|
+
|
|
|
/** 图片加载是否完成 */
|
|
|
isLoadOver: boolean = false;
|
|
|
|
|
@@ -137,6 +147,8 @@ export class SBaseImageEdit extends SGraphEdit {
|
|
|
this.initUrl(v)
|
|
|
}
|
|
|
}
|
|
|
+ /** svgUrl 字符串 */
|
|
|
+ svgUrl:string = ''
|
|
|
|
|
|
/** 锚点 list */
|
|
|
anchorList: SAnchorItem[] = [];
|
|
@@ -267,6 +279,28 @@ export class SBaseImageEdit extends SGraphEdit {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * svg 添加滤镜
|
|
|
+ *
|
|
|
+ * @param {*} val 修改svg图对应的色值(矩阵)
|
|
|
+ */
|
|
|
+ changeSvgColor(val) {
|
|
|
+ var parser = new DOMParser();
|
|
|
+ var doc = parser.parseFromString(this.svgUrl, "text/xml");
|
|
|
+ const svgDom = doc.children[0]
|
|
|
+ svgDom.style.filter = "url('#lighten')"
|
|
|
+ const colorDefs = parser.parseFromString(`<defs>
|
|
|
+ <filter id="lighten">
|
|
|
+ <feColorMatrix
|
|
|
+ type="matrix"
|
|
|
+ values=${val}/>
|
|
|
+ </filter>
|
|
|
+ </defs>`, "text/xml")
|
|
|
+ svgDom.appendChild(colorDefs.children[0])
|
|
|
+ const a = svgUrlTobase64(svgDom);
|
|
|
+ this.initUrl(a)
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
* 初始化url
|
|
|
*
|
|
|
* @param v url字符串
|
|
@@ -280,6 +314,10 @@ export class SBaseImageEdit extends SGraphEdit {
|
|
|
this.isLoadOver = true;
|
|
|
this.computeImgSize();
|
|
|
this.$emit("imgLoadOver");
|
|
|
+ // 如果有填充色则设置填充色
|
|
|
+ if (this._filterColor) {
|
|
|
+ this.changeSvgColor(this._filterColor)
|
|
|
+ }
|
|
|
this.update();
|
|
|
} else {
|
|
|
// @ts-ignore
|