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

package/utils/JsViewVueWidget/JsvSector.vue

@@ -6,6 +6,7 @@
  *      props说明:
  *          centerPosition  {Object}   圆心坐标，属性:{x,y}
  *          radius          {Number}   半径
+ *          subRadius       {Number}   内半径，默认0；当0<subRadius<radius时绘制半圆圆弧
  *          animationTime   {Number}   动画变化时间，单位 /秒
  *          config          {Object}   配置信息对象，包含初始角度，扫过的角度以及颜色。属性:{startAngle,sweepAngle,color}
  *          extraTime       {Number}   可选配置（饼图用）扇形运动额外时间
@@ -13,97 +14,134 @@
 -->
 <template>
   <div
-    :style="{
-      width: props.radius,
-      height: props.radius,
-      transform: `rotate3d(0,0,1,${props.config.startAngle}deg)`,
-      transformOrigin: `center center`,
-      transition: `transform ${props.animationTime}s`,
-      left: props.centerPosition.x / 2,
-      top: props.centerPosition.y / 2,
-    }"
+    :style="rootStyle"
   >
     <div
       :style="{
-        width: props.radius,
-        height: props.radius / 2,
-        top: props.radius / 2,
+        width: props.radius * 2,
+        height: props.radius,
+        top: props.radius,
         left: 0,
         transform: `rotate3d(0,0,1,${upAngle}deg)`,
         transformOrigin: `center top`,
         overflow: 'hidden',
-        transition: `transform ${props.animationTime}s`,
+        transition: baseTransition,
       }"
     >
       <div
         :style="{
-          width: props.radius,
+          width: props.radius * 2,
           height: props.radius,
           backgroundImage: `jsvtexturestore://${sourceId}`,
           transform: `rotate3d(0,0,1,${downAngle}deg)`,
           transformOrigin: `center top`,
-          transition: `transform ${props.animationTime + props.extraTime}s`,
+          transition: sweepTransition,
         }"
       ></div>
     </div>
     <div
       :style="{
-        width: props.radius,
-        height: props.radius / 2,
-        top: props.radius / 2,
+        width: props.radius * 2,
+        height: props.radius,
+        top: props.radius,
         left: 0,
         overflow: 'hidden',
       }"
     >
       <div
         :style="{
-          width: props.radius,
+          width: props.radius * 2,
           height: props.radius,
           backgroundImage: `jsvtexturestore://${sourceId}`,
           transform: `rotate3d(0,0,1,${downAngle}deg)`,
           transformOrigin: `center top`,
-          transition: `transform ${props.animationTime+props.extraTime}s`,
+          transition: sweepTransition,
         }"></div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { shallowRef, onBeforeUnmount, watch } from "vue";
+import { shallowRef, onBeforeUnmount, watch, computed } from "vue";
 import { JsvTextureStoreApi } from "../JsViewVueTools";
 let sourceId = shallowRef("");
 const props = defineProps({
   centerPosition: { type: Object, require: true },
   radius: { type: Number, require: true },
+  subRadius: { type: Number, default: 0 },
   config: { type: Object, require: true },
   animationTime: { type: Number, default: 1 },
   extraTime: { type: Number, default: 0 },
 });
 
+const normalizedSubRadius = Math.min(
+  props.radius,
+  Math.max(0, Number(props.subRadius) || 0)
+);
+
 let canvasRef = JsvTextureStoreApi.canvasTexture(
   2 * props.radius,
-  2 * props.radius
+  props.radius
 );
 let customPath = canvasRef.customPath();
 customPath.arcTo(0, -props.radius, 2 * props.radius, props.radius, 0, 180);
