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

package/utils/JsViewVueTools/JsvTextureStore/BitPalette/BitPalette.ts

@@ -0,0 +1,180 @@
+import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
+
+
+const enum BitPaletteCommand {
+    Cmd_GetDomainColorSync = 1003,  // 同步，return StringPtr
+    Cmd_SubMapBlob,                 // 异步，回调 jse::Function
+    Cmd_SubMapTextureSync,          // 同步，return StringPtr
+    Cmd_ToStoreTmpBufferSync          // 同步，return buffer id
+}
+
+class BitPaletteCtrl {
+    private _texture: any = null;
+    private _recycled: boolean = false;
+
+    constructor(texture: any) {
+        this._texture = texture;
+    }
+
+    /**
+     * 获取图片的主色调（dominant color），返回一个 Promise，可与 async/await 配合使用。<br>
+     * 使用方式示例：
+     * 
+     * 异步/Promise方式：
+     *   let colorStrJson = await bitPalette.Ctrl.getDomainColorSync();
+     *   if (colorStrJson) {
+     *     let colorsList = JSON.parse(colorStrJson);
+     *     // colorsList 是主色调数组
+     *   }
+     * 
+     */
+    getDomainColorSync(): Promise<any> {
+        let _this = this;
+        return new Promise<any>(async (resolve, reject) => {
+            // 用await关联, 让doCommand的reject时自动触发本Promise的reject
+            await _this.doCommand(BitPaletteCommand.Cmd_GetDomainColorSync, {}, (result: any) => {
+                if (_this._recycled) {
+                    reject();
+                    return;
+                }
+                resolve(result);
+            });
+        });
+    }
+
+    toBlob() : Promise<Blob | null> {
+        let bufferId = ForgeHandles.sRenderBridge.GenStoreBufferId();
+        // 返回一个Promise，同时支持callback
+        let _this = this;
+        return new Promise<Blob | null>(async (resolve, reject) => {
+            // 用await关联, 让doCommand的reject时自动触发本Promise的reject
+            await _this.doCommand(BitPaletteCommand.Cmd_ToStoreTmpBufferSync, {bufId:bufferId}, async () => {
+                if (_this._recycled) {
+                    reject();
+                    return;
+                }
+                let newBlob: Blob = await (Blob as any).jsvCreateFromForge(bufferId);
+                resolve(newBlob);
+            });
+        });
+    }
+
+    // 不是对外接口
+    private doCommand(command: BitPaletteCommand, params: object, callback: ((result: any) => void) | undefined) {
+        // 用asyncPromise来支持 await 语法, 也可以直接用callback
+        let asyncPromise = new Promise((resolve, reject) => {
+            this._texture.doCommand(command, params? JSON.stringify(params) : "{}", (result: any) => {
+                if (this._recycled) {
+                    reject();
+                    return;
+                }
+
+                callback?.(result); // 先回调callback, 再resolve
+                resolve(result);
+            });
+        });
+        return asyncPromise;
+    }
+
+    markRecycled() {
+        this._recycled = true;
+    }
+}
+
+/*
+    ------------------------------------------------------------
+    BitPalette使用最佳实践, Ctrl属性在ready后才能使用
+
+    1. 使用callback方案
+    let hdl = new BitPalette(src, () => {
+        console.log("ready by callback");
+        hdl.Ctrl.doCommand(cmd_id, {...}, (result) => {
+            console.log("result:", result);
+        });
+    });
+
+    2. 使用Promise方案
+    let hdl = new BitPalette(src);
+    try {
+        await hdl.Ready;
+    } catch (error) {
+        console.error("canceled");
+    }
+    let result = await hdl.Ctrl.doCommand(cmd_id, {...});
+
+    3. 使用完毕要释放资源时
+    hdl.recycle();  // 此处理可以在callback之前或者之后都可以, 在callback之前相当于cancel
+
+    ------------------------------------------------------------
+    BitPalette的命令行处理:
+    1. 使用callback方案
+    hdl.Ctrl.doCommand(cmd_id, {...}, (result) => {
+        console.log("result:", result);
+    });
+
+    2. 使用Promise方案(同步或者异步都如此调用)
+    let result = await hdl.Ctrl.doCommand(cmd_id, {...});
+ */
+
+export class BitPalette {
+    private _recycled: boolean = false;
+    private _readyReject: any = null;
+    private _texture: any = null;
+
+    public Ctrl: BitPaletteCtrl | null = null;
+    public Ready: Promise<BitPalette> | null = null;
+
+    constructor(src: string, callback?: () => void) {
+        const setting = { src };
+        this._texture = (ForgeHandles.TextureManager as any).GetImageProcessTexture(
+            JSON.stringify(setting)
+        );
+        // 关掉自动卸载, 靠主动的 RequestToUnload 来卸载
+        this._texture.DisableAutoRecycle();
+
+        // 声明 ready 以支持 await 语法
+        let _this = this;
+        this.Ready = new Promise((resolve, reject) => {
+            this._readyReject = reject;
+            this._texture.RegisterLoadImageCallback(src, () => {
+                if (this._recycled) {
+                    return;
+                }
+
+                // 完成ready后取消readyReject处理
+                this._readyReject = null;
+
+                // 构建 controller 以支持后续的 doCommand 调用
+                this.Ctrl = new BitPaletteCtrl(this._texture);
+
+                callback?.();
+                resolve(_this);
+            });
+        });
+    }
+
+    recycle() {
+        if (this._recycled) {
+            return;
+        }
+        this._recycled = true;
+
+        // 进行promise的reject处理, 保证ready的reject不被遗漏
+        this._readyReject?.();
+        this._readyReject = null;
+        
+        // 释放texture资源
+        this._texture?.RequestToUnload();
+        this._texture = null;
+
+        // 让Ctrl处于recycle状态, 规避异步回调
+        this.Ctrl?.markRecycled();
+    }
+
+    static CommandType = {
+        GetDomainColorSync: BitPaletteCommand.Cmd_GetDomainColorSync,
+        SubMapBlob: BitPaletteCommand.Cmd_SubMapBlob,
+        SubMapTextureSync: BitPaletteCommand.Cmd_SubMapTextureSync,
+        ToStoreTmpBuffer: BitPaletteCommand.Cmd_ToStoreTmpBufferSync,
+    }
+}

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

