@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewVueWidget/JsvFreeMoveActor/SetState.ts

@@ -1,64 +1,78 @@
 
 import { StateCmdBuilder, CmdPackBuilder } from "./ForgeTypeDefine"
-import { NexusNode } from "./NexusNode";
+import { NexusNode, GLOBAL_CUSTOM_NEXUS_DETAIL_TYPE } from "./NexusNode";
 import ActorControl from "./ActorControl";
+import type { CommandPackType } from "./CmdTypes";
 
+/**
+ * state().XXXXX 可用的API说明
+ * 标注"内部API"的API, 应用开发时一定!!不要使用, 因为后续版本可能调整导致失效
+ */
 class StatePackBuilder {
   constructor() {
 
   }
 
-  /*
+  /**
    * clearConditions
-   * 清理所有预制的condition
+   * 清理所有已经设置的condition, 
+   * condition如果不清理则伴随着FreeMoveActor的生命周期一直存在
    */
-  clearAllConditions(): Object {
+  clearAllConditions(): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveAllCondtions());
   }
 
-  /*
+  /**
    * removeConditionByGroup
-   * 清理指定组的condition
+   * 清理指定组的condition, 
+   * group 和 @file://./ActorControl.ts 中condition()函数声明的group对应
+   * condition如果不清理则伴随着FreeMoveActor的生命周期一直存在
    */
-  removeConditionByGroup(group: number): Object {
+  removeConditionByGroup(group: number): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveByGroup(group));
   }
 
-  /*
+  /**
    * removeConditionByGroup
    * 清理指定名字的condition
+   * specName 和 @file://./ActorControl.ts 中condition()函数声明的specName对应
+   * condition如果不清理则伴随着FreeMoveActor的生命周期一直存在
    */
-  removeConditionByName(specName: String) {
+  removeConditionByName(specName: String): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveByName(specName));
   }
 
   /**
    * activeCondition
-   * 重新激活对应gid或者specName的condition
+   * 重新激活对应group或者specName的condition
+   * group和specName和 @file://./ActorControl.ts 中condition()函数声明的group或specName对应
+   * 
    * 一个condition处于非激活有两种可能，
    * 1. 允许触发一次的condition已经完成触发
-   * 2. 被DeactiveCondition关闭过的condition
+   *    见 @file://./ActorControl.ts 中condition()函数声明的multiTimes == 1的设置即为一次触发
+   * 2. 被 deactiveCondition()关闭过的condition
    * 
    * @param {int} groupType  (可选)对应condition的groupType, 与specName二选一
    * @param {String} specName  (可选)对应condition的specName, 与groupId二选一, 当groupId为 undefined 或 -1 时生效
    */
-  activeCondition(groupType: number | undefined, specName: String | undefined): Object {
+  activeCondition(groupType: number | undefined, specName: String | undefined): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.ActiveCondition(groupType, specName));
   }
 
   /**
    * deactiveCondition
-   * 停止对应gid或者specName的condition
+   * 停止对应group或者specName的condition
    * 
    * @param {int} groupType  (可选)对应condition的groupType, 与specName二选一
    * @param {String} specName  (可选)对应condition的specName, 与groupId二选一, 当groupId为 undefined 或 -1 时生效
    */
-  deactiveCondition(groupType: number | undefined, specName: String | undefined): Object {
+  deactiveCondition(groupType: number | undefined, specName: String | undefined): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.DeactiveCondition(groupType, specName));
   }
 
-  /*
+  /**
    * setStartPos 立刻将actor运动起始点设置到目标位置, 作为下一个Action执行时的位置起点
+   * 若没有新的Action执行, 则这个位置改变不会有任何效果
    *   注意1: 只影响当speed/accel不为0时的下一帧的运动起始位置，
    *          当speed/accel为0状态下要移动物体请用 Action.teleportTo
    *   注意2: 此为state设置，下一帧直接以此state开始，所以不会触发任何positionCondition的cross条件
@@ -67,12 +81,14 @@ class StatePackBuilder {
    *      targetX      (int) 带符号整数，目标位置，如果设置为undefined，标识不以此轴为终点
    *      targetY      (int) 带符号整数，目标位置，如果设置为undefined，标识不以此轴为终点
    */