-// 闭合路径，绘制实心扇形
+if (normalizedSubRadius > 0 && normalizedSubRadius < props.radius) {
+  const innerLeft = props.radius - normalizedSubRadius;
+  const innerRight = props.radius + normalizedSubRadius;
+  customPath.arcTo(
+    innerLeft,
+    -normalizedSubRadius,
+    innerRight,
+    normalizedSubRadius,
+    180,
+    -180
+  );
+}
+// subRadius=0时为实心扇形；subRadius生效时为半圆圆弧
 customPath.close();
 customPath.fill(props.config.color);
 sourceId.value = canvasRef.commit();
+
 //旋转角度
 let upAngle = shallowRef(0);
 let downAngle = shallowRef(0);
-const judge = () => {
-  downAngle.value = -(180 - props.config.sweepAngle / 2);
-  upAngle.value = props.config.sweepAngle / 2;
+const judge = (sweepAngle) => {
+  if (sweepAngle > 360) {
+    sweepAngle = 360;
+  } else if (sweepAngle < 0) {
+    sweepAngle = 0;
+  }
+  downAngle.value = -Number((180 - sweepAngle / 2).toFixed(3));
+  upAngle.value = Number((sweepAngle / 2).toFixed(3));
+
+  console.log("LudlDebugCSS sweepAngle:", sweepAngle, " color:", props.config.color, " downAngle:", downAngle.value, " upAngle:", upAngle.value);
 };
-judge();
+judge(props.config.sweepAngle);
 watch(props, (n, o) => {
-  judge();
+  judge(props.config.sweepAngle);
 });
 onBeforeUnmount(() => {
   JsvTextureStoreApi.deleteTexture(sourceId.value);
 });
+
+const baseTransition = computed(() =>
+  props.animationTime === 0 ? "" : `transform ${props.animationTime}s`
+);
+const sweepTransition = computed(() =>
+  props.animationTime === 0 ? "" : `transform ${props.animationTime + props.extraTime}s`
+);
+
+let rootStyle = computed(() => {
+  return {
+    width: props.radius * 2,
+    height: props.radius * 2,
+    transform: `rotate3d(0,0,1,${props.config.startAngle}deg)`,
+    transformOrigin: `center center`,
+    transition: baseTransition.value,
+    left: props.centerPosition.x -  props.radius,
+    top: props.centerPosition.y  - props.radius,
+  }
+});
 </script>
 
 <style lang="scss" scoped></style>

package/utils/JsViewVueWidget/JsvSmoothSlideContainer.vue

@@ -0,0 +1,108 @@
+<template>
+  <div ref="root">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import ActorControl from "./JsvFreeMoveActor/ActorControl";
+import { shallowRef, onMounted, computed, ref } from "vue";
+
+const props = defineProps({
+  initPosition: {
+    type: Array,
+    default: () => [0, 0],
+  },
+});
+
+const ReachConditionGroup = 2;
+
+const root = shallowRef();
+const actorControl = new ActorControl();
+let preTarget = props.initPosition;
+let curTarget = props.initPosition;
+
+onMounted(() => {
+  actorControl.bindForgeView(root.value.jsvGetProxyView(), true);
+  // 初始化位置
+  actorControl.run((cmds) => [
+    cmds.action().teleportTo(props.initPosition[0], props.initPosition[1]),
+  ]);
+});
+
+let curSpeed = 0;
+
+/**
+ * 移动到指定位置
+ * @param speed 速度
+ * @param x 目标x坐标
+ * @param y 目标y坐标
+ * @param onReach 到达目标位置后的回调
+ * @param prex 到达前x坐标
+ * @param prey 到达前y坐标
+ * @param onPreReach 到达前回调
+ */
+const moveTo = (speed, x, y, onReach, prex, prey, onPreReach) => {
+  if (x == curTarget[0] && y == curTarget[1] && curSpeed == speed) {
+    return;
+  }
+  curSpeed = speed;
+  let targetX = undefined;
+  let targetY = undefined;
+  let preTargetX = undefined;
+  let preTargetY = undefined;
+  let speedX = undefined;
+  let speedY = undefined;
+
+  preTarget = [curTarget[0], curTarget[1]];
+  curTarget = [x, y];
+  const vec = [x - preTarget[0], y - preTarget[1]];
+  const module = Math.sqrt(vec[0] * vec[0] + vec[1] * vec[1]);
+  if (vec[0] != 0) {
+    speedX = (vec[0] / module) * speed;
+    targetX = x;
+    preTargetX = prex;
+  } else if (vec[1] != 0) {
+    speedY = (vec[1] / module) * speed;
+    targetY = y;
+    preTargetY = prey;
+  }
+
+  actorControl.run((cmds) => [
+    cmds.state().removeConditionByGroup(ReachConditionGroup),
+    cmds.action(0, 0).setSpeed(speedX, speedY),
+    cmds
+      .condition(ReachConditionGroup)
+      .reachPosition(preTargetX, preTargetY)
+      .then([onPreReach]),
+    cmds
+      .condition(ReachConditionGroup)
+      .reachPosition(targetX, targetY)
+      .then([onReach]),
+  ]);
+};
+
+/**
+ * 刹车到指定位置
+ * @param x 目标x坐标
+ * @param y 目标y坐标
+ */
+const brakeTo = (x, y) => {
+  actorControl.run((cmds) => [cmds.action(3, 0).brakeToPosition(x, y)]);
+};
+
+const stop = () => {
+  actorControl.run((cmds) => [cmds.action().setSpeed(0, 0)]);
+};
+
+const setSpeed = (speedX, speedY) => {
+  actorControl.run((cmds) => [cmds.action().setSpeed(speedX, speedY)]);
+};
+
+defineExpose({
+  moveTo,
+  brakeTo,
+  stop,
+  setSpeed,
+});
+</script>

package/utils/JsViewVueWidget/JsvSoundPool.js

@@ -49,22 +49,57 @@ class AudioController {
     this._SoundId = soundId;
     this._Url = url;
     this._StreamId = -1;
+    this._StreamStartTime = 0;
+    this._SubStreamId = -1; // 快速重复播放的第二路音轨
+    this._SubStreamStartTime = 0;
+    this._LatestStreamStartTime = 0;
 
     this._Rate = 1;
     this._Loop = 0;
     this._LeftVolume = 1;
     this._RightVolume = 1;
     this._Priority = 0;
+    this._FastRepeatGap = 0;
+  }
+
+  enableFastRepeat(mini_gap) {
+    this._FastRepeatGap = mini_gap;
   }
 
   /**
      * @description: 播放音频
      */
   play() {
+    if (this._FastRepeatGap == 0) {
+      this._playMainStream(0);
+    } else {
+      let now = Date.now();
+      if (now - this._LatestStreamStartTime > this._FastRepeatGap / 2 && now - this._StreamStartTime > this._FastRepeatGap) {
+        this._playMainStream(now);
+      } else {
+        if (now - this._LatestStreamStartTime > this._FastRepeatGap / 2 && now - this._SubStreamStartTime > this._FastRepeatGap) {
+          this._playSubStream(now);
+        }
+      }
+    }
+  }
+
+  _playMainStream(now) {
     if (this._StreamId !== -1) {
       this._SoundPool.stop(this._StreamId);
     }
     this._StreamId = this._SoundPool.play(this._SoundId, this._LeftVolume, this._RightVolume, this._Priority, this._Loop, this._Rate);
+    this._StreamStartTime = now;
+    this._LatestStreamStartTime = now;
+  }
+
+  _playSubStream(now) {
+    if (this._SubStreamId !== -1) {
+      this._SoundPool.stop(this._SubStreamId);
+    }
+    this._SubStreamId = this._SoundPool.play(this._SoundId, this._LeftVolume, this._RightVolume, this._Priority, this._Loop, this._Rate);
+    this._SubStreamStartTime = now;
+    this._LatestStreamStartTime = now;
   }
 
   /**
@@ -74,6 +109,11 @@ class AudioController {
     if (this._StreamId !== -1) {
       this._SoundPool.pause(this._StreamId);
     }
+    // 第二路直接停止即可
+    if (this._SubStreamId !== -1) {
+      this._SoundPool.stop(this._SubStreamId);
+      this._SubStreamId = -1;
+    }
   }
 
   /**
@@ -93,6 +133,10 @@ class AudioController {
       this._SoundPool.stop(this._StreamId);
       this._StreamId = -1;
     }
+    if (this._SubStreamId !== -1) {
+      this._SoundPool.stop(this._SubStreamId);
+      this._SubStreamId = -1;
+    }
   }
 
   /**
@@ -100,10 +144,8 @@ class AudioController {
      * @param {float} rate 播放的倍率
      */
   setRate(rate) {
+    // 在起播前设置
     this._Rate = rate;
-    if (this._Streamid !== -1) {
-      this._SoundPool.setRate(this._StreamId, this._Rate);
-    }
   }
 
   /**
@@ -112,11 +154,9 @@ class AudioController {
      * @param {float} rightVolume 右声道音量
      */
   setVolume(leftVolume, rightVolume) {
+    // 在起播前设置
     this._LeftVolume = leftVolume;
     this._RightVolume = rightVolume;
-    if (this._StreamId !== -1) {
-      this._SoundPool.setVolume(this._StreamId, this._LeftVolume, this._RightVolume);
-    }
   }
 
   /**
@@ -124,10 +164,8 @@ class AudioController {
      * @param {int} loop 循环次数
      */
   setLoop(loop) {
+    // 在起播前设置
     this._Loop = loop;
-    if (this._StreamId !== -1) {
-      this._SoundPool.setLoop(this._StreamId, this._Loop);
-    }
   }
 
   /**
@@ -135,10 +173,8 @@ class AudioController {
      * @param {int} priority 优先级
      */
   setPriority(priority) {
+    // 在起播前设置
     this._Priority = priority;
-    if (this._StreamId !== -1) {
-      this._SoundPool.setPriority(this._StreamId, this._Priority);
-    }
   }
 }
 
