@shijiu/jsview-vue 2.3.151-test.0 → 2.3.728-alpha.0

package/utils/JsViewVueTools/JsvTextureStore/CanvasTexture/DrawHelper.ts

@@ -0,0 +1,304 @@
+import { JsvTextureStoreApi } from "../JsvTextureStore";
+import CanvasTexture from "./CanvasTexture";
+import { CustomPath } from "./Path";
+
+type Data = {
+  x: number;
+  y: number;
+};
+interface Plot {
+  data: Data[];
+  lineWidth: number;
+  lineColor: string;
+}
+
+//曲线描画相关函数
+// // 1. 处理边界：添加镜像虚拟点（优化首尾平滑）
+// function addBoundaryPoints(data: Data[]): Data[] {
+//   const first = data[0];
+//   const last = data[data.length - 1];
+//   // 前加镜像点：2*first - second
+//   const prevVirtual = {
+//     x: 2 * first.x - data[1].x,
+//     y: 2 * first.y - data[1].y,
+//   };
+//   // 后加镜像点：2*last - secondLast
+//   const nextVirtual = {
+//     x: 2 * last.x - data[data.length - 2].x,
+//     y: 2 * last.y - data[data.length - 2].y,
+//   };
+//   return [prevVirtual, ...data, nextVirtual];
+// }
+// // 2. Catmull-Rom样条绘制平滑折线
+// /**
+//  * Catmull-Rom样条插值
+//  * @param path {CustomPath} 路径对象
+//  * @param data {Data[]} 数据点数组，每个点包含 x 和 y 坐标
+//  * @param tension {Number} 张力参数，默认值 0
+//  */
+// function drawCatmullRom(path: CustomPath, data: Data[], tension = 0): void {
+//   const points = addBoundaryPoints(data); // 含虚拟点的完整数据
+//   path.moveTo(data[0].x, data[0].y); // 起点（原始第一个点）
+
+//   for (let i = 1; i < data.length; i++) {
+//     const p0 = points[i - 1]; // 虚拟点/前一个点
+//     const p1 = points[i]; // 当前点（原始数据点）
+//     const p2 = points[i + 1]; // 下一个点（原始数据点）
+//     const p3 = points[i + 2]; // 虚拟点/后一个点
+
+//     // 计算贝塞尔控制点（含张力参数）
+//     const t = (1 - tension) / 6;
+//     const cp1x = p1.x + t * (p2.x - p0.x);
+//     const cp1y = p1.y + t * (p2.y - p0.y);
+//     const cp2x = p2.x - t * (p3.x - p1.x);
+//     const cp2y = p2.y - t * (p3.y - p1.y);
+
+//     // 绘制三次贝塞尔曲线（p1→p2）
+//     path.cubicTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
+//   }
+// }
+
+// 3. 单调三次插值（Monotonic Cubic Interpolation）- 适合处理数据突变
+/**
+ * 单调三次插值，避免在数据突变处产生凸起
+ * 基于 Fritsch-Carlson 算法，保持数据段的单调性
+ * @param path {CustomPath} 路径对象
+ * @param data {Data[]} 数据点数组，每个点包含 x 和 y 坐标
+ */
+function drawMonotonicCubic(path: CustomPath, data: Data[]): void {
+  if (data.length < 2) return;
+  if (data.length === 2) {
+    path.moveTo(data[0].x, data[0].y);
+    path.lineTo(data[1].x, data[1].y);
+    return;
+  }
+
+  path.moveTo(data[0].x, data[0].y);
+
+  const n = data.length - 1;
+  const dx: number[] = [];
+  const dy: number[] = [];
+  const m: number[] = []; // 每段的斜率
+
+  // 计算每段的斜率和距离
+  for (let i = 0; i < n; i++) {
+    dx[i] = data[i + 1].x - data[i].x;
+    dy[i] = data[i + 1].y - data[i].y;
+    m[i] = dx[i] !== 0 ? dy[i] / dx[i] : 0;
+  }
+
+  // 计算每个内点的切线斜率（Fritsch-Carlson 方法）
+  const delta: number[] = new Array(n + 1);
+
+  // 边界点的斜率
+  delta[0] = m[0];
+  delta[n] = m[n - 1];
+
+  // 计算内点的斜率
+  for (let i = 1; i < n; i++) {
+    if (m[i - 1] * m[i] <= 0) {
+      // 如果相邻段斜率符号相反（有极值），设为0
+      delta[i] = 0;
+    } else {
+      // 使用加权调和平均，确保单调性
+      const w1 = 2 * dx[i] + dx[i - 1];
+      const w2 = 2 * dx[i - 1] + dx[i];
+      const denominator = w1 / m[i - 1] + w2 / m[i];
+      delta[i] = denominator !== 0 ? (w1 + w2) / denominator : 0;
+
+      // 确保斜率在合理范围内（3倍限制，保持单调性）
+      if (Math.abs(delta[i]) > 3 * Math.abs(m[i - 1])) {
+        delta[i] = 3 * m[i - 1];
+      }
+      if (Math.abs(delta[i]) > 3 * Math.abs(m[i])) {
+        delta[i] = 3 * m[i];
+      }
+    }
+  }
+
+  // 绘制每段曲线
+  for (let i = 0; i < n; i++) {
+    const p0 = data[i];
+    const p1 = data[i + 1];
+    const dxi = dx[i];
+
+    // 获取当前段两端的切线斜率
+    const d0 = delta[i];
+    const d1 = delta[i + 1];
+
+    // 转换为三次贝塞尔曲线的控制点
+    // 对于三次 Hermite 插值，控制点位置为：
+    const cp1x = p0.x + dxi / 3;
+    const cp1y = p0.y + (d0 * dxi) / 3;
+    const cp2x = p1.x - dxi / 3;
+    const cp2y = p1.y - (d1 * dxi) / 3;
+
+    path.cubicTo(cp1x, cp1y, cp2x, cp2y, p1.x, p1.y);
+  }
+}
+
+// // 4. B样条插值
+// /**
+//  * B样条插值（均匀B样条）
+//  * @param path {CustomPath} 路径对象
+//  * @param data {Data[]} 数据点数组
+//  * @param degree {number} B样条次数，默认3（三次B样条）
+//  */
+// function drawBSpline(path: CustomPath, data: Data[], degree: number = 3): void {
+//   if (data.length < 2) return;
+//   if (data.length === 2) {
+//     path.moveTo(data[0].x, data[0].y);
+//     path.lineTo(data[1].x, data[1].y);
+//     return;
+//   }
+
+//   // 对于B样条，需要添加额外的控制点或使用近似方法
+//   // 这里使用简化的方法：将B样条转换为分段贝塞尔曲线
+//   path.moveTo(data[0].x, data[0].y);
+
+//   // 使用Catmull-Rom作为B样条的近似（当tension=0时，Catmull-Rom接近B样条）
+//   const points = addBoundaryPoints(data);
+//   for (let i = 1; i < data.length; i++) {
+//     const p0 = points[i - 1];
+//     const p1 = points[i];
+//     const p2 = points[i + 1];
+//     const p3 = points[i + 2];
+
+//     const t = 1 / 6;
+//     const cp1x = p1.x + t * (p2.x - p0.x);
+//     const cp1y = p1.y + t * (p2.y - p0.y);
+//     const cp2x = p2.x - t * (p3.x - p1.x);
+//     const cp2y = p2.y - t * (p3.y - p1.y);
+
+//     path.cubicTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
+//   }
+// }
+
+// 5. 分段线性插值（简单折线）
+/**
+ * 分段线性插值
+ * @param path {CustomPath} 路径对象
+ * @param data {Data[]} 数据点数组
+ */
+function drawLinear(path: CustomPath, data: Data[]): void {
+  if (data.length === 0) return;
+  path.moveTo(data[0].x, data[0].y);
+  for (let i = 1; i < data.length; i++) {
+    path.lineTo(data[i].x, data[i].y);
+  }
+}
+
+export class ChartHelper {
+  private width: number;
+  private height: number;
+  private xAxis: number[];
+  private yAxis: number[];
+  private originPosition: Data;
+  private canvasTexture: CanvasTexture;
+
+  /**
+   *
+   * @param w {number} 画布宽度
+   * @param h {number} 画布高度
+   * @param xAxis {number[]} x轴范围
+   * @param yAxis {number[]} y轴范围
+   * @throws {Error} 如果画布宽度或高度小于等于 0，或者 x 或 y 轴范围不是长度为 2 的数组，或者 x 或 y 轴范围不是升序
+   */
+  constructor(w: number, h: number, xAxis: number[], yAxis: number[]) {
+    if (w <= 0 || h <= 0) {
+      throw new Error("Width and height must be greater than 0");
+    }
+    if (xAxis.length !== 2 || yAxis.length !== 2) {
+      throw new Error("X and y axis must be an array of 2 numbers");
+    }
+    if (xAxis[0] >= xAxis[1] || yAxis[0] >= yAxis[1]) {
+      throw new Error("X and y axis must be in ascending order");
+    }
+
+    this.width = w;
+    this.height = h;
+    this.xAxis = xAxis;
+    this.yAxis = yAxis;
+    this.originPosition = {
+      x: ((0 - this.xAxis[0]) / (this.xAxis[1] - this.xAxis[0])) * this.width,
+      y:
+        this.height -
+        ((0 - this.yAxis[0]) / (this.yAxis[1] - this.yAxis[0])) * this.height,
+    };
+    this.canvasTexture = JsvTextureStoreApi.canvasTexture(
+      this.width,
+      this.height
+    );
+  }
+
+  /**
+   * @description 获取画布对象
+   * @returns {CanvasTexture} 画布对象
+   */
+  getCanvas() {
+    return this.canvasTexture;
+  }
+
+  /**
+   * @description 获取原始数据点对应的坐标
+   * @returns {Data} 原始数据点对应的坐标
+   */
+  getOriginPosition() {
+    return this.originPosition;
+  }
+
+  /**
+   * @description 根据数据获取绘制所需的position
+   * @param data {Data[]} 数据点数组，每个点包含 x 和 y 坐标
+   * @returns {Data[]} 数据点数组，每个点包含 x 和 y 坐标
+   */
+  data2Pos(data: Data[]): Data[] {
+    const xAxisRange = this.xAxis[1] - this.xAxis[0];
+    const yAxisRange = this.yAxis[1] - this.yAxis[0];
+    return data.map((d) => ({
+      x: ((d.x - this.xAxis[0]) / xAxisRange) * this.width,
+      y: this.height - ((d.y - this.yAxis[0]) / yAxisRange) * this.height,
+    }));
+  }
+
+  /**
+   * linePath参数说明
+   * @param data {Data[]} 数据点数组，每个点包含 x 和 y 坐标
+   * @param isBroken {boolean} 是否为折线
+   * @param close {number}
+   *          0: 不闭合,绘制线段用,
+   *          1: 闭合到x轴(自动绘制左右两端垂直于x轴的线段), 需要填充颜色时用
+   *          2: 闭合到y轴(自动绘制上下两端垂直于y轴的线段), 需要填充颜色时用
+   * @returns {CustomPath, Data[]} 路径对象和数据点数组，每个点包含 x 和 y 坐标
+   */
+  linePath(
+    data: Data[],
+    isBroken: boolean = false,
+    close: number = 0
+  ): { path: CustomPath; position: Data[] } | undefined {
+    const path = this.canvasTexture.customPath();
+    if (path) {
+      const posList = this.data2Pos(data);
+
+      if (isBroken) {
+        drawLinear(path, posList);
+      } else {
+        drawMonotonicCubic(path, posList);
+      }
+
+      if (close == 1) {
+        //关闭到x轴
+        path.lineTo(posList[posList.length - 1].x, this.originPosition.y);
+        path.lineTo(posList[0].x, this.originPosition.y);
+        path.close();
+      } else if (close == 2) {
+        //关闭到y轴
+        path.lineTo(this.originPosition.x, posList[posList.length - 1].y);
+        path.lineTo(this.originPosition.x, posList[0].y);
+        path.close();
+      }
+      return { path, position: posList };
+    }
+    return undefined;
+  }
+}

