mirror of
https://github.com/konvajs/konva.git
synced 2025-09-19 19:07:59 +08:00
changed dashArray to dash. started chipping away at the Shape docs
This commit is contained in:
@@ -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());
|
||||||
|
280
src/Shape.js
280
src/Shape.js
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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);
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user