jmgraph 3.2.19 → 3.2.21

package/src/lib/webgl/gradient.js

@@ -53,8 +53,14 @@ class WebglGradient {
 
     // 转为渐变为纹理
     toImageData(control, bounds, points=null) {
-        //const key = this.key || this.toString();
-        //if(WebglGradientTextureCache[key]) return WebglGradientTextureCache[key];
+        // 缓存基于渐变参数（不含 bounds，因为同一个渐变只是位置不同时纹理相同）
+        const gradientKey = this.toString();
+        if(this.__cachedData && this.__cacheKey === gradientKey && 
+           this.__cachedData.data && this.__cachedData.data.width === Math.ceil(bounds.width) &&
+           this.__cachedData.data.data && this.__cachedData.data.data.height === Math.ceil(bounds.height)) {
+            return this.__cachedData;
+        }
+
         if(!control.textureContext) {
             return null;
         }
@@ -72,11 +78,18 @@ class WebglGradient {
         
         const data = control.toFillTexture(gradient, bounds, points);
 
-        //WebglGradientTextureCache[key] = data;
+        this.__cachedData = data;
+        this.__cacheKey = gradientKey;
 
         return data;
     }
 
+    // 当渐变参数变化时使缓存失效
+    invalidateCache() {
+        this.__cachedData = null;
+        this.__cacheKey = null;
+    }
+
     // 根据绘制图形的坐标计算出对应点的颜色
     /*
     toPointColors(points) {

package/src/lib/webgl/index.js

@@ -105,12 +105,13 @@ class webgl {
         // 由具体的绘制方法处理
     }
 
-    // 测量文本宽度
+    // 测量文本宽度（复用纹理 canvas 的 context）
     measureText(text) {
-        // 使用 2D canvas 测量
+        const ctx = this.base.textureContext;
+        if(ctx && ctx.measureText) return ctx.measureText(text);
         const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        return ctx.measureText(text);
+        const ctx2 = canvas.getContext('2d');
+        return ctx2.measureText(text);
     }
 
     // 创建线性渐变

package/src/lib/webgl/path.js

@@ -9,6 +9,40 @@ class WebglPath extends WebglBase {
         this.needCut = option.needCut || false;
         this.control = option.control;
         this.points = [];
+        // 缓存 buffer 和纹理，避免每帧创建/销毁
+        this.__cachedBuffers = [];
+        this.__cachedTexture = null;
+        this.__cachedTextureKey = null;
+    }
+
+    // 释放缓存的 WebGL 资源
+    dispose() {
+        for(const buf of this.__cachedBuffers) {
+            this.deleteBuffer(buf);
+        }
+        this.__cachedBuffers = [];
+        if(this.__cachedTexture) {
+            this.deleteTexture(this.__cachedTexture);
+            this.__cachedTexture = null;
+            this.__cachedTextureKey = null;
+        }
+    }
+
+    // 获取或创建 buffer，优先复用缓存
+    getOrCreateBuffer(data, attr) {
+        let buffer = this.__cachedBuffers.find(b => b.attr === attr);
+        if(buffer) {
+            const gl = this.context;
+            const float32 = new Float32Array(data);
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, float32, gl.DYNAMIC_DRAW);
+            buffer.data = data;
+            return buffer;
+        }
+        buffer = this.createFloat32Buffer(data);
+        buffer.attr = attr;
+        this.__cachedBuffers.push(buffer);
+        return buffer;
     }
 
     // 应用变换到点
@@ -63,6 +97,7 @@ class WebglPath extends WebglBase {
     endDraw() {
         if(this.points) delete this.points;
         if(this.pathPoints) delete this.pathPoints;
+        // 缓存的纹理保留到下次绘制（渐变可能不变）
     }
 
     // 图形封闭
@@ -74,21 +109,47 @@ class WebglPath extends WebglBase {
         }
     }
 
-    // 绘制点数组
+    // 绘制点数组（使用 DYNAMIC_DRAW 复用 buffer，避免每帧 create/delete）
     writePoints(points, attr = this.program.attrs.a_position) {
-       
         const fixedPoints = [];
-        for(const p of points) {
-            // 应用变换矩阵
-            const transformedPoint = this.applyTransform(p);
-            fixedPoints.push(
-                transformedPoint.x + this.parentAbsoluteBounds.left,
-                transformedPoint.y + this.parentAbsoluteBounds.top
-            );
-        }
-        const vertexBuffer = this.createFloat32Buffer(fixedPoints); 
+        const [a, b, c, d, tx, ty] = this.transformMatrix;
+        const isIdentity = (a === 1 && b === 0 && c === 0 && d === 1 && tx === 0 && ty === 0);
+        const offsetLeft = this.parentAbsoluteBounds.left;
+        const offsetTop = this.parentAbsoluteBounds.top;
+
+        if(isIdentity) {
+            // 单位矩阵时直接加偏移，避免逐点调用 applyTransform
+            for(let i = 0; i < points.length; i++) {
+                fixedPoints.push(points[i].x + offsetLeft, points[i].y + offsetTop);
+            }
+        } else {
+            for(const p of points) {
+                const transformedPoint = this.applyTransform(p);
+                fixedPoints.push(
+                    transformedPoint.x + offsetLeft,
+                    transformedPoint.y + offsetTop
+                );
+            }
+        }
+        const float32 = new Float32Array(fixedPoints);
+        const gl = this.context;
+
+        // 复用已有 buffer 或创建新的
+        if(this.__cachedBuffers.length > 0) {
+            // 找一个同 attr 的 buffer 复用
+            let buffer = this.__cachedBuffers.find(b => b.attr === attr);
+            if(buffer) {
+                gl.bindBuffer(gl.ARRAY_BUFFER, buffer.buffer);
+                gl.bufferData(gl.ARRAY_BUFFER, float32, gl.DYNAMIC_DRAW);
+                buffer.data = fixedPoints;
+                this.writeVertexAttrib(buffer, attr, 2, 0, 0);
+                return buffer;
+            }
+        }
+        const vertexBuffer = this.createFloat32Buffer(float32, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW); 
         this.writeVertexAttrib(vertexBuffer, attr, 2, 0, 0);
         vertexBuffer.attr = attr;
+        this.__cachedBuffers.push(vertexBuffer);
         return vertexBuffer;
     }
 
@@ -370,9 +431,10 @@ class WebglPath extends WebglBase {
 
     // 分割成一个个规则的三角形，不规则的多边形不全割的话纹理就会没法正确覆盖
     getTriangles(points) {
-        
         this.trianglesCache = this.trianglesCache||(this.trianglesCache={});
-        const key = JSON.stringify(points);
+        // 快速缓存 key：用长度和首尾点坐标（比 JSON.stringify 快几个数量级）
+        const len = points.length;
+        const key = len + '_' + points[0].x + '_' + points[0].y + '_' + points[len-1].x + '_' + points[len-1].y;
         if(this.trianglesCache[key]) return this.trianglesCache[key];
 
         const res = [];
@@ -411,10 +473,9 @@ class WebglPath extends WebglBase {
             points = regular? points : this.pathToPoints(points);
             const buffer = this.writePoints(points);
             this.context.drawArrays(regular? this.context.LINE_LOOP: this.context.POINTS, 0, points.length);
-            this.deleteBuffer(buffer);
+            // buffer 由 endDraw 统一清理
         }
-        colorBuffer && this.deleteBuffer(colorBuffer);
-        colorBuffer && this.disableVertexAttribArray(colorBuffer.attr);
+        colorBuffer && this.disableVertexAttribArray(colorBuffer && colorBuffer.attr);
     }
 
     // 填充图形
@@ -445,8 +506,7 @@ class WebglPath extends WebglBase {
 
         this.fillPolygons(points);                
 
-        colorBuffer && this.deleteBuffer(colorBuffer);
-        colorBuffer && this.disableVertexAttribArray(colorBuffer.attr);
+        colorBuffer && this.disableVertexAttribArray(colorBuffer && colorBuffer.attr);
 
     }
 
@@ -456,8 +516,24 @@ class WebglPath extends WebglBase {
     fillImage(img, points, bounds) {
         if(!img) return;
 
-        // 设置纹理
-        const texture = img instanceof ImageData? this.createDataTexture(img) : this.createImgTexture(img);
+        // 对于 ImageData，生成缓存 key（基于渐变参数或 bounds），复用纹理
+        let texture = null;
+        if(img instanceof ImageData) {
+            const key = `${img.width}_${img.height}_${bounds.width}_${bounds.height}_${bounds.left}_${bounds.top}`;
+            if(this.__cachedTexture && this.__cachedTextureKey === key) {
+                texture = this.__cachedTexture;
+            } else {
+                texture = this.createDataTexture(img);
+                // 释放旧纹理
+                if(this.__cachedTexture) {
+                    this.deleteTexture(this.__cachedTexture);
+                }
+                this.__cachedTexture = texture;
+                this.__cachedTextureKey = key;
+            }
+        } else {
+            texture = this.createImgTexture(img);
+        }
         this.context.uniform1i(this.program.uniforms.u_sample.location, 0); // 纹理单元传递给着色器
 
         // 指定纹理区域尺寸
@@ -470,7 +546,10 @@ class WebglPath extends WebglBase {
 
         this.fillTexture(points);
         
-        this.deleteTexture(texture);
+        // 仅对非缓存纹理（非 ImageData）立即删除
+        if(!(img instanceof ImageData)) {
+            this.deleteTexture(texture);
+        }
     }
 
     fillTexture(points) {        
@@ -486,23 +565,67 @@ class WebglPath extends WebglBase {
 
     // 进行多边形填充
     fillPolygons(points, isTexture = false) {   
-        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 {
+        if(points.length <= 3) {
+            // 3个点以下的三角形直接画
             const buffer = this.writePoints(points);
-            // 纹理坐标
             const coordBuffer = isTexture? this.writePoints(points, this.program.attrs.a_text_coord): null;
+            this.context.drawArrays(this.context.TRIANGLE_FAN, 0, points.length);
+            return;
+        }
 
+        // 规则图形（凸多边形，如圆）：直接用 TRIANGLE_FAN 一次性绘制，无需 earcut
+        if(this.isRegular) {
+            const buffer = this.writePoints(points);
+            const coordBuffer = isTexture? this.writePoints(points, this.program.attrs.a_text_coord): null;
             this.context.drawArrays(this.context.TRIANGLE_FAN, 0, points.length);
-            this.deleteBuffer(buffer);
-            coordBuffer && this.deleteBuffer(coordBuffer);    
+            return;
         }
+
+        // 不规则图形：需要 earcut 三角化后，合并为一个大的顶点缓冲区，单次 drawArrays
+        const triangles = this.needCut? this.earCutPointsToTriangles(points): this.getTriangles(points);
+        if(!triangles.length) return;
+
+        // 合并所有三角形的顶点到一个数组
+        const allVertices = [];
+        const allTexCoords = [];
+        for(const triangle of triangles) {
+            for(const p of triangle) {
+                allVertices.push(p.x, p.y);
+                if(isTexture) allTexCoords.push(p.x, p.y);
+            }
+        }
+
+        // 一次性上传所有数据并绘制
+        const vertexData = new Float32Array(allVertices);
+        const gl = this.context;
+
+        // 复用或创建 position buffer
+        let posBuffer = this.__cachedBuffers.find(b => b.attr === this.program.attrs.a_position);
+        if(!posBuffer) {
+            posBuffer = this.createFloat32Buffer(vertexData, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW);
+            posBuffer.attr = this.program.attrs.a_position;
+            this.__cachedBuffers.push(posBuffer);
+        } else {
+            gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.DYNAMIC_DRAW);
+        }
+        this.writeVertexAttrib(posBuffer, this.program.attrs.a_position, 2, 0, 0);
+
+        if(isTexture && allTexCoords.length) {
+            const texData = new Float32Array(allTexCoords);
+            let texBuffer = this.__cachedBuffers.find(b => b.attr === this.program.attrs.a_text_coord);
+            if(!texBuffer) {
+                texBuffer = this.createFloat32Buffer(texData, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW);
+                texBuffer.attr = this.program.attrs.a_text_coord;
+                this.__cachedBuffers.push(texBuffer);
+            } else {
+                gl.bindBuffer(gl.ARRAY_BUFFER, texBuffer.buffer);
+                gl.bufferData(gl.ARRAY_BUFFER, texData, gl.DYNAMIC_DRAW);
+            }
+            this.writeVertexAttrib(texBuffer, this.program.attrs.a_text_coord, 2, 0, 0);
+        }
+
+        gl.drawArrays(gl.TRIANGLES, 0, allVertices.length / 2);
     }
 
     // 填充图形

package/src/shapes/jmEllipse.js

@@ -0,0 +1,91 @@
+import {jmArc} from "./jmArc.js";
+
+/**
+ * 画椭圆
+ * 椭圆是通过缩放圆形来实现的，支持完整的椭圆和椭圆弧
+ * 可以指定起始角度和结束角度来绘制椭圆弧
+ *
+ * @class jmEllipse
+ * @extends jmArc
+ * @param {object} params 椭圆的参数
+ * @param {object} [params.center={x:0,y:0}] 椭圆中心点坐标
+ * @param {number} [params.width=100] 椭圆宽度（长轴直径）
+ * @param {number} [params.height=60] 椭圆高度（短轴直径）
+ * @param {number} [params.startAngle=0] 起始角度（弧度）
+ * @param {number} [params.endAngle=Math.PI*2] 结束角度（弧度）
+ * @param {boolean} [params.anticlockwise=false] 是否逆时针绘制
+ */
+export default class jmEllipse extends jmArc {
+	
+	constructor(params, t='jmEllipse') {
+		params = params || {};
+		params.isRegular = true; // 标记为规则图形
+		super(params, t);
+	}
+
+	/**
+	 * 初始化图形点
+	 * 为WebGL模式生成控制点，2D模式使用draw方法直接绘制
+	 * 
+	 * @method initPoints
+	 * @private
+	 * @for jmEllipse
+	 */
+	initPoints() {
+		// WebGL模式使用父类的点生成方法
+		if(this.graph.mode === 'webgl') {
+			return super.initPoints();
+		}
+		
+		// 2D模式：生成4个控制点用于边界计算
+		// 这些点不是实际的绘制点，而是用于碰撞检测和边界计算
+		let location = this.getLocation();
+
+		this.points = [];
+		this.points.push({x:location.center.x - location.width/2, y:location.center.y}); // 左
+		this.points.push({x:location.center.x, y:location.center.y - location.height/2}); // 上
+		this.points.push({x:location.center.x + location.width/2, y:location.center.y}); // 右
+		this.points.push({x:location.center.x, y:location.center.y + location.height/2}); // 下
+	}
+
+	/**
+	 * 重写基类画图，此处为画一个椭圆
+	 * 使用Canvas的变换功能（平移和缩放）来绘制椭圆
+	 * 
+	 * @method draw
+	 */
+	draw() {
+		// WebGL模式使用父类的绘制方法
+		if(this.graph.mode === 'webgl') {
+			return super.draw();
+		}
+		
+		// 获取边界和位置信息
+		let bounds = this.parent && this.parent.absoluteBounds ? this.parent.absoluteBounds : this.absoluteBounds;
+		let location = this.getLocation();
+
+		// 获取椭圆弧参数
+		let start = this.startAngle || 0;
+		let end = this.endAngle || Math.PI * 2;
+		let anticlockwise = this.anticlockwise || false;
+
+		// 椭圆绘制：通过变换圆形来实现
+		// 1. 保存当前绘图状态
+		this.context.save();
+		
+		// 2. 平移到椭圆中心
+		this.context.translate(location.center.x + bounds.left, location.center.y + bounds.top);
+		
+		// 3. 缩放坐标系，使圆形变为椭圆
+		// 将X轴缩放width/2，Y轴缩放height/2，这样单位圆就变成了椭圆
+		this.context.scale(location.width/2, location.height/2);
+		
+		// 4. 绘制单位圆（会被缩放成椭圆）
+		this.context.arc(0, 0, 1, start, end, anticlockwise);
+		
+		// 5. 恢复绘图状态
+		this.context.restore();
+	}
+}
+
+export { jmEllipse };

package/src/shapes/jmLabel.js

@@ -22,7 +22,7 @@ export default class jmLabel extends jmControl {
 		this.style.textAlign = this.style.textAlign || 'left';
 		//文字垂直对齐
 		this.style.textBaseline = this.style.textBaseline || 'middle';
-		this.text = params.text || '';
+		this.text = params.text || params.value || '';
 
 		this.center = params.center || null;
 	}
@@ -108,43 +108,137 @@ export default class jmLabel extends jmControl {
 
 	/**
 	 * 测试获取文本所占大小
-	 *
+	 * 计算文本渲染所需的宽度和高度，支持自动换行
+	 * 
 	 * @method testSize
-	 * @return {object} 含文本大小的对象
+	 * @return {object} 含文本大小的对象 {width, height}
 	 */
 	testSize() {
+		// 使用缓存提高性能，避免重复计算
 		if(this.__size) return this.__size;
 
-		if(this.webglControl) this.__size = this.webglControl.testSize(this.text, this.style);
+		if(this.webglControl) {
+			this.__size = this.webglControl.testSize(this.text, this.style);
+		}
 		else {
 			this.context.save && this.context.save();
-			// 修改字体，用来计算
+			
+			// 设置字体样式用于测量
 			this.setStyle({
 				font: this.style.font || (this.style.fontSize + 'px ' + this.style.fontFamily)
 			});
-			//计算宽度
-			this.__size = this.context.measureText?
-								this.context.measureText(this.text):
-								{width:15};
+			
+			// 计算文本尺寸
+			if(this.style.maxWidth && this.text) {
+				// 文本换行处理
+				const lines = this.wrapText(this.text, this.style.maxWidth);
+				let maxWidth = 0;
+				
+				// 找出最宽的一行
+				for(let line of lines) {
+					const width = this.context.measureText(line).width;
+					if(width > maxWidth) maxWidth = width;
+				}
+				
+				// 计算总高度（行数 × 行高）
+				const lineHeight = this.style.lineHeight || this.style.fontSize * 1.2;
+				this.__size = {
+					width: maxWidth,
+					height: lineHeight * lines.length
+				};
+			}
+			else {
+				// 单行文本
+				this.__size = this.context.measureText ?
+								this.context.measureText(this.text) :
+								{width: 15};
+				this.__size.height = this.style.fontSize ? this.style.fontSize : 15;
+			}
+			
 			this.context.restore && this.context.restore();
-			this.__size.height = this.style.fontSize?this.style.fontSize:15;
 		}
 
+		// 设置默认宽高
 		if(!this.width) this.width = this.__size.width;
 		if(!this.height) this.height = this.__size.height;
 		
 		return this.__size;
 	}
 
+	/**
+	 * 文本换行处理
+	 * 根据最大宽度将文本分割成多行
+	 * 支持中英文混合文本，优先在空格处换行
+	 * 
+	 * @method wrapText
+	 * @param {string} text 文本内容
+	 * @param {number} maxWidth 最大宽度（像素）
+	 * @return {array} 换行后的文本数组
+	 */
+	wrapText(text, maxWidth) {
+		// 参数验证
+		if(!text || !maxWidth) return [text || ''];
+		
+		// 检查缓存，避免重复计算
+		const cacheKey = `${text}_${maxWidth}`;
+		if(this.__wrapTextCache && this.__wrapTextCache.key === cacheKey) {
+			return this.__wrapTextCache.lines;
+		}
+		
+		const lines = [];
+		
+		// 先按换行符分割
+		const paragraphs = text.split('\n');
+		
+		for(let paragraph of paragraphs) {
+			// 如果段落为空，添加空行
+			if(!paragraph) {
+				lines.push('');
+				continue;
+			}
+			
+			// 按空格分割单词
+			const words = paragraph.split(' ');
+			let currentLine = words[0];
+			
+			for(let i = 1; i < words.length; i++) {
+				const word = words[i];
+				const testLine = currentLine + ' ' + word;
+				const metrics = this.context.measureText(testLine);
+				const testWidth = metrics.width;
+				
+				if(testWidth <= maxWidth) {
+					// 当前行还能容纳这个单词
+					currentLine = testLine;
+				} else {
+					// 当前行已满，保存当前行并开始新行
+					if(currentLine) lines.push(currentLine);
+					currentLine = word;
+				}
+			}
+			
+			// 添加最后一行
+			if(currentLine) lines.push(currentLine);
+		}
+		
+		// 缓存结果
+		this.__wrapTextCache = {
+			key: cacheKey,
+			lines: lines
+		};
+		
+		return lines;
+	}
+
 	/**
 	 * 根据位置偏移画字符串
 	 * 
 	 * @method draw
 	 */
-	draw() {	
+	draw() {
 		
 		//获取当前控件的绝对位置
-		let bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;		
+		let bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;
 		const size = this.testSize();
 		let location = this.location;
 		let x = location.left + bounds.left;
@@ -184,7 +278,16 @@ export default class jmLabel extends jmControl {
 			}
 			else if(this.style.fill && this.context.fillText) {
 				if(this.style.maxWidth) {
-					this.context.fillText(txt,x,y, this.style.maxWidth);
+					// 绘制换行文本
+					const lines = this.wrapText(txt, this.style.maxWidth);
+					const lineHeight = this.style.fontSize;
+					// 调整起始Y位置以支持垂直对齐
+					const startY = y - (lines.length - 1) * lineHeight / 2;
+					
+					for(let i = 0; i < lines.length; i++) {
+						const lineY = startY + i * lineHeight;
+						this.context.fillText(lines[i], x, lineY);
+					}
 				}
 				else {
 					this.context.fillText(txt,x,y);
@@ -192,74 +295,22 @@ export default class jmLabel extends jmControl {
 			}
 			else if(this.context.strokeText) {
 				if(this.style.maxWidth) {
-					this.context.strokeText(txt,x,y, this.style.maxWidth);
+					// 绘制换行文本
+					const lines = this.wrapText(txt, this.style.maxWidth);
+					const lineHeight = this.style.fontSize;
+					// 调整起始Y位置以支持垂直对齐
+					const startY = y - (lines.length - 1) * lineHeight / 2;
+					
+					for(let i = 0; i < lines.length; i++) {
+						const lineY = startY + i * lineHeight;
+						this.context.strokeText(lines[i], x, lineY);
+					}
 				}
 				else {
 					this.context.strokeText(txt,x,y);
 				}
 			}
 		}
-		//如果有指定边框，则画出边框
-		if(this.style.border) {
-			//如果指定了边框样式
-			if(this.style.border.style) {
-				this.context.save && this.context.save();
-				this.setStyle(this.style.border.style);
-			}
-			if(this.mode === '2d') {
-				this.context.moveTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
-				if(this.style.border.top) {
-					this.context.lineTo(this.points[1].x + bounds.left,this.points[1].y + bounds.top);
-				}
-				
-				if(this.style.border.right) {
-					this.context.moveTo(this.points[1].x + bounds.left,this.points[1].y + bounds.top);
-					this.context.lineTo(this.points[2].x + bounds.left,this.points[2].y + bounds.top);
-				}
-				
-				if(this.style.border.bottom) {
-					this.context.moveTo(this.points[2].x + bounds.left,this.points[2].y + bounds.top);
-					this.context.lineTo(this.points[3].x + bounds.left,this.points[3].y + bounds.top);
-				}
-				
-				if(this.style.border.left) {
-					this.context.moveTo(this.points[3].x + bounds.left,this.points[3].y + bounds.top);	
-					this.context.lineTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
-				}
-			}
-			else {
-				const points = [];
-				if(this.style.border.top) {
-					points.push(this.points[0]);
-					points.push(this.points[1]);
-				}
-				
-				if(this.style.border.right) {
-					points.push({
-						...this.points[1],
-						m: true
-					});
-					points.push(this.points[2]);
-				}
-				
-				if(this.style.border.bottom) {
-					points.push({
-						...this.points[2],
-						m: true
-					});
-					points.push(this.points[3]);
-				}
-				
-				if(this.style.border.left) {
-					points.push({
-						...this.points[3],
-						m: true
-					});
-					points.push(this.points[0]);
-				}
-				points.length && this.webglControl && this.webglControl.stroke(points);
-			}
-		}	
 	}
 
 	endDraw() {