@shijiu/jsview-vue 2.1.200 → 2.1.340-test.0

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -15,8 +15,9 @@
 
 <script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import { TextTools } from "../JsViewVueTools/JsvTextTools";
-import { getTextWidth, JsvVisibleSensor } from "jsview";
+import { TextTools } from "../JsViewVueTools";
+import JsvVisibleSensor from "./JsvVisibleSensor";
+import { getTextWidth } from "../JsViewVueTools"
 import {
   shallowRef,
   computed,
@@ -188,7 +189,7 @@ const sureNum = () => {
     }
   } else {
     text1.value = props.text;
-    text2.value=null
+    text2.value = null;
     noSlide.value = true;
     MoreLong.value = false;
     normalSlide.value = false;
@@ -364,9 +365,11 @@ const runAnimation = () => {
     }
   }
 };
+let ComparingText = "";
 watchEffect(() => {
   //获取最新数据
-  if (props.text !== text1.value) {
+  if (props.text !== ComparingText) {
+    ComparingText = props.text;
     const newText = props.text;
     const newTextGap = props.textGap;
     const newTextWidth = TextTools.getOneLineTextDrawWidth(

package/utils/JsViewVueWidget/JsvPieChart.vue

@@ -28,7 +28,7 @@
 
 <script setup>
 import { watch, reactive, nextTick } from "vue";
-import { JsvSector } from "jsview";
+import JsvSector from "./JsvSector.vue";
 const props = defineProps({
   centerPosition: { type: Object, required: true },
   data: { type: Array, required: true },

package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue

@@ -192,7 +192,7 @@ const _getPreloadViewIdList = () => {
       (image_url.toLowerCase().indexOf(".webp") >= 0 ||
         image_url.toLowerCase().indexOf(".gif") >= 0)
     ) {
-      texture = ForgeHandles.TextureManager.GetGifImage(image_url, false);
+      texture = ForgeHandles.TextureManager.GetImage2(image_url, false);
     } else {
       texture = ForgeHandles.TextureManager.GetImage2(
         image_url,

package/utils/JsViewVueWidget/JsvPreload/index.js

@@ -5,7 +5,7 @@
  * @LastEditTime: 2021-11-22 14:24:36
  * @Description: file content
  */
-//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+//! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as JsvPreload from "./JsvPreload.vue";
 
 let _JsvPreload;

package/utils/JsViewVueWidget/JsvProgressBar.vue

@@ -0,0 +1,172 @@
+<!--
+ * 【模块 export 内容】
+ * JsvProgressBar：Vue高阶组件，进度条组件。
+ *      props说明:
+ *          width            {Number}    (必填) 进度条总宽度
+ *          height           {Number}    (必填) 进度条总宽度（也是圆的直径）
+ *          bgcBefore        {String}    (必填) 进度条前景颜色
+ *          bgcBehind        {String}    (必填) 进度条背景颜色
+ *          aniTime          {Number}    (可选) 进度条变化的动画时间，单位：秒。
+ *          progress         {Number}    (可选) 进度条的百分比进度。有效值：0-100
+ *          isCanvas         {Boolean}   (可选) 进度条的展示样式：①点九 ②clipView 默认为true，即点九样式。
+-->
+
+<template>
+  <!-- 点九进度条 -->
+  <div v-if="props.isCanvas">
+    <div v-show="isZero">
+      <JsvNinePatch
+        :style="{
+          left: 0,
+          top: 0,
+          width: realWidth,
+          height: props.height,
+        }"
+        :imageUrl="`jsvtexturestore://${sourceId}`"
+        :imageWidth="props.height"
+        :centerWidth="1"
+        :imageDspWidth="props.height - 2"
+        :borderOutset="2"
+        :animTime="props.aniTime"
+        :onTransitionEnd="myTransitionEnd"
+      />
+    </div>
+  </div>
+  <div v-else>
+    <div
+      :style="{
+        width: realWidth,
+        height: props.height,
+        top: 0,
+        left: 0,
+        borderRadius: radius,
+        transition: myTransition(),
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        :style="{
+          left: 0,
+          width: props.width,
+          height: props.height,
+          top: 0,
+          borderRadius: radius,
+          backgroundColor: props.bgcBefore,
+        }"
+      ></div>
+    </div>
+  </div>
+  <!-- 点九背景 -->
+  <JsvNinePatch
+    :style="{
+      left: 0,
+      top: 0,
+      width: props.width,
+      height: props.height,
+    }"
+    :imageUrl="`jsvtexturestore://${sourceId2}`"
+    :imageWidth="props.height"
+    :centerWidth="1"
+    :imageDspWidth="props.height - 2"
+    :borderOutset="2"
+    :animTime="0"
+  />
+</template>
+
+<script setup>
+
+import JsvNinePatch from "../JsViewVueWidget/JsvNinePatch.vue";
+import { shallowRef, onBeforeUnmount, watchEffect } from "vue";
+import { JsvTextureStoreApi } from "../JsViewVueTools/JsvTextureStore/JsvTextureStore";
+
+const props = defineProps({
+  width: { type: Number, required: true },
+  height: { type: Number, required: true },
+  bgcBefore: { type: String, required: true },
+  bgcBehind: { type: String, required: true },
+  aniTime: { type: Number, default: 0 },
+  progress: { type: Number, required: true },
+  isCanvas: { type: Boolean, default: true },
+});
+
+let canvasRef;
+let canvasRef2;
+let sourceId = shallowRef("");
+let sourceId2 = shallowRef("");
+
+//画布大小
+let bitmap = {
+  width: props.height,
+  height: props.height,
+};
+//半径
+let radius = Math.floor(props.height / 2) - 2;
+
+//相应Texture赋值
+canvasRef = JsvTextureStoreApi.canvasTexture(bitmap.width, bitmap.height);
+canvasRef2 = JsvTextureStoreApi.canvasTexture(bitmap.width, bitmap.height);
+
+//让progress有响应式
+let myProgress = shallowRef(props.progress);
+
+//初始值
+let realWidth = shallowRef(0);
+
+//当展示点九时，控制CanvasTexture显示的数值
+let isZero = shallowRef(true);
+//画图
+let customPath = canvasRef.circlePath(radius + 2, radius + 2, radius);
+let customPath2 = canvasRef2.circlePath(radius + 2, radius + 2, radius);
+customPath.fill(props.bgcBefore);
+customPath2.fill(props.bgcBehind);
+sourceId.value = canvasRef.commit();
+sourceId2.value = canvasRef2.commit();
+
+//点九控制百分比为0的函数
+const myTransitionEnd = () => {
+  if (myProgress.value <= 0) {
+    isZero.value = false;
+  }
+};
+//clipView控制动画的函数
+const myTransition = () => {
+  if (props.aniTime !== 0) {
+    return `width ${props.aniTime}s linear`;
+  } else {
+    return "";
+  }
+};
+watchEffect(() => {
+  //限制最高值和最低值
+  if (props.progress >= 100) {
+    myProgress.value = 100;
+    realWidth.value = props.width;
+    isZero.value = true;
+  } else if (props.progress <= 0) {
+    myProgress.value = 0;
+    if (props.isCanvas) {
+      realWidth.value = props.height;
+    } else {
+      realWidth.value = 0;
+    }
+  } else {
+    myProgress.value = props.progress;
+    if (props.isCanvas) {
+      realWidth.value = Math.floor(
+        (props.width - props.height) * myProgress.value * 0.01 + props.height
+      );
+      isZero.value = true;
+    } else {
+      realWidth.value = Math.floor(props.width * myProgress.value * 0.01);
+    }
+  }
+});
+
+//页面卸载前删除Texture
+onBeforeUnmount(() => {
+  JsvTextureStoreApi?.deleteTexture(sourceId.value);
+  JsvTextureStoreApi?.deleteTexture(sourceId2.value);
+});
+</script>
+
+<style lang="scss" scoped></style>

package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue

@@ -13,7 +13,6 @@
  *                              height {int}     logo的宽度
  *                              height {int}     logo的高度
  *                       }
- */
  -->
  <script>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";

package/utils/JsViewVueWidget/JsvQrcode/index.js

@@ -5,7 +5,7 @@
  * @LastEditTime: 2021-10-13 17:41:34
  * @Description: file content
  */
-//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+//! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as JsvQrcode from "./JsvQrcode.vue";
 
 let _JsvQrcode;

package/utils/JsViewVueWidget/JsvRadarChart.vue

@@ -17,7 +17,7 @@
 -->
 <script setup>
 import { shallowRef, onMounted, onBeforeUnmount, watch, ref, onBeforeUpdate } from "vue"
-import { getTextWidth } from "jsview"
+import { getTextWidth } from "../JsViewVueTools"
 const props = defineProps({
     style: {
         type: Object,

package/utils/JsViewVueWidget/JsvScaleTextBox.vue

@@ -1,5 +1,4 @@
 <!--
-/*
  * 【控件介绍】
  * JsvScaleTextBox：
  *          创建一个div，可以控制其内部的文字图层的清晰度，
@@ -9,7 +8,6 @@
  *      prop说明:
  *          definitionScale   内部文字被放大的倍数，写法为"1.0x", "1.6x"
  *          其他    同div的其他props，例如style, class等
- */
 -->
 <script>
 export default {

package/utils/JsViewVueWidget/JsvSector.vue

@@ -68,7 +68,7 @@
 
 <script setup>
 import { shallowRef, onBeforeUnmount, watch } from "vue";
-import { JsvTextureStoreApi, JsvLine } from "jsview";
+import { JsvTextureStoreApi } from "../JsViewVueTools";
 let sourceId = shallowRef("");
 const props = defineProps({
   centerPosition: { type: Object, require: true },

package/utils/JsViewVueWidget/JsvSoundPool.js

@@ -2,7 +2,7 @@
  * Created by changhua.chen@qcast.cn on 11/13/2020.
  */
 
-/**
+/*!
  * 【模块 export 内容】
  * JsvSoundPool: 面向对象的类，用于播放效果音，创建JsvSoundPool对象后通过request的回调获得AudioController句柄后进行控制
  *      功能函数: (参数说明见函数本体)

package/utils/JsViewVueWidget/JsvSpray/index.js

@@ -5,7 +5,7 @@
  * @LastEditTime: 2021-10-18 14:09:04
  * @Description: file content
  */
-//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+//! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as JsvSpray from "./JsvSpray.vue";
 let _JsvSpray;
 if (window.JsView) {

package/utils/JsViewVueWidget/JsvSpriteAnim/FrameBuidler.ts

@@ -0,0 +1,235 @@
+import { getKeyFramesGroup } from "../../JsViewVueTools/JsvDynamicKeyFrames.js";
+import { getsAnimationToken } from "./sAnimationToken.js";
+
+let keyFrameStyleSheet = getKeyFramesGroup(null);
+
+const TRANSFORM_ORIGIN_LEFT_TOP: String = "left top";
+
+class TransformInfoResule {
+  public csw: number = 1;
+  public csh: number = 1;
+  public cx: number = 0;
+  public cy: number = 0;
+  public sw: number = 1;
+  public sh: number = 1;
+  public x: number = 0;
+  public y: number = 0;
+}
+
+class SpritePack {
+  public keyFrameRefName: String | null = null;
+  public clipKeyFrameName: String | null = null;
+  public transKeyFrameName: String | null = null;
+  public clipStyle: any = null; // 对应clip div的style控制
+  public transStyle: any = null; // 对应translate div的style控制
+  public imageStyle: any = null; // 对应最内部的图片展示的div的style控制
+}
+
+function getAnimNameBase() {
+  return `sprite-anim-name-${getsAnimationToken()}`;
+};
+
+function getTransformInfo(
+  source_obj: any,
+  target_obj: any,
+  canvas_width: number,
+  canvas_height: number
+): TransformInfoResule {
+  const result = new TransformInfoResule();
+
+  // Clip在Canvas div之内，以Canvas为基准进行缩放和平移
+  // 图形左上角远离原点后再缩放，所以需要进行缩放补偿
+  const clip_scale_w: number = target_obj.w / canvas_width;
+  const clip_scale_h: number = target_obj.h / canvas_height;
+  result.csw = clip_scale_w;
+  result.csh = clip_scale_h;
+  result.cx = target_obj.x / clip_scale_w;
+  result.cy = target_obj.y / clip_scale_h;
+
+  // Image在Clip div之内，所以以Clip为基准进行缩放和平移, 对clip的缩放进行反处理以还原尺寸
+  // 将子图左上角对齐原点后再缩放，所以x,y不需要进行举例缩放补偿
+  result.sw = source_obj.w / target_obj.w / clip_scale_w;
+  result.sh = source_obj.h / target_obj.h / clip_scale_h;
+  result.x = -source_obj.x;
+  result.y = -source_obj.y;
+
+  return result;
+};
+
+function createTransformStyle(
+  w_scale: number,
+  h_scale: number,
+  x: number,
+  y: number
+): String {
+  let output = "";
+  output =
+    `${output}scale3d(${parseFloat(w_scale as any).toPrecision(5)},${parseFloat(h_scale as any).toPrecision(5)},1) `
+    + `translate3d(${parseFloat(x as any).toPrecision(5)}px,${parseFloat(y as any).toPrecision(5)}px,0)`;
+  return output;
+};
+
+function expireAnimates(runningSprite: SpritePack | null) {
+  if (!runningSprite) {
+    return;
+  }
+  let keyFrameRefName = runningSprite.keyFrameRefName;
+  const names_array = [`${keyFrameRefName}-clip`, `${keyFrameRefName}-image`];
+
+  if (keyFrameStyleSheet) {
+    keyFrameStyleSheet.removeMultiRules(names_array);
+  }
+}
+
+function newAnimateFrames(
+  image_url: string,
+  frame_info_list: Array<any> | undefined,
+  canvas_width: number,
+  canvas_height: number,
+  source_width: number,
+  source_height: number,
+): SpritePack {
+
+  if (!frame_info_list || frame_info_list.length == 0) {
+    return new SpritePack();
+  }
+
+  if (!keyFrameStyleSheet) {
+    console.error("Error: Get keyFrameStyleSheet failed");
+    return new SpritePack();
+  }
+
+  const frame_percent = 1 / (frame_info_list.length - 1);
+  const anim_base_name = getAnimNameBase();
+  const anim_name_clip = `${anim_base_name}-clip`;
+  const anim_name_image = `${anim_base_name}-image`;
+  let image_keyframs = `@keyframes ${anim_name_image} {`;
+  let clip_keyframs = `@keyframes ${anim_name_clip} {`;
+
+  for (let i = 0; i < frame_info_list.length; i++) {
+    let item: any;
+    item = frame_info_list[i];
+
+    // Header
+    let header: String;
+    if (i !== frame_info_list.length) {
+      header = `${parseFloat((frame_percent * i * 100) as any).toFixed(2)}% {`;
+    } else {
+      header = "100% {";
+    }
+    image_keyframs += header;
+    clip_keyframs += header;
+
+    if (item.source) {
+      const tr = getTransformInfo(
+        item.source,
+        item.target,
+        canvas_width,
+        canvas_height
+      );
+      const clip_trans = createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy);
+      const image_trans = createTransformStyle(tr.sw, tr.sh, tr.x, tr.y);
+
+      let tr_str = "";
+      tr_str = `${tr_str}transform:${clip_trans};transform-origin:left top;`;
+      clip_keyframs += tr_str;
+
+      tr_str = "";
+      tr_str = `${tr_str}transform:${image_trans};transform-origin:left top;`;
+      image_keyframs += tr_str;
+    }
+
+    image_keyframs += "}";
+    clip_keyframs += "}";
+  }
+
+  image_keyframs += "}";
+  clip_keyframs += "}";
+
+  // 申请全局keyFrame
+  keyFrameStyleSheet.insertRule(image_keyframs);
+  keyFrameStyleSheet.insertRule(clip_keyframs);
+
+  let pack_info = new SpritePack();
+
+  // console.log("testSprite image_keyframs", image_keyframs)
+  // console.log("testSprite clip_keyframs", clip_keyframs)
+
+  pack_info.keyFrameRefName = anim_base_name;
+  pack_info.clipKeyFrameName = anim_name_clip;
+  pack_info.clipStyle = {
+    overflow: "hidden",
+    width: canvas_width,
+    height: canvas_height,
+    transform: null, // 重置 transform，以免影响keyframe动画
+    transformOrigin: TRANSFORM_ORIGIN_LEFT_TOP,
+    animation: null, // 外部设置，需要时间和loop信息
+  };
+
+  pack_info.transKeyFrameName = anim_name_image;
+  pack_info.transStyle = {
+    transform: null, // 重置 transform，以免影响keyframe动画
+    transformOrigin: TRANSFORM_ORIGIN_LEFT_TOP,
+    animation: null, // 外部设置，需要时间和loop信息
+    width: source_width,
+    height: source_height,
+  };
+
+  pack_info.imageStyle = {
+    backgroundImage: image_url,
+    width: source_width,
+    height: source_height,
+  };
+
+  return pack_info;
+}
+
+function newFrozeFrame(
+  image_url: String,
+  frame_info_list: Array<any>, // 精灵图队列
+  index: number, // 静止帧 stopFrame.value === "start" ? 0 : frame_info_list.length - 1;
+  canvas_width: number,
+  canvas_height: number,
+  source_width: number,
+  source_height: number
+): SpritePack {
+  let sprite_info = new SpritePack();
+
+  const tr = getTransformInfo(
+    frame_info_list[index].source,
+    frame_info_list[index].target,
+    canvas_width,
+    canvas_height
+  );
+
+  sprite_info.clipStyle = {
+    transform: createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy),
+    transformOrigin: TRANSFORM_ORIGIN_LEFT_TOP,
+    overflow: "hidden",
+    left: 0,
+    top: 0,
+    width: canvas_width,
+    height: canvas_height,
+  };
+
+  sprite_info.transStyle = {
+    transformOrigin: TRANSFORM_ORIGIN_LEFT_TOP,
+    transform: createTransformStyle(tr.sw, tr.sh, tr.x, tr.y),
+    width: source_width,
+    height: source_height,
+  };
+
+  sprite_info.imageStyle = {
+    backgroundImage: image_url,
+    width: source_width,
+    height: source_height,
+  };
+
+  return sprite_info;
+};
+
+export {
+  expireAnimates,
+  newAnimateFrames,
+  newFrozeFrame
+}