-  setStartPos(targetX: number | undefined, targetY: number | undefined) {
-    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetPos(targetX, targetY));
+  setStartPos(targetX: number | undefined, targetY: number | undefined): CommandPackType {
+    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetAbsPos(targetX, targetY));
   }
 
-  /*
+  /**
    * setStartOffsetPos 立刻将actor移动以当前位置相对位移的位置, 作为下一个Action执行时的位置起点
+   * 用offset的方式可以解决触发condition时, drawX或drawY并不是完全和condition的坐标重合, 偏差的坐标可由offset继承
+   * 
    *   注意1: 只影响当speed/accel不为0时的下一帧的运动起始位置，
    *          当speed/accel为0状态下要移动物体请用 Action.teleportOffset
    *   注意2: 此为state设置，下一帧直接以此state开始，所以不会触发任何positionCondition的cross条件
@@ -81,35 +97,81 @@ class StatePackBuilder {
    *      targetX      (int) 带符号整数，目标位置，如果设置为undefined，标识不以此轴为终点
    *      targetY      (int) 带符号整数，目标位置，如果设置为undefined，标识不以此轴为终点
    */
-  setStartOffsetPos(offsetX: number | undefined, offsetY: number | undefined) {
+  setStartOffsetPos(offsetX: number | undefined, offsetY: number | undefined): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetOffsetPos(offsetX, offsetY));
   }
 
-  /*
+  /**
+   * alignPosition
+   * 在condition().then()中使用, 
+   * 并且只在position相关的condition中才会响应
+   * 用condition的位置来校准下次Action的StartPostion
+   */
+  alignPosition(): CommandPackType {
+    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.AlignPosition());
+  }
+
+  /**
+   * updateBaseOffset
+   * 更新本div的基准坐标, 同时立刻调整drawX, drawY, 使其相对于父dom节点的屏幕坐标保持不变
+   * 
+   * @param {number} offsetX 基准坐标x偏移量, div的newStyle.left - div的originStyle.left
+   * @param {number} offsetY 基准坐标y偏移量, div的newStyle.top - div的originStyle.top
+   */
+  updateBaseOffset(offsetX: number, offsetY: number): CommandPackType {
+    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.UpdateBaseOffset(offsetX, offsetY));
+  }
+
+  /**
+   * 内部API
+   * 
    * 在BlockerCondition发生时，进行位置回滚处理
    */
-  revertWithHitBlock() {
+  revertWithHitBlock(): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RevertWithHitBlock());
   }
 
-  setHitWallOverflow() {
+  /**
+   * 内部API
+   * 
+   * setHitWallOverflow
+   */
+  setHitWallOverflow(): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetHitWallOverflow());
   }
 
-  touchLockSwitch(isLock: boolean, direction: number, unlockThreshold: number = -1) {
+  /**
+   * 内部API
+   * 
+   * touchLockSwitch
+   */
+  touchLockSwitch(isLock: boolean, direction: number, unlockThreshold: number = -1): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.TouchLockSwitch(isLock, direction, unlockThreshold));
   }
 
-  /*
+
+  /**
+   * fireCustomNexus 发出自定义Nexus event
+   * @param {NexusNode} nexusRecv 由 FreeMoveFunc.newNexus() 创建, 为通讯匹配的句柄, 类似电话号
+   */
+  fireCustomNexus(nexusRecv: NexusNode): CommandPackType {
+    return this.fireNexusEvent(nexusRecv, GLOBAL_CUSTOM_NEXUS_DETAIL_TYPE);
+  }
+
+  /**
+   * 内部API
+   * 
    * fireNexusEvent 发出Nexus event
    * @param {NexusNode} nexusRecv 由 FreeMoveFunc.newNexus() 创建, 作为通讯句柄，类似电话号，在onNexusEvent监听
    * @param {number} detailEventType 监听的事件类型, 类比与分机号，和onNexusEvent约定, 自定义内容要求1000以上
    */
-  fireNexusEvent(nexusRecv: NexusNode, detailEventType: number) {
+  fireNexusEvent(nexusRecv: NexusNode, detailEventType: number): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.FireNexusEvent(detailEventType, nexusRecv.token));
   }
 
   /**
+   * 内部API
+   * 
    * setTouchAttractChild
    * 
    * 绑定一个子view中的FreeMoveDiv
@@ -117,7 +179,7 @@ class StatePackBuilder {
    * 
    * @param {ActorControl} otherFreeMoveControl 其他FreeMoveDiv的control对象
    */