@@ -161,6 +197,30 @@ class JsvSoundPool {
      * @param {function} callback 资源加载完成回调 function(int state, AudioController controller) {}
      */
   request(url, netSetting, priority, callback) {
+    this._request(url, 0, netSetting, priority, callback);
+  }
+
+  /**
+     * @description: 准备音频资源
+     * @param {string} url 音频url
+     * @param {int} fastRepeatGap 最小间隔时间, 如果不为0则启用快速重复播放, 用两路音轨解决快速播放的漏音问题
+     * @param {string} netSetting http请求配置
+     * @param {int} priority 优先级
+     * @param {function} callback 资源加载完成回调 function(int state, AudioController controller) {}
+     */
+  requestInRepeatMode(url, fastRepeatGap, netSetting, priority, callback) {
+    this._request(url, fastRepeatGap, netSetting, priority, callback);
+  }
+
+  /**
+     * @description: 准备音频资源
+     * @param {string} url 音频url
+     * @param {int} repeatFastMiniGap 最小间隔时间, 如果不为0则启用快速重复播放, 用两路音轨解决快速播放的漏音问题
+     * @param {string} netSetting http请求配置
+     * @param {int} priority 优先级
+     * @param {function} callback 资源加载完成回调 function(int state, AudioController controller) {}
+     */
+  _request(url, repeatFastMiniGap, netSetting, priority, callback) {
     if (!supportSoundPool) {
       callback(-1, null);
       console.log("not support sound pool.");
@@ -181,6 +241,9 @@ class JsvSoundPool {
             referCount: 1
           };
           const controller = new AudioController(this._SoundPool, sound_id, realUrl);
+          if (repeatFastMiniGap > 0) {
+            controller.enableFastRepeat(repeatFastMiniGap);
+          }
           this._StreamIdMap.add(controller);
           callback(state, controller);
         } else {