changed dashArray to dash. started chipping away at the Shape docs

This commit is contained in:
Eric Rowell
2014-01-09 22:37:27 -08:00
parent 13b91d0db7
commit baf635c7f0
4 changed files with 141 additions and 169 deletions

View File

@@ -520,7 +520,7 @@
} }
}, },
_stroke: function(shape) { _stroke: function(shape) {
var dashArray = shape.getDashArray(), var dash = shape.dash(),
strokeScaleEnabled = shape.getStrokeScaleEnabled(); strokeScaleEnabled = shape.getStrokeScaleEnabled();
if(shape.hasStroke()) { if(shape.hasStroke()) {
@@ -530,8 +530,8 @@
} }
this._applyLineCap(shape); this._applyLineCap(shape);
if(dashArray && shape.getDashArrayEnabled()) { if(dash && shape.dashEnabled()) {
this.setLineDash(dashArray); this.setLineDash(dash);
} }
this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('lineWidth', shape.strokeWidth());

View File

@@ -274,223 +274,195 @@
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'stroke'); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'stroke');
/** /**
* set stroke color * get/set stroke color
* @name setStroke * @name stroke
* @method * @method
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
* @param {String} color * @param {String} color
* @returns {Kineitc.Shape} * @returns {String}
*/
/**
* set stroke color with an object literal
* @name setStrokeRGB
* @method
* @memberof Kinetic.Shape.prototype
* @param {Obect} color requires an object literal containing an r, g, and b component
* @returns {Kineitc.Shape}
* @example * @example
* shape.setStrokeRGB({<br> * // get stroke color
* r: 200,<br> * var stroke = shape.stroke();
* g: 50,<br> *
* b: 100<br> * // set stroke color with color string
* }); * shape.stroke('green');
*/ *
* // set stroke color with hex
/** * shape.stroke('#00ff00');
* set stroke color red component *
* @name setStrokeR * // set stroke color with rgb
* @method * shape.stroke('rgb(0,255,0)');
* @memberof Kinetic.Shape.prototype *
* @param {Integer} red * // set stroke color with rgba and make it 50% opaque
* @returns {Kineitc.Shape} * shape.stroke('rgba(0,255,0,0.5');
*/
/**
* set stroke color green component
* @name setStrokeG
* @method
* @memberof Kinetic.Shape.prototype
* @param {Integer} green
* @returns {Kineitc.Shape}
*/
/**
* set stroke color blue component
* @name setStrokeB
* @method
* @memberof Kinetic.Shape.prototype
* @param {Integer} blue
* @returns {Kineitc.Shape}
*/
/**
* get stroke color
* @name getStroke
* @method
* @memberof Kinetic.Shape.prototype
* @param {String} color
* @returns {Kineitc.Shape}
*/
/**
* get stroke color as an object literal
* @name getStrokeRGB
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Object}
*/
/**
* get stroke color red component
* @name getStrokeR
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Integer}
*/
/**
* get stroke color green component
* @name getStrokeG
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Integer}
*/
/**
* get stroke color blue component
* @name getStrokeB
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Integer}
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeRed', 0); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeRed', 0);
/**
* get/set stroke red component
* @name strokeRed
* @method
* @memberof Kinetic.Shape.prototype
* @param {Integer} red
* @returns {Integer}
* @example
* // get stroke red component
* var strokeRed = shape.strokeRed();
*
* // set stroke red component
* shape.strokeRed(0);
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeGreen', 0); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeGreen', 0);
/**
* get/set stroke green component
* @name strokeGreen
* @method
* @memberof Kinetic.Shape.prototype
* @param {Integer} green
* @returns {Integer}
* @example
* // get stroke green component
* var strokeGreen = shape.strokeGreen();
*
* // set stroke green component
* shape.strokeGreen(255);
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeBlue', 0); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeBlue', 0);
/**
* get/set stroke blue component
* @name strokeBlue
* @method
* @memberof Kinetic.Shape.prototype
* @param {Integer} blue
* @returns {Integer}
* @example
* // get stroke blue component
* var strokeBlue = shape.strokeBlue();
*
* // set stroke blue component
* shape.strokeBlue(0);
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeWidth', 2); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeWidth', 2);
/** /**
* set stroke width * get/set stroke width
* @name setStrokeWidth * @name strokeWidth
* @method * @method
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
* @param {Number} strokeWidth * @param {Number} strokeWidth
* @returns {Kineitc.Shape}
*/
/**
* get stroke width
* @name getStrokeWidth
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Number} * @returns {Number}
* @example
* // get stroke width
* var strokeWidth = shape.strokeWidth();
*
* // set stroke width
* shape.strokeWidth();
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'lineJoin'); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'lineJoin');
/** /**
* set line join * get/set line join. Can be miter, round, or bevel. The
* @name setLineJoin
* @method
* @memberof Kinetic.Shape.prototype
* @param {String} lineJoin. Can be miter, round, or bevel. The
* default is miter * default is miter
* @returns {Kineitc.Shape} * @name lineJoin
*/
/**
* get line join
* @name getLineJoin
* @method * @method
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
* @param {String} lineJoin
* @returns {String} * @returns {String}
* @example
* // get line join
* var lineJoin = shape.lineJoin();
*
* // set line join
* shape.lineJoin('round');
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'lineCap'); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'lineCap');
/** /**
* set line cap. Can be butt, round, or square * get/set line cap. Can be butt, round, or square
* @name setLineCap * @name lineCap
* @method * @method
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
* @param {String} lineCap * @param {String} lineCap
* @returns {Kineitc.Shape}
*/
/**
* get line cap
* @name getLineCap
* @method
* @memberof Kinetic.Shape.prototype
* @returns {String} * @returns {String}
* @example
* // get line cap
* var lineCap = shape.lineCap();
*
* // set line cap
* shape.lineCap('round');
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'sceneFunc'); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'sceneFunc');
/** /**
* set draw function * get/set scene draw function
* @name setDrawFunc * @name sceneFunc
* @method * @method
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
* @param {Function} drawFunc drawing function * @param {Function} drawFunc drawing function
* @returns {Kineitc.Shape}
*/
/**
* get draw function
* @name getDrawFunc
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Function} * @returns {Function}
* @example
* // get scene draw function
* var sceneFunc = shape.sceneFunc();
*
* // set scene draw function
* shape.sceneFunc(function(context) {
* context.beginPath();
* context.rect(0, 0, this.width(), this.height());
* context.closePath();
* context.fillStrokeShape(this);
* });
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'hitFunc'); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'hitFunc');
/** /**
* set draw hit function used for hit detection * get/set hit draw function
* @name setDrawHitFunc * @name hitFunc
* @method
* @memberof Kinetic.Shape.prototype
* @param {Function} drawHitFunc drawing function used for hit detection
* @returns {Kineitc.Shape}
*/
/**
* get draw hit function
* @name getDrawHitFunc
* @method * @method
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
* @param {Function} drawFunc drawing function
* @returns {Function} * @returns {Function}
* @example
* // get hit draw function
* var hitFunc = shape.hitFunc();
*
* // set hit draw function
* shape.hitFunc(function(context) {
* context.beginPath();
* context.rect(0, 0, this.width(), this.height());
* context.closePath();
* context.fillStrokeShape(this);
* });
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'dashArray'); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'dash');
/** /**
* set dash array for stroke. * get/set dash array for stroke.
* @name setDashArray * @name dash
* @method * @method
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
* @param {Array} dashArray * @param {Array} dash
* @returns {Array}
* @example * @example
* // stroke dashes will be 10px long and 5 pixels apart<br> * // apply dashed stroke that is 10px long and 5 pixels apart<br>
* line.setDashArray([10, 5]);<br><br> * line.dash([10, 5]);<br><br>
* *
* // stroke dashes will be be made up of alternating dashed<br> * // apply dashed stroke that is made up of alternating dashed<br>
* // lines that are 10px long and 20px apart, and dots that have<br> * // lines that are 10px long and 20px apart, and dots that have<br>
* // a radius of 5px and are 20px apart<br> * // a radius of 5px and are 20px apart<br>
* line.setDashArray([10, 20, 0.001, 20]); * line.dash([10, 20, 0.001, 20]);
*/ */
/**
* get dash array
* @name getDashArray
* @method
* @memberof Kinetic.Shape.prototype
* @returns {Array}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowColor'); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowColor');
@@ -999,7 +971,7 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'dashArrayEnabled', true); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'dashEnabled', true);
/** /**
* set dash array enabled * set dash array enabled

View File

@@ -317,7 +317,7 @@ suite('Shape', function() {
shadowColor: 'black', shadowColor: 'black',
shadowBlur: 10, shadowBlur: 10,
shadowOffset: {x:10, y:10}, shadowOffset: {x:10, y:10},
dashArray: [10, 10], dash: [10, 10],
scaleX: 3 scaleX: 3
}); });
layer.add(circle); layer.add(circle);
@@ -327,7 +327,7 @@ suite('Shape', function() {
assert.equal(circle.getFillEnabled(), true, 'fillEnabled should be true'); assert.equal(circle.getFillEnabled(), true, 'fillEnabled should be true');
assert.equal(circle.getStrokeEnabled(), true, 'strokeEnabled should be true'); assert.equal(circle.getStrokeEnabled(), true, 'strokeEnabled should be true');
assert.equal(circle.getShadowEnabled(), true, 'shadowEnabled should be true'); assert.equal(circle.getShadowEnabled(), true, 'shadowEnabled should be true');
assert.equal(circle.getDashArrayEnabled(), true, 'dashArrayEnabled should be true'); assert.equal(circle.dashEnabled(), true, 'dashEnabled should be true');
circle.strokeScaleEnabled(false); circle.strokeScaleEnabled(false);
assert.equal(circle.getStrokeScaleEnabled(), false); assert.equal(circle.getStrokeScaleEnabled(), false);
@@ -347,13 +347,13 @@ suite('Shape', function() {
circle.shadowEnabled(false); circle.shadowEnabled(false);
assert.equal(circle.getShadowEnabled(), false, 'shadowEnabled should be false'); assert.equal(circle.getShadowEnabled(), false, 'shadowEnabled should be false');
circle.dashArrayEnabled(false); circle.dashEnabled(false);
assert.equal(circle.getDashArrayEnabled(), false, 'dashArrayEnabled should be false'); assert.equal(circle.dashEnabled(), false, 'dashEnabled should be false');
// re-enable // re-enable
circle.dashArrayEnabled(true); circle.dashEnabled(true);
assert.equal(circle.getDashArrayEnabled(), true, 'dashArrayEnabled should be true'); assert.equal(circle.getDashEnabled(), true, 'dashEnabled should be true');
circle.shadowEnabled(true); circle.shadowEnabled(true);
assert.equal(circle.getShadowEnabled(), true, 'shadowEnabled should be true'); assert.equal(circle.getShadowEnabled(), true, 'shadowEnabled should be true');
@@ -509,8 +509,8 @@ suite('Shape', function() {
rect.hitFunc('function'); rect.hitFunc('function');
assert.equal(rect.hitFunc(), 'function'); assert.equal(rect.hitFunc(), 'function');
rect.dashArray([1]); rect.dash([1]);
assert.equal(rect.dashArray()[0], 1); assert.equal(rect.dash()[0], 1);
// NOTE: skipping the rest because it would take hours to test all possible methods. // NOTE: skipping the rest because it would take hours to test all possible methods.
// This should hopefully be enough to test Factor overloaded methods // This should hopefully be enough to test Factor overloaded methods

View File

@@ -94,7 +94,7 @@ suite('Line', function() {
lineCap: 'round', lineCap: 'round',
lineJoin: 'round', lineJoin: 'round',
draggable: true, draggable: true,
dashArray: [30, 10, 0, 10, 10, 20], dash: [30, 10, 0, 10, 10, 20],
shadowColor: '#aaa', shadowColor: '#aaa',
shadowBlur: 10, shadowBlur: 10,
shadowOffset: {x:20, y:20} shadowOffset: {x:20, y:20}
@@ -104,9 +104,9 @@ suite('Line', function() {
layer.add(line); layer.add(line);
stage.add(layer); stage.add(layer);
assert.equal(line.getDashArray().length, 6); assert.equal(line.dash().length, 6);
line.setDashArray([10, 10]); line.dash([10, 10]);
assert.equal(line.getDashArray().length, 2); assert.equal(line.dash().length, 2);
assert.equal(line.getPoints().length, 8); assert.equal(line.getPoints().length, 8);