-  setTouchAttractChild(otherFreeMoveControl: ActorControl) {
+  setTouchAttractChild(otherFreeMoveControl: ActorControl): CommandPackType {
     if (otherFreeMoveControl) {
       let animRef = otherFreeMoveControl.getBindedAnim();
       return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetTouchAttractChild(animRef));
@@ -127,6 +189,8 @@ class StatePackBuilder {
   }
 
   /**
+   * 内部API
+   * 
    * startMovementSync
    * 
    * 发出进度同步信号(可以一个FreeMove绑定多个信号发生器，但目前场景估计只需要一个发生器即可)
@@ -147,7 +211,7 @@ class StatePackBuilder {
   startMovementSync(nexusRef: NexusNode,
     horizontalStart: number, horizontalEnd: number,
     verticalStart: number, verticalEnd: number,
-    xyEnable: number) {
+    xyEnable: number): CommandPackType {
 
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.StartMovementSync(
       nexusRef?.token ? nexusRef.token : 0,
@@ -158,13 +222,15 @@ class StatePackBuilder {
       xyEnable));
   }
 
-  /*
+  /**
+   * 内部API
+   * 
    * stopMovementSync
    * 
    * 停止由startMovementSync发起的的同步信号
    * 目前阶段，为关闭所有的信号发起器
    */
-  stopMovementSync() {
+  stopMovementSync(): CommandPackType {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.StopMovementSync());
   }
 }

package/utils/JsViewVueWidget/JsvFreeMoveActor/index.js

@@ -1,9 +1,9 @@
-import JsvFreeMoveActor from "./FreeMoveActor.vue";
+import JsvFreeMoveActor from "./JsvFreeMoveActor.vue";
 import { ActEventDefine } from "./ForgeTypeDefine.ts"
 import { default as KeepFlags } from "./KeepFlags.ts"
 import JsvEnvBlocker from "./JsvEnvBlocker.vue"
-import { newNexus } from "./NexusNode"
-import { default as ActControlDebug } from "./ActorControl.ts"
+import { newNexus, fireGlobalNexus } from "./NexusNode"
+import { default as ActControl } from "./ActorControl.ts"
 import { GetSyncLinkManager, SyncLinkSource } from "./SyncLinkManager.ts"
 
 
@@ -13,16 +13,38 @@ let FreeMoveDef = {
 }
 
 let FreeMoveFunc = {
+    // NexusNode是用于anim之间信息通知的, 全局唯一, 以全局id区分
     newNexus,
-    ActControlDebug,
+    ActControl,
+    ActControlDebug: ActControl,
     GetSyncLinkManager,
     SyncLinkSource
 }
 
+let FreeMoveApis = {
+    /**
+     * newNexus 创建nexusRecv句柄
+     * @returns {NexusNode}
+     */
+    newNexus,
+
+    /**
+     * fireCustomNexus 全局激活自定义Nexus event
+     * @param {NexusNode} nexusRecv
+     */
+    fireCustomNexus: fireGlobalNexus,
+}
+
+// 注意, 标注“内部API”的, 在应用开发时一定!!不要使用, 因为后续版本可能调整导致失效
 export {
     JsvFreeMoveActor,
     JsvFreeMoveActor as JsvFreeMoveDiv,
-    JsvEnvBlocker,
     FreeMoveDef,
+    FreeMoveApis,
+
+    // JsvEnvBlocker是内部API
+    JsvEnvBlocker,
+
+    // FreeMoveFunc是内部API
     FreeMoveFunc
 }

package/utils/JsViewVueWidget/JsvInput/EditViewOperator.ts

@@ -19,6 +19,7 @@ declare interface CursorOperater {
 declare type TextChangedFunc = (final_text: string, dsp_text: string) => void;
 declare type CursorMovedFunc = (new_text_start_index: number, new_cursor_left: number) => void;
 declare type TextOverflowFunc = (origin_text: string, new_text: string) => void;
+declare type ImeActionFunc = (action: number) => void;
 
 export class EditViewOperator {
     private _EditViewHandle: any = null;
@@ -47,15 +48,18 @@ export class EditViewOperator {
     private _OnTextChangedCallback: TextChangedFunc;
     private _OnCursorMoved: CursorMovedFunc;
     private _TextOverflowFunc: TextOverflowFunc | undefined;
+    private _OnImeActionFunc: ImeActionFunc | undefined;
 
     constructor(
         text_changed_callback: TextChangedFunc,
         cursor_moved: CursorMovedFunc,
-        text_overflow: TextOverflowFunc | undefined = undefined
+        text_overflow: TextOverflowFunc | undefined = undefined,
+        on_ime_action: ImeActionFunc | undefined = undefined
     ) {
         this._OnTextChangedCallback = text_changed_callback;
         this._OnCursorMoved = cursor_moved;
         this._TextOverflowFunc = text_overflow;
+        this._OnImeActionFunc = on_ime_action;
     }
 
     // 当前是否为焦点
@@ -143,7 +147,7 @@ export class EditViewOperator {
         this._EditViewHandle.addImeEventListener({
             OnTextChanged: this._OnTextChanged.bind(this),
             OnStatusChanged: this._OnStatusChanged.bind(this),
-            OnEditAction: null
+            OnEditAction: this._OnEditAction.bind(this),
         });
 
         this._EditViewId = Forge.sViewStore.add(
@@ -202,6 +206,7 @@ export class EditViewOperator {
     }
 
     onUnmounted() {
+        this._EditViewHandle?.hideIme(); // 当home键之类对节点进行unmount时，要隐藏输入法
         this._EditViewHandle?.releaseResource();
         this._EditVisibleArea!.releaseResource();
         if (this._EditViewId != -1) {
@@ -309,6 +314,10 @@ export class EditViewOperator {
     private _OnStatusChanged(visible: boolean) {
     }
 
+    private _OnEditAction(action: number) {
+        this._OnImeActionFunc?.(action);
+    }
+
     public addText(text: string) {
         if (this._InputType === InputType.NUMBER && !ifDigital(text)) {
             // console.log(`The input data:${string} is not number`);

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -34,6 +34,17 @@
  *                                  返回true时可以规避ime显示后有时会吐出返回键导致整体退出的问题
  *              @params isUp {boolean} 是down(false)还是up(true)
  *              @return {boolean}
+ *         onImeAction {function}   软键盘触发 editor action 的回调
+ *              @params action {number} Android `BaseInputConnection#performEditorAction()` 吐回的值
+ *                  0: IME_ACTION_UNSPECIFIED
+ *                  1: IME_ACTION_NONE
+ *                  2: IME_ACTION_GO
+ *                  3: IME_ACTION_SEARCH
+ *                  4: IME_ACTION_SEND
+ *                  5: IME_ACTION_NEXT
+ *                  6: IME_ACTION_DONE
+ *                  7: IME_ACTION_PREVIOUS
+ *         enableTap {boolean}       是否启用点击事件
  *
  *  InputDispatcher dispatch支持事件:
  *          add
@@ -138,8 +149,14 @@ const rProps = defineProps({
     type: Function,
   },
   onBackKey: {
-    Type: Function,
+    type: Function,
+  },
+  onImeAction: {
+    type: Function,
   },
+  enableTap: {
+    type: Boolean,
+  }
 });
 
 let rCursorRef = shallowRef(null);
@@ -157,6 +174,7 @@ function _OnTextChanged(input_final_text, dsp_text) {
   );
   rInputFinalText.value = dsp_text;
   rInputFinalTextLenth.value = dsp_text.length;
+  rProps.onTextChange?.(dsp_text);
 }
 
 function _OnCursorPositionChanged(text_left, cursor_left) {
@@ -168,10 +186,19 @@ function _OnCursorPositionChanged(text_left, cursor_left) {
 let cEditViewOperator = new EditViewOperator(
   _OnTextChanged,
   _OnCursorPositionChanged,
-  rProps.onTextOverflow
+  rProps.onTextOverflow,
+  (action) => {
+    rProps.onImeAction?.(action);
+  }
 );
 let vEditViewInnerId = cEditViewOperator.generateView(); // 建立Forge.EditView
 
+let onTap = computed(() => {
+  return rProps.enableTap ? () => {
+    cEditViewOperator.showSoftIme();
+  } : null;
+});
+
 cEditViewOperator.updateInputConfig(
   rProps.width,
   rProps.height,
@@ -323,6 +350,7 @@ defineExpose({
         height: rProps.height,
         overflow: 'hidden',
       }"
+      @click="onTap"
     >
       <div
         :style="{

package/utils/JsViewVueWidget/JsvLine/JsvLine.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup>
-import { shallowRef, onBeforeUnmount } from "vue";
+import { shallowRef, onBeforeUnmount, watch } from "vue";
 import { createTexture } from "./LineManager";
 let isShow = shallowRef(true);
 const props = defineProps({
@@ -52,13 +52,30 @@ const getDistance = (point1, point2) => {
   const h = Math.abs(point1.y - point2.y);
   return Math.sqrt(w * w + h * h);
 };
-const width = getDistance(props.startPos, props.endPos);
 
-let angle =
-  (180 / Math.PI) * Math.asin((props.endPos.y - props.startPos.y) / width);
-if (props.endPos.x < props.startPos.x) {
-  angle = 180 - angle;
-}
+const width = shallowRef(getDistance(props.startPos, props.endPos));
+const angle = shallowRef(0);
+
+const updateWidthAndAngle = () => {
+  const w = getDistance(props.startPos, props.endPos);
+  width.value = w;
+  if (w === 0) {
+    angle.value = 0;
+  } else {
+    let tmpAngle = (180 / Math.PI) * Math.asin((props.endPos.y - props.startPos.y) / w);
+    if (props.endPos.x < props.startPos.x) {
+      tmpAngle = 180 - tmpAngle;
+    }
+    angle.value = tmpAngle;
+  }
+};
+
+// watch for startPos & endPos changes
+watch(
+  () => [props.startPos.x, props.startPos.y, props.endPos.x, props.endPos.y],
+  updateWidthAndAngle,
+  { immediate: true }
+);
 
 const AnimEnd = () => {
   if (props.appear == "fadeOut") {

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -318,7 +318,7 @@ const stopSlide = () => {
 //公共不满足条件部分
 const commonFailState = () => {
   if (props.forceSlide) {
-    console.error("请注意文字长度和间隙加起来必须大于组件宽度");
+    // console.error("请注意文字长度和间隙加起来必须大于组件宽度");
     text1.value = props.text;
   } else {
     text1.value = props.text;

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -17,7 +17,7 @@
 <script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import { JsvTextureStoreApi } from "../JsViewVueTools/JsvTextureStore/JsvTextureStore";
-import { onUnmounted, shallowRef } from "vue";
+import { onUnmounted, watchEffect } from "vue";
 import JsvNinePatch from "./JsvNinePatch.vue";
 
 const rProps = defineProps({
@@ -96,19 +96,21 @@ if (!rProps.frontLayer) {
 // 通过内置函数构造定制的NativeSharedView
 vJsvMainView = new Forge.NativeSharedView();
 vInnerViewId = Forge.sViewStore.add(new Forge.ViewInfo(vJsvMainView));
-if (rProps.oversize != 0) {
-  vJsvMainView.SetOverSize(rProps.oversize);
-}
+let vOverSizeCache = 0;
 
-// 更新宽高
-if (typeof vJsvMainView != "undefined" && vJsvMainView) {
-  if (rProps.setId) {
-    // 使用设置进来的track id，而非自动生成
-    vJsvMainView.SetTrackId(rProps.setId);
+watchEffect(() => {
+  if (rProps.oversize != vOverSizeCache) {
+    vOverSizeCache = rProps.oversize;
+    vJsvMainView.SetOverSize(vOverSizeCache);
   }
+});
 
-  rProps.getId?.(vJsvMainView.GetTrackId());
+// TrackId
+if (rProps.setId && rProps.setId.length > 0) {
+  // 使用设置进来的track id，而非自动生成
+  vJsvMainView.SetTrackId(rProps.setId);
 }
+rProps.getId?.(vJsvMainView.GetTrackId());
 
 onUnmounted(() => {
   // 清理View管理缓存

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -8,19 +8,24 @@
  *      props说明:
  *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
  *          imageUrl    {String}    (必填)显示图片的加载地址
- *          imageWidth  {int}       (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
- *          contentWidth {int}      (废弃)此值为了兼容，会赋值给centerWidth
- *          centerWidth  {int}      (必填)原图信息: .9图的中心区域宽度(repeat区域)
- *          imageDspWidth  {int}    原图缩放后的显示宽度，计算方法: 
+ *          imageWidth  {int}       (必填)相对原图尺寸信息: 原图的宽度(由于正方形,宽高相同)
+ *          centerWidth  {int}      (必填)相对原图尺寸信息: .9图的中心区域宽度(repeat区域), 对于用圆圈做成圆角矩形场景, 用TextureBuilder的api的返回值即可
+ *          imageDspWidth  {int}    原图缩放后的显示宽度，对于用圆圈做成圆角矩形场景, 用TextureBuilder的api的返回值即可
+ *                                对于用其他圆角半径的图来临时顶替指定圆角半径的场景时，用如下计算方法求imageDspWidth: 
  *                                四角为90度圆弧时: imageDspWidth = 显示图形的圆弧半径 / 原图中圆弧的半径 * 原图宽度
  *                                                原图中圆弧半径 = (原图宽度 - borderOutset * 2) / 2
  *                                四角为其他形状时，原图.9图的四角区域，缩放到要和显示图形重合后的宽度。
- *          borderOutset {int}      (必填)原图信息: 图片边缘到中心内容区域边缘的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
- *          animTime    {int}       (必填)缩放动画的时长(单位秒)
- *          waitForInit {boolean}  (选填)尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
+ *          borderOutset {int}       (必填)原图信息: 图片边缘到中心内容区域边缘的距离, 快速计算: (原图宽度 - 原图中要包裹区域宽度) / 2
+ *          imageBlendType {String}  (选填) alpha合并模式，默认为普通合成，可设置"alphaOverride", 用于Video挖洞操作
+ *          (已废弃)contentWidth {int}      (已废弃)此值为了兼容，会赋值给centerWidth
+ *          
+ *          从此以下的参数为要做焦点框尺寸变化过渡动画时, 需要传入的属性, 若为静态的焦点框, 则不需要传入:
+ *          animation {string}    (选填)css动画, 格式同css的style.animation, 填写后, animTime启用的漂移动画将失效
+ *          animTime    {int}       (选填)缩放动画的时长(单位秒), 填写后, 当style的top/left/width/height发生变化时, 会自动触发过渡动画
+ *          waitForInit {boolean}  (选填)和animTime一起使用, 用于禁用首次设置top/left/width/height产生的动画
  *          onTransitionEnd { Function } (选填)transition动画结束的回调
  *          onAnimationEnd { Function } (选填)animation动画结束的回调
- *          imageBlendType {String}  (选填) alpha合并模式，默认为普通合成，可设置"alphaOverride", 用于Video挖洞操作
+ *
 -->
 
 <script setup>
@@ -79,7 +84,7 @@ const imageDspWidthInner = computed(() =>
 );
 // slice_width 获取
 const sliceWidth = ref(
-  Math.ceil(Math.max(0, (props.imageWidth - centerWidth) / 2))
+  Math.ceil(Math.max(1, (props.imageWidth - centerWidth) / 2)) // slice 最小为1px, 否则出现native除0错误
 );
 const borderDspWidth = ref(
   Math.ceil((sliceWidth.value * imageDspWidthInner.value) / props.imageWidth)
@@ -89,15 +94,20 @@ const convertedBorderOutset = ref(
 );
 
 watchEffect(() => {
+  let testWidth = imageDspWidthInner.value - props.borderOutset * 2;
   if (
-    (props.style?.width && props.style.width <= imageDspWidthInner.value) ||
-    (props.style?.height && props.style.height <= imageDspWidthInner.value)
+    (props.style?.width && props.style.width <= testWidth) ||
+    (props.style?.height && props.style.height <= testWidth)
   ) {
     console.warn(
       "JsvNinePatch: style size must be larger than imageDspWidth. style is",
       props.style,
       "imageDspWidth is",
-      imageDspWidthInner.value
+      imageDspWidthInner.value,
+      "borderOutset is",
+      props.borderOutset,
+      "testWidth is",
+      testWidth
     );
   }
 });