jmgraph 3.2.17 → 3.2.18

package/example/pso.html

@@ -31,7 +31,7 @@
         width: window.innerWidth,
         height: window.innerHeight,
         autoRefresh: true,
-        mode: '2d'
+        mode: 'webgl'
     });    
 
     function createItems(count) {

package/package.json

@@ -1,9 +1,9 @@
 {
   "family": "jmgraph",
   "name": "jmgraph",
-  "version": "3.2.17",
+  "version": "3.2.18",
   "description": "一个简单的canvas画图库",
-  "homepage": "https://fefeding.github.io/jmgraph/",
+  "homepage": "https://surl.fit/tools/tools/jmgraph",
   "keywords": [
     "canvas",
     "html5",
@@ -20,7 +20,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jiamao/jmgraph.git"
+    "url": "git+https://github.com/fefeding/jmgraph.git"
   },
   "main": "./index.js",
   "spm": {
@@ -32,21 +32,24 @@
   "licenses": [
     {
       "type": "MIT",
-      "url": "https://github.com/jiamao/jmgraph/blob/master/LICENSE"
+      "url": "https://github.com/fefeding/jmgraph/blob/master/LICENSE"
     }
   ],
   "bugs": {
-    "url": "https://github.com/jiamao/jmgraph/issues"
+    "url": "https://github.com/fefeding/jmgraph/issues"
   },
   "directories": {
     "example": "example"
   },
   "scripts": {
-    "build": "cd build & npm i & gulp & cd ..",
+    "build": "cd build && npm i --legacy-peer-deps && npx gulp && cd ..",
     "push": "npm publish --registry=https://registry.npmjs.org",
     "dev": "node dev"
   },
   "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

package/src/lib/webgl/base.js

@@ -107,12 +107,82 @@ class WeblBase {
         this.style = {
             globalAlpha: 1
         };
+        this.stateStack = [];
+        this.transformMatrix = [1, 0, 0, 1, 0, 0]; // 2D 变换矩阵
     }
 
     get context() {
         if(this.graph) return this.graph.context;
     }
 
+    // 保存当前状态
+    save() {
+        this.stateStack.push({
+            transformMatrix: [...this.transformMatrix],
+            style: { ...this.style }
+        });
+    }
+
+    // 恢复上一个状态
+    restore() {
+        if (this.stateStack.length > 0) {
+            const state = this.stateStack.pop();
+            this.transformMatrix = state.transformMatrix;
+            this.style = state.style;
+        }
+    }
+
+    // 平移变换
+    translate(x, y) {
+        // 更新变换矩阵
+        this.transformMatrix[4] += x * this.transformMatrix[0] + y * this.transformMatrix[2];
+        this.transformMatrix[5] += x * this.transformMatrix[1] + y * this.transformMatrix[3];
+    }
+
+    // 缩放变换
+    scale(sx, sy) {
+        // 更新变换矩阵
+        this.transformMatrix[0] *= sx;
+        this.transformMatrix[1] *= sx;
+        this.transformMatrix[2] *= sy;
+        this.transformMatrix[3] *= sy;
+    }
+
+    // 旋转变换
+    rotate(angle) {
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const [a, b, c, d, tx, ty] = this.transformMatrix;
+        
+        // 更新变换矩阵
+        this.transformMatrix[0] = a * cos - b * sin;
+        this.transformMatrix[1] = a * sin + b * cos;
+        this.transformMatrix[2] = c * cos - d * sin;
+        this.transformMatrix[3] = c * sin + d * cos;
+    }
+
+    // 矩阵变换
+    transform(a, b, c, d, e, f) {
+        const [currentA, currentB, currentC, currentD, currentE, currentF] = this.transformMatrix;
+        
+        // 矩阵乘法
+        this.transformMatrix[0] = a * currentA + b * currentC;
+        this.transformMatrix[1] = a * currentB + b * currentD;
+        this.transformMatrix[2] = c * currentA + d * currentC;
+        this.transformMatrix[3] = c * currentB + d * currentD;
+        this.transformMatrix[4] = e * currentA + f * currentC + currentE;
+        this.transformMatrix[5] = e * currentB + f * currentD + currentF;
+    }
+
+    // 应用变换到点
+    applyTransform(point) {
+        const [a, b, c, d, tx, ty] = this.transformMatrix;
+        return {
+            x: a * point.x + c * point.y + tx,
+            y: b * point.x + d * point.y + ty
+        };
+    }
+
     // 纹理绘制canvas
     get textureCanvas() {
         let canvas = this.graph.textureCanvas;

package/src/lib/webgl/index.js

@@ -3,9 +3,135 @@
 /**
  * 采用webgl基础绘图
  */
+import WebglBase from './base.js';
+import WebglPath from './path.js';
+
 class webgl {
     constructor(context, option) {
         this.option = option || {};
+        this.context = context;
+        this.base = new WebglBase(null, option);
+        this.base.context = context;
+    }
+
+    // 保存当前状态
+    save() {
+        this.base.save();
+    }
+
+    // 恢复上一个状态
+    restore() {
+        this.base.restore();
+    }
+
+    // 平移变换
+    translate(x, y) {
+        this.base.translate(x, y);
+    }
+
+    // 缩放变换
+    scale(sx, sy) {
+        this.base.scale(sx, sy);
+    }
+
+    // 旋转变换
+    rotate(angle) {
+        this.base.rotate(angle);
+    }
+
+    // 矩阵变换
+    transform(a, b, c, d, e, f) {
+        this.base.transform(a, b, c, d, e, f);
+    }
+
+    // 开始路径
+    beginPath() {
+        // WebGL 中不需要 beginPath，由具体的绘制方法处理
+    }
+
+    // 关闭路径
+    closePath() {
+        // WebGL 中不需要 closePath，由具体的绘制方法处理
+    }
+
+    // 移动到指定点
+    moveTo(x, y) {
+        // WebGL 中不需要 moveTo，由具体的绘制方法处理
+    }
+
+    // 绘制直线
+    lineTo(x, y) {
+        // WebGL 中不需要 lineTo，由具体的绘制方法处理
+    }
+
+    // 填充路径
+    fill() {
+        // WebGL 中不需要 fill，由具体的绘制方法处理
+    }
 
+    // 描边路径
+    stroke() {
+        // WebGL 中不需要 stroke，由具体的绘制方法处理
     }
-}
+
+    // 清除矩形区域
+    clearRect(x, y, width, height) {
+        this.context.clearColor(0, 0, 0, 0);
+        this.context.clear(this.context.COLOR_BUFFER_BIT);
+    }
+
+    // 设置线条宽度
+    lineWidth(width) {
+        // 由具体的绘制方法处理
+    }
+
+    // 设置填充样式
+    fillStyle(style) {
+        // 由具体的绘制方法处理
+    }
+
+    // 设置描边样式
+    strokeStyle(style) {
+        // 由具体的绘制方法处理
+    }
+
+    // 绘制文本
+    fillText(text, x, y, maxWidth) {
+        // 由具体的绘制方法处理
+    }
+
+    // 描边文本
+    strokeText(text, x, y, maxWidth) {
+        // 由具体的绘制方法处理
+    }
+
+    // 测量文本宽度
+    measureText(text) {
+        // 使用 2D canvas 测量
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        return ctx.measureText(text);
+    }
+
+    // 创建线性渐变
+    createLinearGradient(x1, y1, x2, y2) {
+        return this.base.createLinearGradient(x1, y1, x2, y2);
+    }
+
+    // 创建径向渐变
+    createRadialGradient(x1, y1, r1, x2, y2, r2) {
+        return this.base.createRadialGradient(x1, y1, r1, x2, y2, r2);
+    }
+
+    // 绘制图像
+    drawImage(img, dx, dy, dWidth, dHeight) {
+        // 由具体的绘制方法处理
+    }
+
+    // 创建 WebglPath 实例
+    createPath(option) {
+        return new WebglPath(null, option);
+    }
+}
+
+export default webgl;

package/src/lib/webgl/path.js

@@ -11,6 +11,11 @@ class WebglPath extends WebglBase {
         this.points = [];
     }
 
+    // 应用变换到点
+    applyTransform(point) {
+        return super.applyTransform(point);
+    }
+
     setParentBounds(parentBounds = this.parentAbsoluteBounds) {
 
         //this.useProgram();
@@ -74,9 +79,11 @@ class WebglPath extends WebglBase {
        
         const fixedPoints = [];
         for(const p of points) {
+            // 应用变换矩阵
+            const transformedPoint = this.applyTransform(p);
             fixedPoints.push(
-                p.x + this.parentAbsoluteBounds.left,
-                p.y + this.parentAbsoluteBounds.top
+                transformedPoint.x + this.parentAbsoluteBounds.left,
+                transformedPoint.y + this.parentAbsoluteBounds.top
             );
         }
         const vertexBuffer = this.createFloat32Buffer(fixedPoints);