@@ -23,3 +23,4 @@ export const PATH_CMD_MOVE_TO = 30;
 export const PATH_CMD_LINE_TO = 31;
 export const PATH_CMD_ARC_TO = 32;
 export const PATH_CMD_CLOSE = 33;
+export const PATH_CUBIC_TO = 34;

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

@@ -6,37 +6,53 @@ export type CapturedCallback = (
   textureAccessName: string,
   autoRecycleSet: boolean,
   width: number,
-  height: number) => void;
+  height: number,
+  isCannceled: boolean) => void;
 
 export class CapturedTexture extends TextureBase {
-  private _AutoRecycle: boolean;
   private _Callback: CapturedCallback | null;
   private _CaptureDiv: any;
   private _Canceled: boolean = false;
-
+  private _Done: boolean = false;
+  private _PostProcessParams: any = null;
   constructor(
     captureDiv: any,
     callback: CapturedCallback,
-    autoRecycle: boolean) {
+    autoRecycle: boolean,
+    postProcessParams: any = null) {
     super(null);
 
+    if (!captureDiv || !callback) {
+      throw new Error("CapturedTexture: captureDiv and callback are required");
+    }
+
     // 激活引擎的功能支持
     JsvUseFeature('JsvTextureStoreApi', FeatureNames.Capture2Texture);
 
     this._CaptureDiv = captureDiv;
     this._Callback = callback;
-    this._AutoRecycle = autoRecycle;
+    this.autoRecycle = autoRecycle;
+    this._PostProcessParams = postProcessParams;
   }
 
   // 清理对Callback和div的引用，防止泄露
   cancel() {
     if (!this._Canceled) {
+      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,
@@ -47,18 +63,20 @@ export class CapturedTexture extends TextureBase {
           return;
         }
 
-        // 处理自动回收
-        if (!this._AutoRecycle) {
-          this.addToStore(); // 用TextureStore来跟进引用状态
-        }
+        //由于自动回收是三帧后回收, 所以需要先添加到store
+        this.addToStore();
+
+        this._Done = true;
 
         // 回调
         this._Callback?.(
           this.getStoreName(),
-          this._AutoRecycle,
+          this.autoRecycle,
           resultObj.width as number,
-          resultObj.height as number);
-      }
+          resultObj.height as number,
+          false);
+      },
+      this._PostProcessParams
     );
     return '';
   }