jmgraph 3.2.18 → 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/package.json

@@ -1,7 +1,7 @@
 {
   "family": "jmgraph",
   "name": "jmgraph",
-  "version": "3.2.18",
+  "version": "3.2.19",
   "description": "一个简单的canvas画图库",
   "homepage": "https://surl.fit/tools/tools/jmgraph",
   "keywords": [

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

@@ -377,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 = [];
         // 用顶点索引再组合成坐标数组
@@ -387,6 +391,8 @@ class WeblBase {
 
             triangles.push([p1, p2, p3]);// 每三个顶点构成一个三角
         }
+        
+        this.earCutCache[key] = triangles;
         return triangles;
     }
 

package/src/lib/webgl/path.js

@@ -371,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);                
@@ -384,7 +384,7 @@ class WebglPath extends WebglBase {
                 res.push(...triangles);
             }   
         }
-        //this.trianglesCache[key] = res;
+        this.trianglesCache[key] = res;
         return res;
     }
 
@@ -486,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;
@@ -505,7 +502,7 @@ class WebglPath extends WebglBase {
             this.context.drawArrays(this.context.TRIANGLE_FAN, 0, points.length);
             this.deleteBuffer(buffer);
             coordBuffer && this.deleteBuffer(coordBuffer);    
-        //}
+        }
     }
 
     // 填充图形