@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.151-test.0

package/TextureAnimation/utils/RotateFrame.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { defineProps } from "vue";
+import { JsvTextureAnim, DECORATE_NINEPATCH_ALPHA_MIX } from "jsview";
+import { BuildFrame } from "./FrameCanvasStore";
+import mask from "./circleHaloMask.png";
+
+const rProps = defineProps({
+  // 旋转圈内的url，可以是import内容，也可以是https内容
+  imageUrl: {
+    type: String,
+    require: true,
+  },
+
+  // 所包含区域的left, top, width, height
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+  width: {
+    type: Number,
+    require: true,
+  },
+  height: {
+    type: Number,
+    require: true,
+  },
+
+  // 所包含区域的圆角值borderRadius
+  borderRadius: {
+    type: Number,
+    require: true,
+  },
+
+  // 焦点框的线宽
+  lineWidth: {
+    type: Number,
+    require: true,
+  },
+
+  // 焦点框旋转一圈所用的时间
+  oneCircleTime: {
+    type: Number,
+    default: 0.5, // 转一圈0.5秒
+  },
+
+  // 是否需要外发光光晕
+  withHalo: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * 设置转盘的绘制覆盖区域
+   * 注意texture的尺寸需要兼顾最大的view即可
+   */
+  maxViewSize: {
+    type: Object, // { width: Number, height: Number },
+    default: {
+      width: 400,
+      height: 400,
+    },
+  },
+});
+
+// 基础旋转动画
+const cRotateAnimation =
+  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
+
+/**
+ * 创建右图的边缘遮罩，可调节边框的粗细:circleLineWidth
+ */
+// 设置设定模拟绘制.9图
+const cFrameInfo = BuildFrame(rProps.borderRadius, rProps.lineWidth);
+
+// 创建内边框(实心不发光部分)
+const ninePatchDecorator1 = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `jsvtexturestore://${cFrameInfo.canvasSourceId}`,
+  imageWidth: cFrameInfo.canvasWidth, // 等同于画布宽
+  centerWidth: 2, // 固定为1或2, 但1在PC上绘制可能有异常
+  borderOutset: cFrameInfo.borderOutset, // (画布 - 圆环内直径) / 2
+  animTime: rProps.oneCircleTime,
+};
+
+/**
+ * 导入右图的边缘光晕部分的遮罩
+ */
+// 外发光的圈的图片信息, 完全按照 circleHaloMask来配置
+const cOriginPngInfo = {
+  size: 160, // 图片尺寸
+  radius: 56, // 图片中的圆的圆内半径
+};
+const cRectRadius = Math.floor(rProps.borderRadius + rProps.lineWidth); // 光环在描边之外，留出描边的宽度
+const ninePatchDecorator2 = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `url(${mask})`,
+  imageWidth: cOriginPngInfo.size,
+  imageDspWidth: Math.floor(
+    (cRectRadius / cOriginPngInfo.radius) * cOriginPngInfo.size
+  ),
+  centerWidth: 2,
+  borderOutset: Math.floor(cOriginPngInfo.size / 2 - cOriginPngInfo.radius),
+  animTime: rProps.oneCircleTime,
+};
+
+const texCoord = {
+  width: rProps.maxViewSize.width,
+  height: rProps.maxViewSize.height,
+};
+</script>
+<template>
+  <div>
+    <!-- 光晕(halo)在下，实心区域在上 -->
+    <jsv-texture-anim
+      v-if="rProps.withHalo"
+      :src="rProps.imageUrl"
+      :left="rProps.left"
+      :top="rProps.top"
+      :width="rProps.width"
+      :height="rProps.height"
+      :texCoord="texCoord"
+      :animation="cRotateAnimation"
+      :duration="5000"
+      :repeat="-1"
+      :autoStart="true"
+      :decorate="ninePatchDecorator2"
+    ></jsv-texture-anim>
+    <jsv-texture-anim
+      :src="rProps.imageUrl"
+      :left="rProps.left"
+      :top="rProps.top"
+      :width="rProps.width"
+      :height="rProps.height"
+      :texCoord="texCoord"
+      :animation="cRotateAnimation"
+      :duration="5000"
+      :repeat="-1"
+      :autoStart="true"
+      :decorate="ninePatchDecorator1"
+    ></jsv-texture-anim>
+  </div>
+</template>

package/TombSweepingDayTest/Raining/RainScene.vue

@@ -34,11 +34,11 @@ import Rain from "./Rain.vue";
 import { JsvRipple, JsvRippleShape, JsvAudio, JsvSoundPool } from "jsview";
 import { shallowRef, onMounted, onBeforeUnmount } from "vue";
 const bg =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/TombSweepingDayTest/qingming_bg.jpg";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/qingming_bg.jpg";
 const title =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/TombSweepingDayTest/qingming_title.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/qingming_title.png";
 const musicBg =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/VideoTestSample/rain_background.mp3";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/rain_background.mp3";
 let timer = { id: -1, id2: -1 };
 const soundPool = new JsvSoundPool(10);
 let rippleViewRef = shallowRef(null);
@@ -62,7 +62,7 @@ const genSource = () => {
 let _BgAudio = null;
 //水波音效
 const mySound =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/VideoTestSample/rain_tiktok.mp3";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/rain_tiktok.mp3";
 //音效ref
 let mySoundControl = null;
 //音效回调

package/ViewOpacity/App.vue

@@ -11,9 +11,9 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 const test1 =
-  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ViewOpacity/App/test_1.jpeg)";
 const test2 =
-  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ViewOpacity/App/test_2.jpeg)";
 
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
@@ -81,6 +81,25 @@ onUnmounted(() => {
           />
         </div>
       </div>
+      <div class="block">
+        <div :style="{ left: 120, top: 320 }">
+          <img
+            :style="{
+              ...style1,
+            }"
+            :src="test1"
+          />
+        </div>
+
+        <div :style="{ left: 500, top: 320 }">
+          <img
+            :style="{
+              ...style1,
+            }"
+            :src="test2"
+          />
+        </div>
+      </div>
     </div>
   </jsv-focus-block>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.2.426-test.0",
+  "version": "2.3.151-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",