jmgraph 3.2.16 → 3.2.18

package/src/lib/webgl/core/texture.js

@@ -1,61 +1,61 @@
-
-// 生成纹理
-function create2DTexture(gl) {
-    const texture = gl.createTexture();
-    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // 图像反转Y轴
-    gl.activeTexture(gl.TEXTURE0); // 激活纹理单元
-    gl.bindTexture(gl.TEXTURE_2D, texture); // 绑定纹理对象
-    
-    //gl.generateMipmap(gl.TEXTURE_2D);
-    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); // 放大处理方式  // LINEAR  / NEAREST
-    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); // 缩小处理方式
-    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); // 水平平铺方式
-    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // 竖直平铺方式
-
-    
-    return texture;
-}
-
-// 创建图片纹理
-function createImgTexture(gl, img) {
-    const texture = create2DTexture(gl);
-
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img) // 配置纹理图像
-    return {
-        texture
-    };
-}
-
-// 用像素值来绘制纹理
-function createDataTexture(gl, pixels) {
-    const data = new Uint8Array(pixels.data || pixels);
-
-    const texture = create2DTexture(gl);
-
-    gl.texImage2D(
-        gl.TEXTURE_2D, // 纹理目标
-        0, // 细节级别,指定详细级别。0 级是基本图像等级，n 级是第 n 个金字塔简化级。
-        gl.RGBA, // 纹理内部格式
-        pixels.width || 1, // 指定纹理的宽度
-        pixels.height || 1, // 指定纹理的高度
-        0, // 指定纹理的边框宽度。必须为 0。
-        gl.RGBA, // 源图像数据格式
-        gl.UNSIGNED_BYTE, // 纹理数据类型
-        data // 数据
-      );
-    return {
-        texture
-    };
-}
-
-// 删除纹理
-function deleteTexture(gl, texture) {
-    return gl.deleteTexture(texture);
-}
-
-export {
-    create2DTexture,
-    createImgTexture,
-    createDataTexture,
-    deleteTexture
+
+// 生成纹理
+function create2DTexture(gl) {
+    const texture = gl.createTexture();
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // 图像反转Y轴
+    gl.activeTexture(gl.TEXTURE0); // 激活纹理单元
+    gl.bindTexture(gl.TEXTURE_2D, texture); // 绑定纹理对象
+    
+    //gl.generateMipmap(gl.TEXTURE_2D);
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); // 放大处理方式  // LINEAR  / NEAREST
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); // 缩小处理方式
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); // 水平平铺方式
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // 竖直平铺方式
+
+    
+    return texture;
+}
+
+// 创建图片纹理
+function createImgTexture(gl, img) {
+    const texture = create2DTexture(gl);
+
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img) // 配置纹理图像
+    return {
+        texture
+    };
+}
+
+// 用像素值来绘制纹理
+function createDataTexture(gl, pixels) {
+    const data = new Uint8Array(pixels.data || pixels);
+
+    const texture = create2DTexture(gl);
+
+    gl.texImage2D(
+        gl.TEXTURE_2D, // 纹理目标
+        0, // 细节级别,指定详细级别。0 级是基本图像等级，n 级是第 n 个金字塔简化级。
+        gl.RGBA, // 纹理内部格式
+        pixels.width || 1, // 指定纹理的宽度
+        pixels.height || 1, // 指定纹理的高度
+        0, // 指定纹理的边框宽度。必须为 0。
+        gl.RGBA, // 源图像数据格式
+        gl.UNSIGNED_BYTE, // 纹理数据类型
+        data // 数据
+      );
+    return {
+        texture
+    };
+}
+
+// 删除纹理
+function deleteTexture(gl, texture) {
+    return gl.deleteTexture(texture);
+}
+
+export {
+    create2DTexture,
+    createImgTexture,
+    createDataTexture,
+    deleteTexture
 }

package/src/lib/webgl/gradient.js

