From 75a862d305bc4502e22bc5aa65fa271143b8cf6c Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 31 May 2012 12:18:43 -0700 Subject: move all the subpath functions to its prototype, and first version of the pen path runtime --- js/lib/geom/sub-path.js | 311 ++++++++++++++++++++++++------------------------ 1 file changed, 156 insertions(+), 155 deletions(-) (limited to 'js/lib/geom') diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index a9034def..db115655 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js @@ -68,178 +68,179 @@ var GLSubpath = function GLSubpath() { this._selectedAnchorIndex = -1; this._SAMPLING_EPSILON = 0.5; //epsilon used for sampling the curve +}; //function GLSubpath ...class definition - // (current GeomObj complains if buildBuffers/render is added to GLSubpath prototype) - //buildBuffers - // Build the stroke vertices, normals, textures and colors - // Add that array data to the GPU using OpenGL data binding - this.buildBuffers = function () { - // return; //no need to do anything for now - }; - - //render - // specify how to render the subpath in Canvas2D - this.render = function () { - // get the world - var world = this.getWorld(); - if (!world) throw( "null world in subpath render" ); - if (!this._canvas){ - //set the canvas by querying the world - this._canvas = this.getWorld().getCanvas(); - } - // get the context - var ctx = world.get2DContext(); - if (!ctx) throw ("null context in subpath render"); - - var numAnchors = this.getNumAnchors(); - if (numAnchors === 0) { - return; //nothing to do for empty paths - } - this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation +GLSubpath.prototype = Object.create(GeomObj, {}); - var numPoints = this._Samples.length; - if (numPoints === 0){ - return; //nothing to do for empty paths - } - - //figure the size of the area we will draw into - var bboxWidth=0, bboxHeight=0; - bboxWidth = this._BBoxMax[0] - this._BBoxMin[0]; - bboxHeight = this._BBoxMax[1] - this._BBoxMin[1]; - - ctx.save(); - ctx.clearRect(0, 0, bboxWidth, bboxHeight); - - ctx.lineWidth = this._strokeWidth; - ctx.strokeStyle = "black"; - if (this._strokeColor) { - //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); - var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")"; - ctx.strokeStyle = strokeColorStr; - } +//buildBuffers +GLSubpath.prototype.buildBuffers = function () { + //no need to do anything for now (no WebGL) +}; - ctx.fillStyle = "white"; - if (this._fillColor){ - //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); - var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; - ctx.fillStyle = fillColorStr; - } - var lineCap = ['butt','round','square']; - ctx.lineCap = lineCap[1]; - var lineJoin = ['round','bevel','miter']; - ctx.lineJoin = lineJoin[0]; - - /* - commenting this out for now because of Chrome bug where coincident endpoints of bezier curve cause the curve to not be rendered - ctx.beginPath(); - var prevAnchor = this.getAnchor(0); - ctx.moveTo(prevAnchor.getPosX()-bboxMin[0],prevAnchor.getPosY()-bboxMin[1]); - for (var i = 1; i < numAnchors; i++) { - var currAnchor = this.getAnchor(i); - ctx.bezierCurveTo(prevAnchor.getNextX()-bboxMin[0],prevAnchor.getNextY()-bboxMin[1], currAnchor.getPrevX()-bboxMin[0], currAnchor.getPrevY()-bboxMin[1], currAnchor.getPosX()-bboxMin[0], currAnchor.getPosY()-bboxMin[1]); - prevAnchor = currAnchor; - } - if (this._isClosed === true) { - var currAnchor = this.getAnchor(0); - ctx.bezierCurveTo(prevAnchor.getNextX()-bboxMin[0],prevAnchor.getNextY()-bboxMin[1], currAnchor.getPrevX()-bboxMin[0], currAnchor.getPrevY()-bboxMin[1], currAnchor.getPosX()-bboxMin[0], currAnchor.getPosY()-bboxMin[1]); - prevAnchor = currAnchor; - ctx.fill(); - } - */ +//render +// specify how to render the subpath in Canvas2D +GLSubpath.prototype.render = function () { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in subpath render" ); + if (!this._canvas){ + //set the canvas by querying the world + this._canvas = this.getWorld().getCanvas(); + } + // get the context + var ctx = world.get2DContext(); + if (!ctx) throw ("null context in subpath render"); + var numAnchors = this.getNumAnchors(); + if (numAnchors === 0) { + return; //nothing to do for empty paths + } + this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation - ctx.beginPath(); - ctx.moveTo(this._Samples[0][0],this._Samples[0][1]); - for (var i=0;i