basic stroke path support for lines and rects

fugazister · Mar 15, 2011 · 96f4b2d · 96f4b2d
1 parent 170d951
commit 96f4b2d
Showing 1 changed file with 59 additions and 6 deletions.
diff --git a/webgl-2d.js b/webgl-2d.js
@@ -452,6 +452,9 @@
   var rectVertexPositionBuffer;
   var rectVertexColorBuffer;
 
+  var pathVertexPositionBuffer;
+  var pathVertexColorBuffer;
+
   // 2D Vertices and Texture UV coords
   var rectVerts = new Float32Array([
       0,0, 0,0, 
@@ -466,6 +469,9 @@
     rectVertexPositionBuffer  = gl.createBuffer();
     rectVertexColorBuffer     = gl.createBuffer();
 
+    pathVertexPositionBuffer  = gl.createBuffer();
+    pathVertexColorBuffer     = gl.createBuffer();
+
     gl.bindBuffer(gl.ARRAY_BUFFER, rectVertexPositionBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, rectVerts, gl.STATIC_DRAW);
   };
@@ -482,6 +488,13 @@
     var gl2d = this,
         gl   = this.gl;
 
+
+    // Rendering Canvas for text fonts
+    var textCanvas    = document.createElement("canvas");
+    textCanvas.width  = gl2d.canvas.width;
+    textCanvas.height = gl2d.canvas.height;
+    var textCtx       = textCanvas.getContext("2d");
+
     var reRGBAColor = /^rgb(a)?\(\s*([\d]+)(%)?,\s*([\d]+)(%)?,\s*([\d]+)(%)?,?\s*([\d\.]+)?\s*\)$/;
     var reHex6Color = /^#([0-9A-Fa-f]{6})$/;
     var reHex3Color = /^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/;
@@ -629,6 +642,7 @@
     Object.defineProperty(gl, "font", {
       get: function() { return drawState.font; },
       set: function(value) {
+        textCtx.font = value;
         drawState.font = value;
       }
     });
@@ -671,8 +685,14 @@
       }
     });
 
+    gl.fillText = function fillText(text, x, y) {
+      x = isNaN(x) ? 0 : x;
+      textCtx.clearRect(0, 0, gl2d.canvas.width, gl2d.canvas.height);
+      textCtx.fillStyle = gl.fillStyle;
+      textCtx.fillText(text, x, y);
 
-    gl.fillText = function fillText() {};
+      //gl.drawImage(textCanvas, 0, 0);
+    };
 
     gl.strokeText = function strokeText() {};
 
@@ -801,7 +821,7 @@
 
     function SubPath(x, y) {
       this.closed = false;
-      this.verts = [[x, y]];
+      this.verts = [x, y, 0, 0];
     }
 
     // Empty the list of subpaths so that the context once again has zero subpaths
@@ -813,7 +833,7 @@
     gl.closePath = function closePath() {
       if (subPaths.length) {
         // Mark last subpath closed.
-        var prevPath = subPaths[subPaths.length -1], startX = prevPath.verts[0][0], startY = prevPath.verts[0][1];
+        var prevPath = subPaths[subPaths.length -1], startX = prevPath.verts[0], startY = prevPath.verts[1];
         prevPath.closed = true;
 
         // Create new subpath using the starting position of previous subpath
@@ -829,7 +849,7 @@
 
     gl.lineTo = function lineTo(x, y) {
       if (subPaths.length) {
-        subPaths[subPaths.length -1].verts.push([x, y]);
+        subPaths[subPaths.length -1].verts.push(x, y, 0, 0);
       } else {
         // Create a new subpath if none currently exist
         gl.moveTo(x, y);
@@ -853,9 +873,42 @@
 
     gl.arc = function arc() {};
 
-    gl.fill = function fill() {};
+    gl.fill = function fill() {
+      // only fill closed sub paths
+    };
+
+    function strokeSubPath(index) {
+      var transform = gl2d.transform;
+      var shaderProgram = gl2d.initShaders(transform.c_stack + 2,0);
+
+      var subPath = subPaths[index];
+      var verts = subPath.verts;      
+
+      gl.bindBuffer(gl.ARRAY_BUFFER, pathVertexPositionBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
 
-    gl.stroke = function stroke() {};
+      gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 4, gl.FLOAT, false, 0, 0);
+
+      transform.pushMatrix();
+
+      sendTransformStack(shaderProgram, transform);
+
+      gl.uniform4f(shaderProgram.uColor, drawState.strokeStyle[0], drawState.strokeStyle[1], drawState.strokeStyle[2], drawState.strokeStyle[3]);
+
+      if (subPath.closed) {
+        gl.drawArrays(gl.LINE_LOOP, 0, verts.length/4);
+      } else {
+        gl.drawArrays(gl.LINE_STRIP, 0, verts.length/4);
+      }
+
+      transform.popMatrix();
+    }
+
+    gl.stroke = function stroke() {
+      for(var i = 0; i < subPaths.length; i++) {
+        strokeSubPath(i);
+      }
+    };
 
     gl.clip = function clip() {};