jmgraph 3.2.17 → 3.2.19

package/example/progress.html

@@ -15,7 +15,7 @@
 	var g = jmGraph.create('mycanvas', {
 		width: 800,
 		height: 600,
-		mode: '2d'
+		mode: 'webgl'
 	});
 
 	//实时更新画布

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.19",
   "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/core/jmGraph.js

@@ -73,7 +73,13 @@ export default class jmGraph extends jmControl {
 			}
 		}	
 		this.canvas = canvas;	
-		this.context = canvas.getContext(this.mode);
+		// Create context with preserveDrawingBuffer for webgl to prevent flickering
+		if(this.mode === 'webgl') {
+			this.context = canvas.getContext(this.mode, { preserveDrawingBuffer: true });
+		}
+		else {
+			this.context = canvas.getContext(this.mode);
+		}
 
 		this.textureCanvas = option.textureCanvas || null;
 		

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;
@@ -307,6 +377,10 @@ class WeblBase {
     // 多边切割, 得到三角形顶点
     // polygonIndices 顶点索引，
     earCutPointsToTriangles(points) {
+        this.earCutCache = this.earCutCache || (this.earCutCache = {});
+        const key = JSON.stringify(points);
+        if (this.earCutCache[key]) return this.earCutCache[key];
+
         const ps = this.earCutPoints(points);// 切割得到3角色顶点索引，
         const triangles = [];
         // 用顶点索引再组合成坐标数组
@@ -317,6 +391,8 @@ class WeblBase {
 
             triangles.push([p1, p2, p3]);// 每三个顶点构成一个三角
         }
+        
+        this.earCutCache[key] = triangles;
         return triangles;
     }
 

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); 
@@ -364,9 +371,9 @@ class WebglPath extends WebglBase {
     // 分割成一个个规则的三角形，不规则的多边形不全割的话纹理就会没法正确覆盖
     getTriangles(points) {
         
-        //this.trianglesCache = this.trianglesCache||(this.trianglesCache={});
-        //const key = JSON.stringify(points);
-        //if(this.trianglesCache[key]) return this.trianglesCache[key];
+        this.trianglesCache = this.trianglesCache||(this.trianglesCache={});
+        const key = JSON.stringify(points);
+        if(this.trianglesCache[key]) return this.trianglesCache[key];
 
         const res = [];
         const polygons = this.getPolygon(points);                
@@ -377,7 +384,7 @@ class WebglPath extends WebglBase {
                 res.push(...triangles);
             }   
         }
-        //this.trianglesCache[key] = res;
+        this.trianglesCache[key] = res;
         return res;
     }
 
@@ -479,18 +486,15 @@ class WebglPath extends WebglBase {
 
     // 进行多边形填充
     fillPolygons(points, isTexture = false) {   
-        //const indexBuffer = this.createUint16Buffer(triangles, this.context.ELEMENT_ARRAY_BUFFER);
-        //this.context.drawElements(this.context.TRIANGLES, triangles.length, this.context.UNSIGMED_SHORT, 0);
-        //this.deleteBuffer(indexBuffer);
-        /*if(points.length > 3 && (!regular || this.needCut)) {
-            const triangles = regular && this.needCut? this.earCutPointsToTriangles(points): this.getTriangles(points);                
+        if(points.length > 3) {
+            const triangles = this.needCut? this.earCutPointsToTriangles(points): this.getTriangles(points);                
             if(triangles.length) {   
                 for(const triangle of triangles) {
                     this.fillPolygons(triangle, isTexture);// 这里就变成了规则的图形了
                 }
             }
         }
-        else {*/
+        else {
             const buffer = this.writePoints(points);
             // 纹理坐标
             const coordBuffer = isTexture? this.writePoints(points, this.program.attrs.a_text_coord): null;
@@ -498,7 +502,7 @@ class WebglPath extends WebglBase {
             this.context.drawArrays(this.context.TRIANGLE_FAN, 0, points.length);
             this.deleteBuffer(buffer);
             coordBuffer && this.deleteBuffer(coordBuffer);    
-        //}
+        }
     }
 
     // 填充图形