xl-public-utils 1.0.1

package/index.d.ts

@@ -0,0 +1,130 @@
+import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
+
+/**
+ * @typedef {Object} QrCodeOptions
+ * @property {string} [bcid='qrcode'] - 二维码类型，具体支持请查看文档
+ * @property {number} [width=1056] - 最终图片宽度
+ * @property {number} [height=342] - 最终图片高度
+ * @property {number} [qrcodeW=300] - 二维码宽度
+ * @property {number} [qrcodeH=300] - 二维码高度
+ * @property {boolean} [addText=true] - 是否在右侧添加文字
+ * @property {number} [top=10] - 顶部距离
+ * @property {number} [left=10] - 左侧距离
+ * @property {number} [lineHeight=1] - 文字行高，换行后下一行文字的y位置计算为fontSize * lineHeight
+ * @property {number} [fontSize=60] - 文字大小
+ * @property {string} [fontFamily='黑体'] - 字体类型
+ * @property {string} [bgColor='#fff'] - 背景颜色
+ * @property {number} [textLeftMargin=20] - 文字距离二维码间隔
+ * @property {boolean} [fontWeight=700] - 字体加粗
+ * @property {string} [textColor='#000'] - 字体颜色
+ * @property {string} [textContent] - 右侧文字内容
+ */
+declare module "public-utils" {
+  export interface QrCodeOptions {
+    /** 二维码类型，具体支持请查看文档 */
+    bcid?: string; // 默认值 'qrcode'
+
+    /** 最终图片宽度 */
+    width?: number; // 默认值 1056
+
+    /** 最终图片高度 */
+    height?: number; // 默认值 342
+
+    /** 二维码宽度 */
+    qrcodeW?: number; // 默认值 300
+
+    /** 二维码高度 */
+    qrcodeH?: number; // 默认值 300
+
+    /** 是否在右侧添加文字 */
+    addText?: boolean; // 默认值 true
+
+    /** 顶部距离 */
+    top?: number; // 默认值 10
+
+    /** 左侧距离 */
+    left?: number; // 默认值 10
+
+    /** 文字行高，换行后下一行文字的 y 位置计算为 fontSize * lineHeight */
+    lineHeight?: number; // 默认值 1
+
+    /** 文字大小 */
+    fontSize?: number; // 默认值 60
+
+    /** 字体类型 */
+    fontFamily?: string; // 默认值 '黑体'
+
+    /** 背景颜色 */
+    bgColor?: string; // 默认值 '#fff'
+
+    /** 文字距离二维码间隔 */
+    textLeftMargin?: number; // 默认值 20
+
+    /** 字体加粗 */
+    fontWeight?: boolean; // 默认值 700
+
+    /** 字体颜色 */
+    textColor?: string; // 默认值 '#000'
+
+    /** 右侧文字内容 */
+    textContent?: string;
+  }
+
+  export module vtk {
+    /**
+     * 计算屏幕坐标到三维坐标
+     * @param {vtkRenderer} renderer vtkRenderer
+     * @param {number} x display x position
+     * @param {number} y display y position
+     * @param {number} z display z position
+     * @returns {[number, number, number]} 三维坐标
+     */
+    export function computeDisplayToWorld(
+      renderer: vtkRenderer,
+      x: number,
+      y: number,
+      z: number
+    ): [number, number, number];
+
+    /**
+     * 计算三维坐标到屏幕坐标
+     * @param {vtkRenderer} renderer vtkRenderer
+     * @param {number} x 三维坐标 x值
+     * @param {number} y 三维坐标 y值
+     * @param {number} z 三维坐标 z值
+     * @returns {[number, number, number]} 屏幕坐标
+     */
+    export function computeWorldToDisplay(
+      renderer: vtkRenderer,
+      x: number,
+      y: number,
+      z: number
+    ): [number, number, number];
+  }
+
+  export module window {
+    /**
+     * 获取当前屏幕分辨率(百分制,默认100)
+     * @returns {number} 当前屏幕分辨率
+     */
+    export function getRatio(): number;
+
+    /**
+     * 获取当前屏幕分辨率(百分制,默认100)
+     * @returns {number} 当前屏幕分辨率
+     */
+    export function detectZoom(): number;
+  }
+  export module qrcode {
+    /**
+     * 生成一个二维码图片，可以在二维码右侧添加二维码文字内容信息
+     * @param {string} content 二维码内容
+     * @param {QrCodeOptions} options 图片参数
+     * @returns {string} 返回图片的base64
+     */
+    export function generateQRCodeWithText(
+      content: string,
+      options?: QrCodeOptions
+    ): string | false;
+  }
+}

package/index.js

@@ -0,0 +1,4 @@
+import * as vtk from './src/vtk.js';
+import * as window from './src/window.js'
+import * as qrcode from './src/qrcode.js'
+export { vtk, window, qrcode };

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "xl-public-utils",
+  "version": "1.0.1",
+  "description": "一些通用的方法",
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "@kitware/vtk.js": "^25.7.2",
+    "bwip-js": "4.3.1"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./qrcode": "./src/qrcode.js",
+    "./vtk": "./src/vtk.js",
+    "./window": "./src/window.js"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "一些通用方法"
+  ],
+  "author": "xl",
+  "license": "ISC"
+}

package/src/qrcode.js