@@ -1,169 +1,169 @@
-const WebglGradientTextureCache = {};
-// 渐变
-class WebglGradient {
-    // type:[linear= 线性渐变,radial=放射性渐变] 
-    constructor(type='linear', params={}) {
-        this.type = type || 'linear';
-
-        this.x1 = params.x1 || 0;
-        this.y1 = params.y1 || 0;
-        this.r1 = params.r1 || 0;
-        this.x2 = params.x2 || 0;
-        this.y2 = params.y2 || 0;
-        this.r2 = params.r2 || 0;
-
-        this.bounds = params.bounds || {
-            left: 0,
-            top: 0,
-            width: 0,
-            height: 0
-        }
-
-        this.control = params.control;
-
-        this.stops = [];
-        this.init();
-    }
-
-    init() {
-        const dx = this.x2 - this.x1;
-        const dy = this.y2 - this.y1;
-
-        if(this.type === 'radial') {
-            this.length = this.r2 - this.r1;
-        }
-        else if(dx === 0 && dy === 0) {
-            this.length = 0;
-        }
-        else {
-            // 渐变中心的距离
-            this.length = Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
-            this.sin = dy / this.length;
-            this.cos = dx / this.length;
-        }
-    }
-
-    // 渐变颜色
-    addColorStop(offset, color) {
-        this.stops.push({
-            offset,
-            color
-        });
-    }
-
-    // 转为渐变为纹理
-    toImageData(control, bounds, points=null) {
-        //const key = this.key || this.toString();
-        //if(WebglGradientTextureCache[key]) return WebglGradientTextureCache[key];
-        if(!control.textureContext) {
-            return null;
-        }
-        let gradient = null;
-        if(this.type === 'linear') {
-            gradient = control.textureContext.createLinearGradient(this.x1, this.y1, this.x2, this.y2);
-        }
-        else {
-            gradient = control.textureContext.createRadialGradient(this.x1, this.y1, this.r1, this.x2, this.y2, this.r2);
-        }
-        this.stops.forEach(function(s, i) {	
-            const c = control.graph.utils.toColor(s.color);
-            gradient && gradient.addColorStop(s.offset, c);		
-        });
-        
-        const data = control.toFillTexture(gradient, bounds, points);
-
-        //WebglGradientTextureCache[key] = data;
-
-        return data;
-    }
-
-    // 根据绘制图形的坐标计算出对应点的颜色
-    /*
-    toPointColors(points) {
-        const stops = this.getStops();
-        const colors = [];
-        for(let i=0; i<points.length; i+=2) {
-            const p = {
-                x: points[i],
-                y: points[i+1]
-            }
-            if(this.type === 'radial') {
-                const dx = p.x - this.x1;
-                const dy = p.y - this.y1;
-                const len = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
-                const rang = this.getStopRange(len, stops);
-                if(!rang.start && rang.end) {
-                    colors.push(rang.end.color);
-                }
-                else if(!rang.end && rang.start) {
-                    colors.push(rang.start.color);
-                }
-                else {
-                    const rangLength = rang.end.length - rang.start.length;
-                    const offlen = len - rang.start.length;
-                    const per = offlen / rangLength;
-                    const color = {
-                        r: rang.start.color.r + (rang.end.color.r - rang.start.color.r) * per,
-                        g: rang.start.color.g + (rang.end.color.g - rang.start.color.g) * per,
-                        b: rang.start.color.b + (rang.end.color.b - rang.start.color.b) * per,
-                        a: rang.start.color.a + (rang.end.color.a - rang.start.color.a) * per,
-                    };
-                    colors.push(color);
-                }
-            }
-        }
-        return colors;
-    }
-*/
-    // 根据起点距离获取边界stop
-    /*
-    getStopRange(len, stops) {
-        const res = {};
-        for(const s of stops) {
-            if(s.length <= len) {
-                res.start = s;
-            }
-            else {
-                res.end = s;
-            }
-        }
-        return res;
-    }
-
-    // 根据stop计算offset长度
-    getStops() {
-        const stops = this.stops.sort((p1, p2) => p1.offset - p2.offset); // 渐变色排序从小于大
-        for(const s of stops) {
-            
-            const color = typeof s.color === 'string'? this.control.graph.utils.hexToRGBA(s.color) : s.color;
-            console.log(s, color);
-            s.color = this.control.graph.utils.rgbToDecimal(color);
-            s.length = s.offset * this.length;
-        }
-        return stops;
-    }
-*/
-    /**
-	 * 转换为渐变的字符串表达
-	 *
-	 * @method toString
-	 * @for jmGradient
-	 * @return {string} linear-gradient(x1 y1 x2 y2, color1 step, color2 step, ...);	//radial-gradient(x1 y1 r1 x2 y2 r2, color1 step,color2 step, ...);
-	 */
-	toString() {
-		let str = this.type + '-gradient(';
-		if(this.type == 'linear') {
-			str += this.x1 + ' ' + this.y1 + ' ' + this.x2 + ' ' + this.y2;
-		}
-		else {
-			str += this.x1 + ' ' + this.y1 + ' ' + this.r1 + ' ' + this.x2 + ' ' + this.y2 + ' ' + this.r2;
-		}
-		//颜色渐变
-		this.stops.forEach(function(s) {	
-			str += ',' + s.color + ' ' + s.offset;
-		});
-		return str + ')';
-	}
-}
-
+const WebglGradientTextureCache = {};
+// 渐变
+class WebglGradient {
+    // type:[linear= 线性渐变,radial=放射性渐变] 
+    constructor(type='linear', params={}) {
+        this.type = type || 'linear';
+
+        this.x1 = params.x1 || 0;
+        this.y1 = params.y1 || 0;
+        this.r1 = params.r1 || 0;
+        this.x2 = params.x2 || 0;
+        this.y2 = params.y2 || 0;
+        this.r2 = params.r2 || 0;
+
+        this.bounds = params.bounds || {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0
+        }
+
+        this.control = params.control;
+
+        this.stops = [];
+        this.init();
+    }
+
+    init() {
+        const dx = this.x2 - this.x1;
+        const dy = this.y2 - this.y1;
+
+        if(this.type === 'radial') {
+            this.length = this.r2 - this.r1;
+        }
+        else if(dx === 0 && dy === 0) {
+            this.length = 0;
+        }
+        else {
+            // 渐变中心的距离
+            this.length = Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
+            this.sin = dy / this.length;
+            this.cos = dx / this.length;
+        }
+    }
+
+    // 渐变颜色
+    addColorStop(offset, color) {
+        this.stops.push({
+            offset,
+            color
+        });
+    }
+
+    // 转为渐变为纹理
+    toImageData(control, bounds, points=null) {
+        //const key = this.key || this.toString();
+        //if(WebglGradientTextureCache[key]) return WebglGradientTextureCache[key];
+        if(!control.textureContext) {
+            return null;
+        }
+        let gradient = null;
+        if(this.type === 'linear') {
+            gradient = control.textureContext.createLinearGradient(this.x1, this.y1, this.x2, this.y2);
+        }
+        else {
+            gradient = control.textureContext.createRadialGradient(this.x1, this.y1, this.r1, this.x2, this.y2, this.r2);
+        }
+        this.stops.forEach(function(s, i) {	
+            const c = control.graph.utils.toColor(s.color);
+            gradient && gradient.addColorStop(s.offset, c);		
+        });
+        
+        const data = control.toFillTexture(gradient, bounds, points);
+
+        //WebglGradientTextureCache[key] = data;
+
+        return data;
+    }
+
+    // 根据绘制图形的坐标计算出对应点的颜色
+    /*
+    toPointColors(points) {
+        const stops = this.getStops();
+        const colors = [];
+        for(let i=0; i<points.length; i+=2) {
+            const p = {
+                x: points[i],
+                y: points[i+1]
+            }
+            if(this.type === 'radial') {
+                const dx = p.x - this.x1;
+                const dy = p.y - this.y1;
+                const len = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+                const rang = this.getStopRange(len, stops);
+                if(!rang.start && rang.end) {
+                    colors.push(rang.end.color);
+                }
+                else if(!rang.end && rang.start) {
+                    colors.push(rang.start.color);
+                }
+                else {
+                    const rangLength = rang.end.length - rang.start.length;
+                    const offlen = len - rang.start.length;
+                    const per = offlen / rangLength;
+                    const color = {
+                        r: rang.start.color.r + (rang.end.color.r - rang.start.color.r) * per,
+                        g: rang.start.color.g + (rang.end.color.g - rang.start.color.g) * per,
+                        b: rang.start.color.b + (rang.end.color.b - rang.start.color.b) * per,
+                        a: rang.start.color.a + (rang.end.color.a - rang.start.color.a) * per,
+                    };
+                    colors.push(color);
+                }
+            }
+        }
+        return colors;
+    }
+*/
+    // 根据起点距离获取边界stop
+    /*
+    getStopRange(len, stops) {
+        const res = {};
+        for(const s of stops) {
+            if(s.length <= len) {
+                res.start = s;
+            }
+            else {
+                res.end = s;
+            }
+        }
+        return res;
+    }
+
+    // 根据stop计算offset长度
+    getStops() {
+        const stops = this.stops.sort((p1, p2) => p1.offset - p2.offset); // 渐变色排序从小于大
+        for(const s of stops) {
+            
+            const color = typeof s.color === 'string'? this.control.graph.utils.hexToRGBA(s.color) : s.color;
+            console.log(s, color);
+            s.color = this.control.graph.utils.rgbToDecimal(color);
+            s.length = s.offset * this.length;
+        }
+        return stops;
+    }
+*/
+    /**
+	 * 转换为渐变的字符串表达
+	 *
+	 * @method toString
+	 * @for jmGradient
+	 * @return {string} linear-gradient(x1 y1 x2 y2, color1 step, color2 step, ...);	//radial-gradient(x1 y1 r1 x2 y2 r2, color1 step,color2 step, ...);
+	 */
+	toString() {
+		let str = this.type + '-gradient(';
+		if(this.type == 'linear') {
+			str += this.x1 + ' ' + this.y1 + ' ' + this.x2 + ' ' + this.y2;
+		}
+		else {
+			str += this.x1 + ' ' + this.y1 + ' ' + this.r1 + ' ' + this.x2 + ' ' + this.y2 + ' ' + this.r2;
+		}
+		//颜色渐变
+		this.stops.forEach(function(s) {	
+			str += ',' + s.color + ' ' + s.offset;
+		});
+		return str + ')';
+	}
+}
+
 export default WebglGradient;

package/src/lib/webgl/index.js

@@ -1,11 +1,137 @@
-
-
-/**
- * 采用webgl基础绘图
- */
-class webgl {
-    constructor(context, option) {
-        this.option = option || {};
-
-    }
-}
+
+
+/**
+ * 采用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;