@shijiu/jsview-vue 0.9.502 → 0.9.631

package/utils/JsViewPlugin/JsvPlayer/JsvPlayer.vue

@@ -22,6 +22,10 @@ export default {
 		 * 属性，int类型，底层使用的播放器类型。1：系统播放器；2:jsv播放器。默认2。
 		 */
 		playerType: {type: Number, default: 2},
+		/**
+		 * 属性，int类型，播放器解码方式。0：根据硬件能力自动匹配；1:硬解码；2:软解码。默认0（根据芯片能力自动匹配）。
+		 */
+		decodeType: {type: Number, default: 0},
 		/**
 		 * 属性，Boolean类型，层级关系，true表示在界面的下面，false表示在界面上面，默认true。
 		 */
@@ -45,11 +49,21 @@ export default {
 		/**
 		 * 属性，Boolean类型，是否保留最后一帧，true保留，false不保留。
 		 */
-		keepLastFrame: {type: Boolean, default: false},
+		keepLastFrame: {type: Boolean, default: true},
 		/**
 		 * 属性，String类型，视频显示比例，origin原始比例显示，full全屏显示，x:y按照指定比例显示。
 		 */
 		videoAspectRatio: {type: String, default: "origin"},
+		/**
+		 * 属性，JSON Object类型，色度抠像参数，包含color，colorDistance，edgeDistance，greenOffset四个参数，
+		 * 参考格式：{color: 0x30FF30, colorDistance: 0.15, edgeDistance: 0.4, greenOffset: 0.05}
+		 *          color，色值，int类型，为抠图色值范围的中心点，格式为0xRRGGBB。
+     	 *          colorDistance，float类型，色域范围，范围0-1.0。
+     	 *          edgeDistance，float类型，alpha透明度距离，范围colorDistance-1.0，从colorDistance到edgeDistance的alpha值从1.0-0线性递减。
+     	 *          greenOffset，float类型，红蓝差值，范围0-1.0。
+		 * 目前只支持扣绿。
+		 */
+		chromaKey: {type: Object, default: null},
 		/**
 		 * 回调函数，播放结束时通过此回调接口通知。
 		 */
@@ -222,7 +236,7 @@ export default {
 		let first_create = true;
 
 		if(!this.video){
-			this.video = new JsvMediaVideo(this.holeId, player_type, key, background, designMap.width);
+			this.video = new JsvMediaVideo(this.holeId, player_type, key, background, designMap.width, this.decodeType);
 		}else{
 			this.video.setRef();
 			first_create = false;
@@ -251,13 +265,17 @@ export default {
 						this.video.loop = this.loop;
 					}
 
-					if(this.keepLastFrame){
+					if(!this.keepLastFrame){
 						this.video.keepLastFrame = this.keepLastFrame;
 					}
 
 					if(this.videoAspectRatio !== "origin"){
 						this.video.videoAspectRatio = this.videoAspectRatio;
 					}
+
+					if(this.chromaKey && this.chromaKey !== ""){
+						this.video.setChromaKey(this.chromaKey)
+					}
 				//}else{
 				if(!first_create){
 					this.video.setHoleID(this.holeId);
@@ -275,6 +293,7 @@ export default {
 	unmounted(){
 		if(this.video != null){
 			this.video.releasePlayer();
+
 			this.onRef?.(null)
 		}
 	},

package/utils/JsViewPlugin/JsvPlayer/index.js

@@ -2,10 +2,13 @@
 import * as JsvPlayer from "./JsvPlayer.vue";
 import { globalLoadJsvPlayerPlugin as initPlugin } from "./JsvMedia.js"
 import { getJsvPlayerCapabilitySet as getCapabilitySet } from "./JsvMedia.js"
+import { setJsvPlayerDebugMode as setDebugMode } from "./JsvMedia.js"
 let _JsvPlayer = JsvPlayer;
 
 let globalLoadJsvPlayerPlugin = initPlugin;
 let getJsvPlayerCapabilitySet = getCapabilitySet;
+let setJsvPlayerDebugMode = setDebugMode;
+
 if (window.JsvWidgetWrapperGroup?.BrowserJsvPlayer) {
     // 浏览器版本
     _JsvPlayer = window.JsvWidgetWrapperGroup.BrowserJsvPlayer;
@@ -19,6 +22,10 @@ if (window.JsvWidgetWrapperGroup?.BrowserJsvPlayer) {
     getJsvPlayerCapabilitySet = () => {
         return null;
     }
+
+    setJsvPlayerDebugMode = () => {
+        console.log("Set debug mode");
+    }
 }
 
 let component = _JsvPlayer.default;
@@ -27,5 +34,5 @@ export default component;
 export {
     globalLoadJsvPlayerPlugin, // 全局初始化播放器插件处理
     getJsvPlayerCapabilitySet, //获取设备能力集
-
+    setJsvPlayerDebugMode, //设置调试模式，可以查看帧率等信息
 }

package/utils/JsViewPlugin/JsvPlayer/version.js

@@ -1,17 +1,17 @@
 let PluginInfo={
-    //downloadUrl:"http://192.168.0.37:8080/plugin/JsvPlayer-6.0.zip", //插件下载地址
+    // downloadUrl:"http://192.168.0.63:8080/plugin/JsvPlayer-164.zip", //插件下载地址
     packageName:"com.qcode.jsvplayer",
     name:"播放器插件",
-    version:"1.5.0",  //插件需要的版本号
-    versionCodeMin:150,
-    versionCodeMax:150,
+    version:"1.6.7",  //插件需要的版本号
+    versionCodeMin:167,
+    versionCodeMax:167,
     bridgeName:"jsvPlayerBridge", //插件bridge注册到jsview的名称
     className:"com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
     initMethod:"createInstance",   //插件初始化方法
     listener:"top.JsvPlayerPluginLoadResult",  //插件加载结果回调
     listener2: "top.JsvPlayerPluginStatus",
     // debug:true,
-    md5:"b0d74cbeafdb0adb02862addf61ce9d3"
+    md5:"19b065b6d4d2acdbaf6093c4864fea22"
 };
 
 // 不要用export default，update-env脚本不能解析

package/utils/JsViewVueTools/JsvImpactTracer.js

@@ -0,0 +1,113 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-08-30 10:54:42
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-30 10:54:44
+ * @Description: file content
+ */
+/**
+ * Created by donglin.lu@qcast.cn on 4/30/2020.
+ */
+
+/*
+ * 【模块 export 内容】
+ * createImpactTracer: 函数，创建碰撞跟踪对象
+ * createImpactCallback: 函数，创建碰撞发生后的回调函数
+ * createImpactAutoFroze: 函数，注册碰撞发生后，控制动画立刻停止的管理对象
+ * updateImpactAutoFroze: 函数，更新 createImpactAutoFroze 创建的碰撞即停管理对象中管理的运动元素列表
+ */
+
+import { Forge } from "../../dom/jsv-forge-define";
+
+/*
+ * createImpactCallback 参数说明:
+ *      on_contact      (function[]) 接受碰撞事件的回调
+ *      on_dis_contact  (function[]) 接受物体分离事件的回调
+ *  返回值:
+ *      Object  句柄，用于传输给 createImpactTracer
+ */
+function createImpactCallback(on_contact, on_dis_contact) {
+  return new Forge.sImpactSensorManager.Callback(on_contact, on_dis_contact);
+}
+
+/*
+ * createImpactTracer 参数说明:
+ *      ele1        (Element)   html element句柄，1号碰撞体
+ *      ele2        (Element)   html element句柄，2号碰撞体
+ *      callback    (Object)   由 createImpactCallback 创建的回调构造体句柄
+ *      auto_froze  (Object)   由 createImpactAutoFroze 创建的碰撞即停构造体句柄
+ *  返回值:
+ *      Object  句柄，提供 Recycle() 函数用于停止碰撞检测，需要再componentWillUnmount进行调用(清理)
+ */
+function createImpactTracer(ele1, ele2, callback, auto_froze) {
+  return Forge.sImpactSensorManager.StartTrace(ele1.jsvMainView, ele2.jsvMainView, callback, auto_froze);
+}
+
+// 创建用于设置碰撞即停管理对象的参数
+// 结果用于函数 createImpactAutoFroze 和 updateImpactAutoFroze
+function _ConvertToViewsList(elements_array) {
+  const views_array = [];
+  if (elements_array) {
+    for (const ele of elements_array) {
+      views_array.push(ele.jsvMainView);
+    }
+  }
+  return views_array;
+}
+
+/*
+ * createImpactAutoFroze 参数说明:
+ *      element_auto_froze_pre_impact   (Array<Element>)    关联运动元素的列表,这些元素碰撞前一帧停止运动
+ *      element_auto_froze_on_impact    (Array<Element>)    关联运动元素的列表,这些元素碰撞当前帧停止运动
+ *  返回值:
+ *      Object  句柄，用于传输给 createImpactTracer，也用于 updateImpactAutoFroze 调整关联元素
+ *
+ *  【注意点】
+ *        多个碰撞对可以共享同一个碰撞管理对象，并且建议共享同一个对象以提升效率
+ *        该管理对象中的view的列表可以通过 updateImpactAutoFrozeHandler进行更新，
+ *        更新后立刻在对所有的共享此管理对象的碰撞对中生效
+ */
+function createImpactAutoFroze(element_auto_froze_pre_impact, element_auto_froze_on_impact) {
+  if (!element_auto_froze_pre_impact && !element_auto_froze_on_impact) {
+    // Nothing to set
+    return;
+  }
+
+  const pre_impact_list = _ConvertToViewsList(element_auto_froze_pre_impact);
+  const on_impact_list = _ConvertToViewsList(element_auto_froze_on_impact);
+
+  return new Forge.sImpactSensorManager.AutoFroze(
+    (pre_impact_list.length > 0 ? pre_impact_list : null),
+    (on_impact_list.length > 0 ? on_impact_list : null));
+}
+
+/*
+ * updateImpactAutoFroze 参数说明:
+ *      handler                         (Object)            由 createImpactAutoFroze 创建的句柄
+ *      element_auto_froze_pre_impact   (Array<Element>)    关联运动元素的列表,这些元素碰撞前一帧停止运动
+ *      element_auto_froze_on_impact    (Array<Element>)    关联运动元素的列表,这些元素碰撞当前帧停止运动
+ *  返回值:
+ *      无
+ */
+function updateImpactAutoFroze(handler, element_auto_froze_pre_impact, element_auto_froze_on_impact) {
+  if (handler instanceof Forge.sImpactSensorManager.AutoFroze) {
+    console.error("Error: handler type error");
+    return;
+  }
+
+  const pre_impact_list = _ConvertToViewsList(element_auto_froze_pre_impact);
+  const on_impact_list = _ConvertToViewsList(element_auto_froze_on_impact);
+
+  // 更新碰撞即停列表
+  handler.UpdatePreImpactList((pre_impact_list.length > 0 ? pre_impact_list : null));
+
+  // 更新接触接触即停列表
+  handler.UpdateOnImpactList((on_impact_list.length ? on_impact_list : null));
+}
+
+export {
+  createImpactCallback,
+  createImpactTracer,
+  createImpactAutoFroze,
+  updateImpactAutoFroze,
+};

package/utils/JsViewVueTools/JsvRefTaker.js

@@ -0,0 +1,35 @@
+
+/********************
+ * JsvRefTaker模块
+ * 
+ * 用于解决 script setup 写法，不容易通过 this.$ref.xxxx 拿到子模块的句柄，
+ * 但使用ref(null)的方式构筑的深度reactive对象又会严重影响element的内部处理性能的问题
+ * 
+ * 使用方法:
+ * <script setup>
+ * const element_ref = buildTaker();
+ * 
+ * onMounted(()=>{
+ *     // onMounted以后，可以用 .current 访问到引用
+ *     console.log(element.current)
+ * })
+ * </script>
+ * 
+ * <template>
+ *     <div :ref="element_ref.fnc" />
+ * </template>
+ * 
+ ********************/
+
+function buildTaker() {
+    let pack = {
+        fnc: null,
+        current: null
+    }
+    pack.fnc = (r)=>{
+        pack.current = r;
+    }
+    return pack;
+}
+
+export default buildTaker;

package/utils/JsViewVueTools/index.js

@@ -0,0 +1,20 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-07-05 14:09:55
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-30 10:58:14
+ * @Description: file content
+ */
+
+export * from "./JsvHashHistory";
+export * from "./JsvDynamicCssStyle.js";
+export * from "./JsvDynamicKeyFrames.js";
+export * from "./JsvRuntimeBridge.js";
+export * from "./NinePatchHelper";
+export * from "./TypeCheckAndSet";
+export * from "./JsvRefTaker.js";
+export * from "./JsvStyleClass.js";
+export * from "./DebugContentShellJBridge.js";
+export * from "./DebugTool.js";
+export * from "./JsvImpactTracer.js";
+export { default as DefaultKeyCodeMap } from "./DefaultKeyMap.js";

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserPreload.vue

@@ -10,6 +10,8 @@ export default {
   setup() {
     return {
       preloadResultMap: {},
+      downloadResultMap: {},
+      downloadUrlList: [],
       unmountStatus: {unmount:false}
     };
   },
@@ -70,16 +72,19 @@ export default {
     },
     getDownloadList() {
       this.downloadStateList = new Array(this.downloadList.length).fill(false);
+      this.downloadUrlList = new Array(this.downloadStateList.length);
       let downloadListData = this.downloadList;
       for (let i = 0; i < downloadListData.length; i++) {
         if (!downloadListData[i].url) {
           this.downloadStateList[i] = true;
+          this.downloadUrlList[i] = "invalid";
           // downloadListData.splice(i, 1);
         }
       }
       this._DownloadViewList = downloadListData.map((item, index) => {
         if (!item.url) {
           this.downloadStateList[index] = true;
+          this.downloadUrlList[index] = "invalid";
           return null;
         }
         const image = new Image();
@@ -91,6 +96,11 @@ export default {
           }
 
           this.downloadStateList[index] = true;
+          this.downloadUrlList[index] = item.url;
+          this.downloadResultMap[item.url] = {
+            width: image.width,
+            height: image.height
+          }
           console.log(`pre download succeed ${item.url}`);
           if (this.onDownloadDone) {
             let downloadNum = 0;
@@ -98,7 +108,7 @@ export default {
               downloadNum += item ? 1 : 0;
             });
             if (downloadNum == this.downloadStateList.length) {
-              this.onDownloadDone?.();
+              this.onDownloadDone?.(this.downloadUrlList, this.downloadResultMap);
             }
           }
         };

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserQrcode.vue

@@ -18,11 +18,15 @@ export default {
         },
         imageSettings: Object
     },
-    data() {
+    setup() {
         return {
             imageStyle: null,
+            qrcodeRes: null,
         }
     },
+    created() {
+        this.qrcodeRes = this.renderQrcode();
+    },
     methods: {
         convertStr(str) {
             let out = "";
@@ -149,10 +153,10 @@ export default {
             :shapeRendering="'crispEdges'"
             :height="size"
             :width="size"
-            :viewBox="'0 0 ' + renderQrcode().numCells + ' ' + renderQrcode().numCells"
+            :viewBox="'0 0 ' + qrcodeRes.numCells + ' ' + qrcodeRes.numCells"
         >
-            <jsve-path :fill="bgColor" :d="'M0,0 h' + renderQrcode().numCells + 'v' + renderQrcode().numCells + 'H0z'" />
-            <jsve-path :fill="fgColor" :d="renderQrcode().fgPath" />
+            <jsve-path :fill="bgColor" :d="'M0,0 h' + qrcodeRes.numCells + 'v' + qrcodeRes.numCells + 'H0z'" />
+            <jsve-path :fill="fgColor" :d="qrcodeRes.fgPath" />
         </jsve-svg>
         <div :style="imageStyle"></div>
     </div>

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserTextureAnim.vue

@@ -2,19 +2,81 @@
  * @Author: ChenChanghua
  * @Date: 2022-02-08 09:29:17
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-03-08 14:08:39
+ * @LastEditTime: 2022-08-22 16:00:50
  * @Description: file content
 -->
 <script>
+import { ref } from "vue";
 import { getKeyFramesGroup } from "jsview/utils/JsViewVueTools/JsvDynamicKeyFrames";
 
+const DECORATE_BORDER_RADIUS = "BroderRaidus";
+const DECORATE_NINEPATCH_ALPHA_MIX = "NinePatchAlphaMix";
+
+const TexAlignAnchor = {
+  LEFT_TOP: 1,
+  CENTER_TOP: 2,
+  RIGHT_TOP: 3,
+  LEFT_MIDDLE: 4,
+  CENTER: 5,
+  RIGHT_MIDDLE: 6,
+  LEFT_BOTTOM: 7,
+  CENTER_BOTTOM: 8,
+  RIGHT_BOTTOM: 9,
+};
+
+const getOffset = (type, viewW, viewH, texLeft, texTop) => {
+  let extraLeft, extraTop;
+  switch (type) {
+    case TexAlignAnchor.LEFT_TOP:
+      extraLeft = 0;
+      extraTop = 0;
+      break;
+    case TexAlignAnchor.CENTER_TOP:
+      extraLeft = viewW / 2;
+      extraTop = 0;
+      break;
+    case TexAlignAnchor.RIGHT_TOP:
+      extraLeft = viewW;
+      extraTop = 0;
+      break;
+    case TexAlignAnchor.LEFT_MIDDLE:
+      extraLeft = 0;
+      extraTop = viewH / 2;
+      break;
+    case TexAlignAnchor.RIGHT_MIDDLE:
+      extraLeft = viewW;
+      extraTop = viewH / 2;
+      break;
+    case TexAlignAnchor.LEFT_BOTTOM:
+      extraLeft = 0;
+      extraTop = viewH;
+      break;
+    case TexAlignAnchor.CENTER_BOTTOM:
+      extraLeft = viewW / 2;
+      extraTop = viewH;
+      break;
+    case TexAlignAnchor.RIGHT_BOTTOM:
+      extraLeft = viewW;
+      extraTop = viewH;
+      break;
+    case TexAlignAnchor.CENTER:
+    default:
+      extraLeft = viewW / 2;
+      extraTop = viewH / 2;
+      break;
+  }
+  return [texLeft + extraLeft, texTop + extraTop];
+};
 let TOKEN = 0;
 export default {
   props: {
     src: String,
+    top: Number,
+    left: Number,
     width: Number,
     height: Number,
     borderRadius: String,
+    decorate: Object,
     animation: String,
     duration: Number,
     transform: String,
@@ -36,13 +98,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    texCoord: {
+      type: Object,
+    },
   },
-  setup() {
+  setup(props) {
     let styleShell = getKeyFramesGroup();
     return {
       styleShell,
       animName: "browser-texture-anim-" + TOKEN++,
       animDiv: null,
+      watcherHandlerList: [],
     };
   },
   computed: {
@@ -51,6 +117,104 @@ export default {
         this.delay / 1000
       }s ${this.repeat === -1 ? "infinite" : this.repeat}`;
     },
+    textureLayout() {
+      if (!isNaN(this.texCoord?.width) && !isNaN(this.texCoord?.height)) {
+        const texLeft = !isNaN(this.texCoord.left)
+          ? this.texCoord.left
+          : -this.texCoord.width / 2;
+        const texTop = !isNaN(this.texCoord.top)
+          ? this.texCoord.top
+          : -this.texCoord.height / 2;
+        const type = !isNaN(this.texCoord.alignAnchor)
+          ? this.texCoord.alignAnchor
+          : 5;
+        const offset = getOffset(
+          type,
+          this.width,
+          this.height,
+          texLeft,
+          texTop
+        );
+        const transition = this.decorate?.animTime
+          ? `left ${this.decorate.animTime}s, top ${this.decorate.animTime}s`
+          : "";
+        return {
+          position: "absolute",
+          left: offset[0] + "px",
+          top: offset[1] + "px",
+          transition,
+          width: this.texCoord.width + "px",
+          height: this.texCoord.height + "px",
+        };
+      } else {
+        return {
+          position: "absolute",
+          left: 0 + "px",
+          top: 0 + "px",
+          width: this.width + "px",
+          height: this.height + "px",
+        };
+      }
+    },
+    maskStyle() {
+      if (this.borderRadius) {
+        return {
+          left: this.left + "px",
+          top: this.top + "px",
+          borderRadius: this.borderRadius,
+          width: this.width + "px",
+          height: this.height + "px",
+          overflow: 'hidden',
+        };
+      } else if (this.decorate) {
+        if (this.decorate.type == DECORATE_NINEPATCH_ALPHA_MIX) {
+          const imageDspWidth =
+            this.decorate.imageDspWidth > 0
+              ? this.decorate.imageDspWidth
+              : this.decorate.imageWidth;
+          const slideWidth =
+            (this.decorate.imageWidth - this.decorate.centerWidth) / 2;
+          const outset = Math.ceil(
+            (this.decorate.borderOutset * imageDspWidth) /
+              this.decorate.imageWidth
+          );
+          console.log("get mask style");
+          const transitionTime = this.decorate.animTime;
+          return {
+            left: this.left + "px",
+            top: this.top + "px",
+            width: this.width + "px",
+            height: this.height + "px",
+            transition: `left ${transitionTime}s, top ${transitionTime}s, width ${transitionTime}s, height ${transitionTime}s`,
+            webkitMaskBoxImageSource: this.decorate.url,
+            webkitMaskBoxImageSlice: slideWidth,
+            webkitMaskBoxImageWidth:
+              Math.ceil(
+                (slideWidth * imageDspWidth) / this.decorate.imageWidth
+              ) + "px",
+            webkitMaskBoxImageOutset: outset + "px",
+            position: "absolute",
+          };
+        } else if (this.decorate.type == DECORATE_BORDER_RADIUS) {
+          return {
+            left: this.left + "px",
+            top: this.top + "px",
+            borderRadius: `${this.decorate.topLeft}px ${this.decorate.topRight}px ${this.decorate.bottomRight}px ${this.decorate.bottomLeft}`,
+            width: this.width + "px",
+            height: this.height + "px",
+            overflow: 'hidden',
+          };
+        }
+      } else {
+        return {
+          left: this.left + "px",
+          top: this.top + "px",
+          width: this.width + "px",
+          height: this.height + "px",
+          overflow: 'hidden',
+        };
+      }
+    },
   },
   methods: {
     start() {
@@ -65,28 +229,22 @@ export default {
         "@keyframes " + this.animName + " " + this.animation
       );
     }
-
+    //绕过 jsview 对document 的 hook
     const clipDiv = window.originDocument.createElement("div");
-    clipDiv.style.width = this.width + "px";
-    clipDiv.style.height = this.height + "px";
-    clipDiv.style.position = "absolute";
-    clipDiv.style.borderRadius = this.borderRadius;
-    clipDiv.style.overflow = "hidden";
+    Object.assign(clipDiv.style, this.maskStyle);
 
+    const textureLayout = this.textureLayout;
     this.animDiv = window.originDocument.createElement("div");
-    this.animDiv.style.width = this.width + "px";
-    this.animDiv.style.height = this.height + "px";
-    this.animDiv.style.position = "absolute";
+    Object.assign(this.animDiv.style, textureLayout);
     this.animDiv.onanimationend = () => {
       this.animDiv.style.animation = null;
       this.onAnimationEnd?.();
     };
 
     const imgDiv = window.originDocument.createElement("div");
-    imgDiv.style.width = this.width + "px";
-    imgDiv.style.height = this.height + "px";
+    imgDiv.style.width = textureLayout.width;
+    imgDiv.style.height = textureLayout.height;
     imgDiv.style.backgroundImage = `url(${this.src})`;
-    // imgDiv.style.backgroundColor = "#FF0000"
     imgDiv.style.transform = this.transform;
     imgDiv.style.transformOrigin = this.transformOrigin;
 
@@ -94,6 +252,33 @@ export default {
     clipDiv.appendChild(this.animDiv);
     this.$refs.root.jsvMaskView.Element.appendChild(clipDiv);
 
+    this.watcherHandlerList.push(
+      this.$watch("left", (newValue) => {
+        clipDiv.style.left = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("top", (newValue) => {
+        clipDiv.style.top = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("width", (newValue) => {
+        clipDiv.style.width = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("height", (newValue) => {
+        clipDiv.style.height = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("textureLayout", (newValue) => {
+        Object.assign(this.animDiv.style, newValue);
+        imgDiv.style.width = newValue.width;
+        imgDiv.style.height = newValue.height;
+      })
+    );
     if (this.autoStart) {
       setTimeout(() => {
         this.start();
@@ -102,6 +287,10 @@ export default {
   },
   beforeUnmount() {
     this.styleShell.removeRule(this.animName);
+    for (let handler of this.watcherHandlerList) {
+      handler?.();
+    }
+    this.watcherHandlerList = [];
   },
 };
 </script>

package/utils/JsViewVueWidget/JsvActorMove/JsvActorMove.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-20 17:21:21
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-11-18 16:45:05
+ * @LastEditTime: 2022-08-31 11:14:13
  * @Description: file content
 -->
 
@@ -48,7 +48,7 @@ export default {
     if (this.refDefine) {
       const type = typeof this.refDefine;
       if (type === "object") {
-        type.current = this.$refs.element;
+        this.refDefine.current = this.$refs.element;
       } else if (type === "function") {
         this.refDefine(this.$refs.element);
       }