@@ -0,0 +1,99 @@
+import bwipjs from 'bwip-js';
+
+/**
+ * @typedef {Object} QrCodeOptions
+ * @property {string} [bcid='qrcode'] - 二维码类型，具体支持请查看文档
+ * @property {number} [width=1056] - 最终图片宽度
+ * @property {number} [height=342] - 最终图片高度
+ * @property {number} [qrcodeW=300] - 二维码宽度
+ * @property {number} [qrcodeH=300] - 二维码高度
+ * @property {boolean} [addText=true] - 是否在右侧添加文字
+ * @property {number} [top=10] - 顶部距离
+ * @property {number} [left=10] - 左侧距离
+ * @property {number} [lineHeight=1] - 文字行高，换行后下一行文字的y位置计算为fontSize * lineHeight
+ * @property {number} [fontSize=60] - 文字大小
+ * @property {string} [fontFamily='黑体'] - 字体类型
+ * @property {string} [bgColor='#fff'] - 背景颜色
+ * @property {number} [textLeftMargin=20] - 文字距离二维码间隔
+ * @property {boolean} [fontWeight=700] - 字体加粗
+ * @property {string} [textColor='#000'] - 字体颜色
+ * @property {string} [textContent] - 右侧文字内容
+ */
+
+/**
+ * 生成一个二维码图片，可以在二维码右侧添加二维码文字内容信息
+ * @param {string} content 二维码内容
+ * @param {QrCodeOptions} options 图片参数
+ * @returns {string | false} 返回图片的base64
+ */
+export function generateQRCodeWithText(content, options = {}) {
+  const {
+    width = 1056,
+    height = 342,
+    bcid = 'qrcode',
+    qrcodeW = 300,
+    qrcodeH = 300,
+    addText = true,
+    top = 10,
+    left = 10,
+    lineHeight = 1,
+    fontSize = 60,
+    fontFamily = '黑体',
+    bgColor = '#fff',
+    textLeftMargin = 20,
+    fontWeight = 700,
+    textColor = '#000',
+    textContent
+  } = options
+  // Create the canvas and set its size
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+
+  // Clear the canvas before drawing
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, width, height);
+  // Create a temporary canvas to draw the QR code
+  const tempCanvas = document.createElement('canvas');
+  tempCanvas.width = qrcodeW;
+  tempCanvas.height = qrcodeH;
+  try {
+    bwipjs.toCanvas(tempCanvas, {
+      bcid: bcid,        // Barcode type
+      text: content,         // QR code content
+      scale: 1,
+      width: qrcodeW,            // QR code width
+      height: qrcodeH,           // QR code height
+      includetext: false,    // Do not include text below QR code
+    });
+    // Draw the QR code on the left (300x300), centered vertically at (0, 21)
+    ctx.drawImage(tempCanvas, left, top, qrcodeW, qrcodeH);
+    if (addText) {
+      const _lineHeight = lineHeight * fontSize;
+      ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+      ctx.fillStyle = textColor;
+      let arrText = textContent ? textContent.split('') : content.split('');
+      let line = '';
+      let x = qrcodeW + textLeftMargin;
+      let y = fontSize;
+      for (let n = 0; n < arrText.length; n++) {
+        let testLine = line + arrText[n];
+        let metrics = ctx.measureText(testLine);
+        let testWidth = metrics.width;
+        if (testWidth > (width - x) && n > 0) {
+          ctx.fillText(line, x, y);
+          line = arrText[n];
+          y += _lineHeight;
+        } else {
+          line = testLine;
+        }
+      }
+      ctx.fillText(line, x, y);
+    }
+    return canvas.toDataURL('image/png')
+  } catch (e) {
+    return false
+  }
+}

package/src/vtk.js

@@ -0,0 +1,28 @@
+import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
+
+
+/**
+ * 计算屏幕坐标到三维坐标
+ * @param {vtkRenderer} renderer vtkRenderer
+ * @param {number} x display x position
+ * @param {number} y display y position
+ * @param {number} z display z position
+ * @returns {[number, number, number]} 三维坐标
+ */
+export function computeDisplayToWorld(renderer, x, y, z) {
+  const view = renderer.getRenderWindow()?.getViews()[0];
+  return view.displayToWorld(x, y, z, renderer);
+}
+
+/**
+ * 计算三维坐标到屏幕坐标
+ * @param {vtkRenderer} renderer vtkRenderer
+ * @param {number} x 三维坐标 x值
+ * @param {number} y 三维坐标 y值
+ * @param {number} z 三维坐标 z值
+ * @returns {[number, number, number]} 屏幕坐标
+ */
+export function computeWorldToDisplay(renderer, x, y, z) {
+  const view = renderer.getRenderWindow().getViews()[0];
+  return view.worldToDisplay(x, y, z, renderer);
+}

package/src/window.js

@@ -0,0 +1,32 @@
+/**
+ * 获取当前屏幕分辨率(百分制,默认100)
+ * @returns {number} 当前屏幕分辨率
+ */
+
+export function getRatio() {
+  let ratio = 0;
+  const screen = window.screen;
+  const ua = navigator.userAgent.toLowerCase();
+  if (window.devicePixelRatio !== undefined) {
+      ratio = window.devicePixelRatio;
+  } else if (~ua.indexOf('msie')) {
+      if (screen.deviceXDPI && screen.logicalXDPI) {
+          ratio = screen.deviceXDPI / screen.logicalXDPI;
+      }
+  } else if (
+      window.outerWidth !== undefined &&
+      window.innerWidth !== undefined
+  ) {
+      ratio = window.outerWidth / window.innerWidth;
+  }
+  if (ratio) {
+      ratio = Math.round(ratio * 100);
+  }
+  return ratio;
+}
+
+/**
+ * Alias for {@link getRatio}
+ * @function
+ */
+export const detectZoom = getRatio;