package/utils/JsViewVueTools/JsvTextureStore/CanvasTexture/Path.ts

@@ -88,6 +88,21 @@ class DrawingPath {
         this.finishedDraw = true;
     }
 
+    public fillWithLinearGradient(fromX: Number, fromY: Number, toX: Number, toY: Number, colorList: Array<String>, positionList: Array<Number>) {
+        this.drawCommandsRefs.push({
+            "cmd": Constants.CMD_PREPARE_PAINT,
+            "type": "fill_linear_gradient",
+            "x0": fromX,
+            "y0": fromY,
+            "x1": toX,
+            "y1": toY,
+            "clrs": colorList,
+            "stops": positionList
+        });
+        this.onFinishDraw(); // 调用继承类的完成处理执行绘制
+        this.finishedDraw = true;
+    }
+
     protected onFinishDraw(): void {
         // should override be extends class
     }
@@ -184,6 +199,29 @@ export class CustomPath extends DrawingPath {
         });
     }
 
+    /**
+     * cubicTo
+     * 绘制三次贝塞尔曲线
+     * 
+     * @param {Number} x0 控制点1的x坐标
+     * @param {Number} y0 控制点1的y坐标
+     * @param {Number} x1 控制点2的x坐标
+     * @param {Number} y1 控制点2的y坐标
+     * @param {Number} x2 目标点的x坐标
+     * @param {Number} y2 目标点的y坐标
+     */
+    cubicTo(x0: Number, y0: Number, x1: Number, y1: Number, x2: Number, y2: Number) {
+        this.pathCommands?.push({
+            "cmd": Constants.PATH_CUBIC_TO,
+            "x0": x0,
+            "y0": y0,
+            "x1": x1,
+            "y1": y1,
+            "x2": x2,
+            "y2": y2
+        });
+    }
+
     /**
      * arcTo
      * 绘制以(left, top, right, bottom)围城的矩形为横轴比的椭圆圆弧

package/utils/JsViewVueTools/JsvTextureStore/CapturedTexture/CapturedTexture.ts

@@ -13,6 +13,7 @@ export class CapturedTexture extends TextureBase {
   private _Callback: CapturedCallback | null;
   private _CaptureDiv: any;
   private _Canceled: boolean = false;
+  private _Done: boolean = false;
   private _PostProcessParams: any = null;
   constructor(
     captureDiv: any,
@@ -21,6 +22,10 @@ export class CapturedTexture extends TextureBase {
     postProcessParams: any = null) {
     super(null);
 
+    if (!captureDiv || !callback) {
+      throw new Error("CapturedTexture: captureDiv and callback are required");
+    }
+
     // 激活引擎的功能支持
     JsvUseFeature('JsvTextureStoreApi', FeatureNames.Capture2Texture);
 
@@ -33,13 +38,21 @@ export class CapturedTexture extends TextureBase {
   // 清理对Callback和div的引用，防止泄露
   cancel() {
     if (!this._Canceled) {
-      this._Callback?.("", this.autoRecycle, 0, 0, true);
+      if (!this._Done) {
+        // 补调用未完成的回调
+        this._Callback?.("", this.autoRecycle, 0, 0, true);
+      }
       this._Callback = null;
       this._CaptureDiv = null;
       this._Canceled = true;
     }
   }
 
+  override recycle() {
+    this.cancel();
+    super.recycle();
+  }
+
   override commit(): String {
     this.textureRef = (ForgeHandles.TextureManager as any).GetCapturedTexture();
     this._CaptureDiv.jsvGetProxyView(true).Capture2Texture(this.textureRef,
@@ -53,6 +66,8 @@ export class CapturedTexture extends TextureBase {
         //由于自动回收是三帧后回收, 所以需要先添加到store
         this.addToStore();
 
+        this._Done = true;
+
         // 回调
         this._Callback?.(
           this.getStoreName(),

package/utils/JsViewVueTools/JsvTextureStore/JsvTextureStore.ts

@@ -1,4 +1,4 @@
-/*! 
+/*!
  * @file JsvTextureStoreApi
  *
  *      canvasTexture:
@@ -6,9 +6,22 @@
  *          a. commit() 接口调用之前可以任意绘制, commit之后就无法更改, commit之后才能使用, commit后绘制内容会被全局保存
  *          b. commit()的返回是其使用名称, 在div.backgroundImage和img.src中可使用, 格式: jsvtexturestore://commit返回名
  *          c.【非常重要】CanvasTexture是全局管理, commit()之后 不会自动释放, 需要手动调用 deleteTexture, 其参数是commit的返回值
+ * 
  *      deleteTexture:
  *          删除全局保存的texture(图片纹理)
- *      
+ * 
+ *      capture2Texture:
+ *          对给定div做截图并生成一个Texture, 在回调函数中返回此Texture的访问名,
+ *          此访问名可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名" 来使用
+ * 
+ *      getDominantColor:
+ *          获取图片的 dominant color
+ *          特殊说明: 此方法产生的内部CanvasTexture资源会自动回收,
+ *          虽然建议使用者在unmount时进行cancel, 但不是强制
+ * 
+ *      getChartHelper:
+ *          获取ChartHelper句柄，用于绘制二维统计图的多点折线(解决数据点之间的平滑衔接问题)
+ *
  *  CanvasTexture的接口(见 ./CanvasTexture/CanvasTexture.ts 的函数头):
  *      Path类型: 例如 rectPath, circlePath (见 ./CanvasTexture/Path.ts 的函数头)
  *          通过 canvasTexture.xxxPath() 获得一个path操作对象，然后通过其接口进行游标运动形成绘制路径
@@ -17,39 +30,46 @@
  */
 
 import CanvasTexture from "./CanvasTexture/CanvasTexture";
