Explorar el Código

Merge branch 'master' of http://39.106.8.246:3003/web/persagy-web

haojianlong hace 4 años
padre
commit
7bbfb5f753
Se han modificado 1 ficheros con 39 adiciones y 1 borrados
  1. 39 1
      persagy-web-edit/src/items/SBaseImageEdit.ts

+ 39 - 1
persagy-web-edit/src/items/SBaseImageEdit.ts

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