From a7740ba96ec99b101342715852ac7b766a847b00 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sun, 1 Dec 2013 23:08:15 -0800 Subject: [PATCH] copying over chunks of code from arrays branch --- src/Factory.js | 81 +++++++++++++++++++++++++++-------- src/Util.js | 49 ++++++++++----------- src/shapes/Line.js | 80 +++++++++++++++++++++------------- test/unit/shapes/Line-test.js | 40 ++++------------- 4 files changed, 145 insertions(+), 105 deletions(-) diff --git a/src/Factory.js b/src/Factory.js index cb06acb9..d99a84e5 100644 --- a/src/Factory.js +++ b/src/Factory.js @@ -42,11 +42,70 @@ Y = 'y'; Kinetic.Factory = { - // getter setter adders - addGetterSetter: function(constructor, attr, def) { - this.addGetter(constructor, attr, def); - this.addSetter(constructor, attr); + addGetterSetter: function() { + var constructor = arguments[0], + baseAttr = arguments[1], + util = Kinetic.Util, + def, component, index; + + // base method + if (arguments.length <= 3) { + def = arguments[2]; + if (util._isArray(def)) { + def = util.cloneArray(def); + } + this.addGetter(constructor, baseAttr, def); + this.addSetter(constructor, baseAttr); + } + // component method + else { + component = arguments[2]; + index = arguments[3]; + def = arguments[4]; + this.addComponentGetter(constructor, baseAttr, component, index, def); + this.addComponentSetter(constructor, baseAttr, component, index); + } }, + addGetter: function(constructor, baseAttr, def) { + var method = GET + Kinetic.Util._capitalize(baseAttr); + + constructor.prototype[method] = function() { + var val = this.attrs[baseAttr]; + return val === undefined ? def : val; + }; + }, + addSetter: function(constructor, baseAttr) { + var method = SET + Kinetic.Util._capitalize(baseAttr); + + constructor.prototype[method] = function(val) { + this._setAttr(baseAttr, val); + }; + }, + addComponentGetter: function(constructor, baseAttr, component, index, def) { + var method = GET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component); + + constructor.prototype[method] = function() { + var base = this.attrs[baseAttr], + val = base && base[index]; + return val === undefined ? def : val; + }; + }, + addComponentSetter: function(constructor, baseAttr, component, index) { + var method = SET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component); + + constructor.prototype[method] = function(val) { + this._setComponentAttr(baseAttr, index, val); + }; + }, + + + + + + // ------------------------------- old methods to be deprecated ----------------------------------- + + + addPointGetterSetter: function(constructor, attr, def) { this.addPointGetter(constructor, attr, def); this.addPointSetter(constructor, attr); @@ -122,15 +181,7 @@ return val === undefined ? [] : val; }; }, - addGetter: function(constructor, attr, def) { - var that = this, - method = GET + Kinetic.Util._capitalize(attr); - constructor.prototype[method] = function() { - var val = this.attrs[attr]; - return val === undefined ? def : val; - }; - }, addPointGetter: function(constructor, attr) { var that = this, baseMethod = GET + Kinetic.Util._capitalize(attr); @@ -208,13 +259,7 @@ this._setAttr('points', points); }; }, - addSetter: function(constructor, attr) { - var method = SET + Kinetic.Util._capitalize(attr); - constructor.prototype[method] = function(val) { - this._setAttr(attr, val); - }; - }, addPointSetter: function(constructor, attr) { var that = this, baseMethod = SET + Kinetic.Util._capitalize(attr); diff --git a/src/Util.js b/src/Util.js index cf548101..8325ecaa 100644 --- a/src/Util.js +++ b/src/Util.js @@ -690,6 +690,9 @@ } return retObj; }, + cloneArray: function(arr) { + return arr.slice(0); + }, _degToRad: function(deg) { return deg * PI_OVER_DEG180; }, @@ -732,39 +735,31 @@ constructor.prototype[key] = methods[key]; } }, - _getControlPoints: function(p0, p1, p2, t) { - var x0 = p0.x; - var y0 = p0.y; - var x1 = p1.x; - var y1 = p1.y; - var x2 = p2.x; - var y2 = p2.y; - var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)); - var d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); - var fa = t * d01 / (d01 + d12); - var fb = t * d12 / (d01 + d12); - var p1x = x1 - fa * (x2 - x0); - var p1y = y1 - fa * (y2 - y0); - var p2x = x1 + fb * (x2 - x0); - var p2y = y1 + fb * (y2 - y0); - return [{ - x: p1x, - y: p1y - }, { - x: p2x, - y: p2y - }]; + _getControlPoints: function(x0, y0, x1, y1, x2, y2, t) { + var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)), + d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)), + fa = t * d01 / (d01 + d12), + fb = t * d12 / (d01 + d12), + p1x = x1 - fa * (x2 - x0), + p1y = y1 - fa * (y2 - y0), + p2x = x1 + fb * (x2 - x0), + p2y = y1 + fb * (y2 - y0); + + return [p1x ,p1y, p2x, p2y]; }, - _expandPoints: function(points, tension) { - var length = points.length, + _expandPoints: function(p, tension) { + var len = p.length, allPoints = [], n, cp; - for(n = 1; n < length - 1; n++) { - cp = Kinetic.Util._getControlPoints(points[n - 1], points[n], points[n + 1], tension); + for (n=2; n 2) { + if(tension !== 0 && length > 4) { tp = this.getTensionPoints(); len = tp.length; - n = closed ? 0 : 2; + n = closed ? 0 : 4; if (!closed) { - context.quadraticCurveTo(tp[0].x, tp[0].y, tp[1].x, tp[1].y); + context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]); } - while(n < len - 1) { - context.bezierCurveTo(tp[n].x, tp[n++].y, tp[n].x, tp[n++].y, tp[n].x, tp[n++].y); + while(n < len - 2) { + context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]); } if (!closed) { - context.quadraticCurveTo(tp[len - 1].x, tp[len - 1].y, points[length - 1].x, points[length - 1].y); + context.quadraticCurveTo(tp[len-2], tp[len-1], points[length-2], points[length-1]); } } // no tension else { - for(n = 1; n < length; n++) { - point = points[n]; - context.lineTo(point.x, point.y); + for(n = 2; n < length; n+=2) { + context.lineTo(points[n], points[n+1]); } } @@ -93,25 +92,48 @@ } }, _getTensionPointsClosed: function() { - var points = this.getPoints(), - length = points.length, + var p = this.getPoints(), + len = p.length, tension = this.getTension(), util = Kinetic.Util, - firstControlPoints = util._getControlPoints(points[length - 1], points[0], points[1], tension), - lastControlPoints = util._getControlPoints(points[length - 2], points[length - 1], points[0], tension), - tensionPoints = Kinetic.Util._expandPoints(points, tension); - - // prepend control point - tensionPoints.unshift(firstControlPoints[1]); - - // append cp, point, cp, cp, first point - tensionPoints.push(lastControlPoints[0]); - tensionPoints.push(points[length - 1]); - tensionPoints.push(lastControlPoints[1]); - tensionPoints.push(firstControlPoints[0]); - tensionPoints.push(points[0]); - - return tensionPoints; + firstControlPoints = util._getControlPoints( + p[len-2], + p[len-1], + p[0], + p[1], + p[2], + p[3], + tension + ), + lastControlPoints = util._getControlPoints( + p[len-4], + p[len-3], + p[len-2], + p[len-1], + p[0], + p[1], + tension + ), + middle = Kinetic.Util._expandPoints(p, tension), + tp = [ + firstControlPoints[2], + firstControlPoints[3] + ] + .concat(middle) + .concat([ + lastControlPoints[0], + lastControlPoints[1], + p[len-2], + p[len-1], + lastControlPoints[2], + lastControlPoints[3], + firstControlPoints[0], + firstControlPoints[1], + p[0], + p[1] + ]); + + return tp; } }; Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape); @@ -153,7 +175,7 @@ * @param {Number} tension */ - Kinetic.Factory.addPointsGetterSetter(Kinetic.Line, 'points'); + Kinetic.Factory.addGetterSetter(Kinetic.Line, 'points'); /** * get points array * @name getPoints @@ -170,4 +192,4 @@ * @param {Array} can be an array of point objects or an array * of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4] */ -})(); +})(); \ No newline at end of file diff --git a/test/unit/shapes/Line-test.js b/test/unit/shapes/Line-test.js index 2e83d354..e98dae2b 100644 --- a/test/unit/shapes/Line-test.js +++ b/test/unit/shapes/Line-test.js @@ -4,16 +4,8 @@ suite('Line', function() { var stage = addStage(); var layer = new Kinetic.Layer(); - var points = [{ - x: 73, - y: 160 - }, { - x: 340, - y: 23 - }]; - var line = new Kinetic.Line({ - points: points, + points: [73,160,340,23], stroke: 'blue', strokeWidth: 20, lineCap: 'round', @@ -26,19 +18,13 @@ suite('Line', function() { stage.add(layer); line.setPoints([1, 2, 3, 4]); - assert.equal(line.getPoints()[0].x, 1); + assert.equal(line.getPoints()[0], 1); - line.setPoints([{ - x: 5, - y: 6 - }, { - x: 7, - y: 8 - }]); - assert.equal(line.getPoints()[0].x, 5); + line.setPoints([5,6,7,8]); + assert.equal(line.getPoints()[0], 5); line.setPoints([73, 160, 340, 23, 340, 80]); - assert.equal(line.getPoints()[0].x, 73); + assert.equal(line.getPoints()[0], 73); assert.equal(line.getClassName(), 'Line'); @@ -74,8 +60,8 @@ suite('Line', function() { layer.add(line).add(redLine); stage.add(layer); - assert.equal(line.getPoints()[0].x, 0); - assert.equal(redLine.getPoints()[0].x, 4); + assert.equal(line.getPoints()[0], 0); + assert.equal(redLine.getPoints()[0], 4); }); @@ -122,7 +108,7 @@ suite('Line', function() { line.setDashArray([10, 10]); assert.equal(line.getDashArray().length, 2); - assert.equal(line.getPoints().length, 4); + assert.equal(line.getPoints().length, 8); }); @@ -131,16 +117,8 @@ suite('Line', function() { var stage = addStage(); var layer = new Kinetic.Layer(); - var points = [{ - x: 73, - y: 160 - }, { - x: 340, - y: 23 - }]; - var line = new Kinetic.Line({ - points: points, + points: [73,160,340,23], stroke: 'blue', strokeWidth: 20, lineCap: 'round',