-import { CapturedTexture, CapturedCallback } from "./CapturedTexture/CapturedTexture";
+import {
+  CapturedTexture,
+  CapturedCallback,
+} from "./CapturedTexture/CapturedTexture";
 import sStore from "./Store";
-import { getDominantColorByForgeTexture } from "./DominantColor/GetDominantColor";
+import { ChartHelper } from "./CanvasTexture/DrawHelper";
+import { BitPalette } from "./BitPalette/BitPalette";
 
 let sJsvTextureConst = {
-    LEFT: 1,
-    TOP: 2,
-    RIGHT: 3,
-    BOTTOM: 4,
-}
+  LEFT: 1,
+  TOP: 2,
+  RIGHT: 3,
+  BOTTOM: 4,
+};
 
 let sTextureStoreApi = {
-    /**
-     * canvasTexture
-     * 创建CanvasTexture句柄，执行commit()后, 获取访问名(访问名规则: 输入参数 baseName + 分配id)
-     * 可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名" 来使用
-     * 
-     * @param {int} width  此Canvas画布的宽度
-     * @param {int} height  此Canvas画布的高度
-     * @param {String|null} baseName 可选, 访问名的前缀信息
-     * @return {CanvasTexture}
-     */
-    canvasTexture: (width: Number, height: Number, baseName: String | null = null): CanvasTexture => {
-        return new CanvasTexture(width, height, baseName);
-    },
+  /**
+   * canvasTexture
+   * 创建CanvasTexture句柄，执行commit()后, 获取访问名(访问名规则: 输入参数 baseName + 分配id)
+   * 可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名" 来使用
+   *
+   * @param {int} width  此Canvas画布的宽度
+   * @param {int} height  此Canvas画布的高度
+   * @param {String|null} baseName 可选, 访问名的前缀信息
+   * @return {CanvasTexture}
+   */
+  canvasTexture: (
+    width: Number,
+    height: Number,
+    baseName: String | null = null
+  ): CanvasTexture => {
+    return new CanvasTexture(width, height, baseName);
+  },
 
-    /**
+  /**
      * capture2Texture
      * 对给定div做截图并生成一个Texture, 在回调函数中返回此Texture的访问名,
      * 此访问名可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名" 来使用
-     * 注意: PC模拟环境下，无法截取运动物体的中间状态，但盒子端可以正常截取
      * 
-     * 关于 autoRecycle:
+     * 关于 autoRecycle: 此api生成的CanvasTexture根据这个标识有自动释放功能
      *   true(默认值): 收到callback的访问名后，请立即设置给使用的地方，若此宏任务结束(其触发的所有微任务全完成后)时，
      *                若资源未被div和img使用，则会自动回收，回收后此访问名对应内容为黑屏
      *   false: 截图资源永久存在，可被反复使用，直到 JsvTextureStoreApi.deleteTexture(访问名) 进行清理
@@ -62,59 +82,124 @@ let sTextureStoreApi = {
      *                                      height: number) => void     // 截取div的高
      * @param {boolean} autoRecycle 可选, 是否当无div/img引用时会自动释放
      *                              true默认值: 此场景在回调时要立刻赋值给响应式变量控制template的节点立刻使用(并且不是v-if=false的节点),
-                                    否则会自动释放掉, 此时, texture当使用它的template节点从dom树中去掉的时候(v-if=false也算)会自动释放，
-                                    不需要主动调用deleteTexture释放.
+                                      否则会自动释放掉, 此时, texture当使用它的template节点从dom树中去掉的时候(v-if=false也算)会自动释放，
+                                      不需要主动调用deleteTexture释放.
                                     false: 此场景在callback收到资源名后, 需要使用完毕后调用 deleteTexture 手动释放
-                                    在手动释放之前，可以赋给其他div/img来复用 
+                                      在手动释放之前，可以赋给其他div/img来复用 
      * @param {any} postProcessParams 可选, 截图处理的参数
      * @return {CapturedTexture} 用于cancel的句柄，当cancel时，会清理对div和Callback的引用
      */
-    capture2Texture: (
-        captureDiv: any,
-        callback: CapturedCallback,
-        autoRecycle: boolean = true,
-        postProcessParams: any = null): CapturedTexture => {
+  capture2Texture: (
+    captureDiv: any,
+    callback: CapturedCallback,
+    autoRecycle: boolean = true,
+    postProcessParams: any = null
+  ): CapturedTexture => {
+    let texture = new CapturedTexture(
+      captureDiv,
+      callback,
+      autoRecycle,
+      postProcessParams
+    );
+    texture.commit();
 
-        let texture = new CapturedTexture(captureDiv, callback, autoRecycle, postProcessParams);
-        texture.commit();
+    return texture;
+  },
 
-        return texture;
-    },
+  /**
+   * deleteTexture
+   * 删除访问名对应的texture资源
+   *
+   * @param {String} accessName 此Texture的访问名，访问名来自: CanvasTexture.commit 或 capture2Texture 的回调
+   */
+  deleteTexture: (accessName: String) => {
+    let textureRef = sStore.getFromStore(accessName);
+    if (textureRef) {
+      // 释放native端的texture实体
+      textureRef.recycle();
+    }
+  },
 
-    /**
-     * deleteTexture
-     * 删除访问名对应的texture资源
-     * 
-     * @param {String} accessName 此Texture的访问名，访问名来自: CanvasTexture.commit 或 capture2Texture 的回调
-     */
-    deleteTexture: (accessName: String) => {
-        let textureRef = sStore.getFromStore(accessName);
-        if (textureRef) {
-            // 释放native端的texture实体
-            textureRef.recycle();
-        }
-    },
+  /**
+   * getDominantColor
+   * 获取图片的 dominant color
+   * 特殊说明: 此方法产生的内部CanvasTexture资源会自动回收,
+   * 虽然建议使用者在unmount时进行cancel, 但不是强制
+   *
+   * @param src 图片的src
+   * @param callback 回调函数, 参数: info
+   * @return 用于cancel的句柄的函数, 
+   *        例如 let c = JsvTextureStoreApi.getDominantColor(src, callback); c(); 为资源清理
+   *        若callback前清理, 则callback不会被调用
+   */
+  getDominantColor: (src: string, callback: (info: any) => void) => {
+    let bitPalette = sTextureStoreApi.getBitPalette(src, async ()=>{
+      let result: any = await bitPalette.Ctrl!.getDomainColorSync();
+      bitPalette.recycle();
+      let cbk_ret = null;
+      if (result) {
+        cbk_ret = {dominantColors: JSON.parse(result)};
+      }
+      callback(cbk_ret);
+    });
+
+    // 返回cancel的句柄
+    return ()=>{
+      bitPalette.recycle();
+    };
+  },
 
-    /**
-     * getDominantColor
-     * 获取图片的 dominant color
-     * 
-     * @param src 图片的src
-     * @param callback 回调函数, 参数: info
-     * @return 用于cancel的句柄，当cancel时，会清理对div和Callback的引用
-     */
-    getDominantColor: (src: string, callback: (info: any) => void) => {
-        return getDominantColorByForgeTexture(src, (i: any) => {
-            callback(i);
-        });
-    }
-}
+
+  /**
+   * getBitPalette
+   * 获取 BitPalette 实例
+   *
+   * 用法示例:
+   * 
+   *   let bp = JsvTextureStoreApi.getBitPalette(src);
+   *   await bp.Ready;
+   *   let result = await bp.Ctrl?.doCommand(cmd_id, {...});
+   * 
+   * 说明:
+   * - 该方法会立即返回 BitPalette 实例，但 BitPalette 数据初始化可能为异步过程。
+   * - 若在await Ready之前直接操作 bitPalette，其状态未必已完成加载。
+   * 
+   * 特别注意: 不再使用时, 请务必调用 bitPalette.recycle() 释放资源, recycle接口不需要等待Ready完成
+   *
+   * @param {string} src 图片的 src 链接, 可以是 "jsvtexturestore://访问名" 或者 图片的url
+   * @return {BitPalette} BitPalette 实例
+   */
+  getBitPalette: (src: string, callback: () => void): BitPalette => {
+    let bitPalette = new BitPalette(src, callback);
+    return bitPalette;
+  },
+
+  /**
+   * getChartHelper
+   * 获取ChartHelper句柄，用于绘制二维统计图
+   * 
+   * @param {number} width 画布宽度
+   * @param {number} height 画布高度
+   * @param {number[]} xAxis x轴范围(可以为负数到正数的范围)
+   * @param {number[]} yAxis y轴范围(可以为负数到正数的范围)
+   * @throws {Error} 如果画布宽度或高度小于等于 0，或者 x 或 y 轴范围不是长度为 2 的数组，或者 x 或 y 轴范围不是升序
+   * @return {ChartHelper}  ChartHelper接口说明见 ./CanvasTexture/DrawHelper.ts 的 ChartHelper 类
+   */
+  getChartHelper(
+    width: number,
+    height: number,
+    xAxis: number[],
+    yAxis: number[]
+  ): ChartHelper {
+    return new ChartHelper(width, height, xAxis, yAxis);
+  },
+};
 
 export enum CaptureProcessType {
-    Blur = 1,
-  }
+  Blur = 1,
+}
 
 export {
-    sTextureStoreApi as JsvTextureStoreApi,
-    sJsvTextureConst as JsvTextureConst,
-}
+  sTextureStoreApi as JsvTextureStoreApi,
+  sJsvTextureConst as JsvTextureConst,
+};

package/utils/JsViewVueTools/JsvTextureStore/Store.ts

@@ -25,7 +25,7 @@ class JsvTextureStore {
       this.textureMap.delete(storeName);
       return textureBaseRef;
     } else {
-      console.error(`Error: name=${storeName} not in map`);
+      console.warn(`Warn: name=${storeName} not in map, maybe auto recycled`);
       return undefined;
     }
   }