diff --git a/src/Context.js b/src/Context.js index 1b236c2a..d32b2cbb 100644 --- a/src/Context.js +++ b/src/Context.js @@ -424,7 +424,8 @@ Kinetic.SceneContext.prototype = { _fillColor: function(shape) { - var fill = shape.getFill(); + var fill = shape.fill() + || Kinetic.Util._rgbToHex(shape.fillRed(), shape.fillGreen(), shape.fillBlue()); this.setAttr('fillStyle', fill); shape._fillFunc(this); @@ -485,7 +486,7 @@ this.fill(); }, _fill: function(shape) { - var hasColor = shape.getFill(), + var hasColor = shape.fill() || shape.fillRed() || shape.fillGreen() || shape.fillBlue(), hasPattern = shape.getFillPatternImage(), hasLinearGradient = shape.getFillLinearGradientColorStops(), hasRadialGradient = shape.getFillRadialGradientColorStops(), @@ -519,9 +520,7 @@ } }, _stroke: function(shape) { - var stroke = shape.getStroke(), - strokeWidth = shape.getStrokeWidth(), - dashArray = shape.getDashArray(), + var dashArray = shape.getDashArray(), strokeScaleEnabled = shape.getStrokeScaleEnabled(); if(shape.hasStroke()) { @@ -530,14 +529,15 @@ this.setTransform(1, 0, 0, 1, 0, 0); } - ///////////////////// this._applyLineCap(shape); if(dashArray && shape.getDashArrayEnabled()) { this.setLineDash(dashArray); } - this.setAttr('lineWidth', strokeWidth || 2); - this.setAttr('strokeStyle', stroke || 'black'); + this.setAttr('lineWidth', shape.strokeWidth()); + this.setAttr('strokeStyle', shape.stroke() + || Kinetic.Util._rgbToHex(shape.strokeRed(), shape.strokeGreen(), shape.strokeBlue())); + shape._strokeFunc(this); if (!strokeScaleEnabled) { @@ -581,12 +581,9 @@ this.restore(); }, _stroke: function(shape) { - var stroke = shape.getStroke(), - strokeWidth = shape.getStrokeWidth(); - - if(stroke || strokeWidth) { + if(shape.hasStroke()) { this._applyLineCap(shape); - this.setAttr('lineWidth', strokeWidth || 2); + this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('strokeStyle', shape.colorKey); shape._strokeFuncHit(this); } diff --git a/src/Factory.js b/src/Factory.js index 12408a2a..99a7568e 100644 --- a/src/Factory.js +++ b/src/Factory.js @@ -98,7 +98,7 @@ if (afterFunc) { afterFunc.call(this); } - + this._fireChangeEvent(attr, oldVal, val); return this; @@ -123,88 +123,6 @@ return this[getter](); } } - }, - - - - - - - - - - - - - addColorGetterSetter: function(constructor, attr) { - this.addGetter(constructor, attr); - this.addSetter(constructor, attr); - this.addOverloadedGetterSetter(constructor, attr); - - // component getters - this.addColorRGBGetter(constructor, attr); - this.addColorComponentGetter(constructor, attr, R); - this.addColorComponentGetter(constructor, attr, G); - this.addColorComponentGetter(constructor, attr, B); - - // component setters - this.addColorRGBSetter(constructor, attr); - this.addColorComponentSetter(constructor, attr, R); - this.addColorComponentSetter(constructor, attr, G); - this.addColorComponentSetter(constructor, attr, B); - - // overloaders - this.addOverloadedGetterSetter(constructor, attr + RGB); - this.addOverloadedGetterSetter(constructor, attr + UPPER_R); - this.addOverloadedGetterSetter(constructor, attr + UPPER_G); - this.addOverloadedGetterSetter(constructor, attr + UPPER_B); - }, - addFilterGetterSetter: function(constructor, attr, def) { - this.addGetter(constructor, attr, def); - this.addFilterSetter(constructor, attr); - this.addOverloadedGetterSetter(constructor, attr); - }, - - // getter adders - addColorRGBGetter: function(constructor, attr) { - var method = GET + Kinetic.Util._capitalize(attr) + RGB; - constructor.prototype[method] = function() { - return Kinetic.Util.getRGB(this.attrs[attr]); - }; - }, - - addColorComponentGetter: function(constructor, attr, c) { - var prefix = GET + Kinetic.Util._capitalize(attr), - method = prefix + Kinetic.Util._capitalize(c); - constructor.prototype[method] = function() { - return this[prefix + RGB]()[c]; - }; - }, - - - // setter adders - addColorRGBSetter: function(constructor, attr) { - var method = SET + Kinetic.Util._capitalize(attr) + RGB; - - constructor.prototype[method] = function(obj) { - var r = obj && obj.r !== undefined ? obj.r | 0 : this.getAttr(attr + UPPER_R), - g = obj && obj.g !== undefined ? obj.g | 0 : this.getAttr(attr + UPPER_G), - b = obj && obj.b !== undefined ? obj.b | 0 : this.getAttr(attr + UPPER_B); - - this._setAttr(attr, HASH + Kinetic.Util._rgbToHex(r, g, b)); - return this; - }; - }, - - addColorComponentSetter: function(constructor, attr, c) { - var prefix = SET + Kinetic.Util._capitalize(attr), - method = prefix + Kinetic.Util._capitalize(c); - constructor.prototype[method] = function(val) { - var obj = {}; - obj[c] = val; - this[prefix + RGB](obj); - return this; - }; } }; })(); \ No newline at end of file diff --git a/src/Shape.js b/src/Shape.js index 16896c18..7a765ca2 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -97,7 +97,7 @@ * @returns {Boolean} */ hasStroke: function() { - return !!(this.getStroke() || this.getStrokeWidth()); + return !!(this.stroke() || this.strokeRed() || this.strokeGreen() || this.strokeBlue()); }, _get: function(selector) { return this.className === selector || this.nodeType === selector ? [this] : []; @@ -271,7 +271,7 @@ Kinetic.Util.extend(Kinetic.Shape, Kinetic.Node); // add getters and setters - Kinetic.Factory.addColorGetterSetter(Kinetic.Shape, 'stroke'); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'stroke'); /** * set stroke color @@ -365,6 +365,29 @@ * @returns {Integer} */ + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeRed', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeGreen', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeBlue', 0); + + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeWidth', 2); + + /** + * set stroke width + * @name setStrokeWidth + * @method + * @memberof Kinetic.Shape.prototype + * @param {Number} strokeWidth + * @returns {Kineitc.Shape} + */ + + /** + * get stroke width + * @name getStrokeWidth + * @method + * @memberof Kinetic.Shape.prototype + * @returns {Number} + */ + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'lineJoin'); /** @@ -405,25 +428,6 @@ * @returns {String} */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeWidth'); - - /** - * set stroke width - * @name setStrokeWidth - * @method - * @memberof Kinetic.Shape.prototype - * @param {Number} strokeWidth - * @returns {Kineitc.Shape} - */ - - /** - * get stroke width - * @name getStrokeWidth - * @method - * @memberof Kinetic.Shape.prototype - * @returns {Number} - */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'sceneFunc'); /** @@ -488,7 +492,7 @@ * @returns {Array} */ - Kinetic.Factory.addColorGetterSetter(Kinetic.Shape, 'shadowColor'); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowColor'); /** * set shadow color @@ -581,6 +585,10 @@ * @returns {String} */ + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowColorRed'); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowColorGreen'); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowColorBlue'); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlur'); /** @@ -704,7 +712,7 @@ * @returns {Image} */ - Kinetic.Factory.addColorGetterSetter(Kinetic.Shape, 'fill'); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fill'); /** * set fill color @@ -797,6 +805,10 @@ * @returns {Number} */ + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRed', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillGreen', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillBlue', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternX', 0); /** diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js index e4149616..832aff83 100644 --- a/test/unit/Shape-test.js +++ b/test/unit/Shape-test.js @@ -9,67 +9,45 @@ suite('Shape', function() { y: 90, width: 100, height: 50, - fill: 'green', - stroke: 'red' - + fillGreen: 128, + strokeRed: 255, + draggable: true }); layer.add(rect); stage.add(layer); - // test component getters - assert.equal(rect.getFillRGB().r, 0, 'rect fill RGB.r should be 0'); - assert.equal(rect.getFillRGB().g, 128, 'rect fill RGB.g should be 128'); - assert.equal(rect.getFillRGB().b, 0, 'rect fill RGB.b should be 0'); + assert.equal(rect.getFillRed(), 0, 'rect fill r should be 0'); + assert.equal(rect.getFillGreen(), 128, 'rect fill g should be 128'); + assert.equal(rect.getFillBlue(), 0, 'rect fill b should be 0'); - assert.equal(rect.getFillR(), 0, 'rect fill r should be 0'); - assert.equal(rect.getFillG(), 128, 'rect fill g should be 128'); - assert.equal(rect.getFillB(), 0, 'rect fill b should be 0'); + assert.equal(rect.getStrokeRed(), 255, 'rect stroke r should be 255'); + assert.equal(rect.getStrokeGreen(), 0, 'rect stroke g should be 0'); + assert.equal(rect.getStrokeBlue(), 0, 'rect stroke b should be 0'); - assert.equal(rect.getStrokeR(), 255, 'rect stroke r should be 255'); - assert.equal(rect.getStrokeG(), 0, 'rect stroke g should be 0'); - assert.equal(rect.getStrokeB(), 0, 'rect stroke b should be 0'); + rect.fillRed(130); + assert.equal(rect.fillRed(), 130, 'rect fill r should be 130'); - rect.setFill('#008000'); - rect.setStroke('#ff0000'); + rect.fillGreen(140); + assert.equal(rect.fillGreen(), 140, 'rect fill g should be 140'); - assert.equal(rect.getFillR(), 0, 'rect fill r should be 0'); - assert.equal(rect.getFillG(), 128, 'rect fill g should be 128'); - assert.equal(rect.getFillB(), 0, 'rect fill b should be 0'); + rect.fillBlue(150); + assert.equal(rect.fillBlue(), 150, 'rect fill b should be 150'); - assert.equal(rect.getStrokeR(), 255, 'rect stroke r should be 255'); - assert.equal(rect.getStrokeG(), 0, 'rect stroke g should be 0'); - assert.equal(rect.getStrokeB(), 0, 'rect stroke b should be 0'); + rect.fillRed(0); + rect.fillGreen(128); + rect.fillBlue(0); - rect.setFill('rgb(0,128,0)'); - rect.setStroke('rgb(255, 0, 0)'); + // var tween = new Kinetic.Tween({ + // node: rect, + // fillGreen: 0, + // fillRed: 255, + // duration: 2 + // }); - assert.equal(rect.getFillR(), 0, 'rect fill r should be 0'); - assert.equal(rect.getFillG(), 128, 'rect fill g should be 128'); - assert.equal(rect.getFillB(), 0, 'rect fill b should be 0'); + // tween.play(); - assert.equal(rect.getStrokeR(), 255, 'rect stroke r should be 255'); - assert.equal(rect.getStrokeG(), 0, 'rect stroke g should be 0'); - assert.equal(rect.getStrokeB(), 0, 'rect stroke b should be 0'); - - // test setters - rect.setFillRGB({ - r: 100, - b: 200 - }); - - assert.equal(rect.getFillR(), 100, 'rect fill r should be 100'); - assert.equal(rect.getFillG(), 128, 'rect fill g should be 128'); - assert.equal(rect.getFillB(), 200, 'rect fill b should be 200'); - - rect.setFillR(130); - assert.equal(rect.getFillR(), 130, 'rect fill r should be 130'); - - rect.setFillG(140); - assert.equal(rect.getFillG(), 140, 'rect fill g should be 140'); - - rect.setFillB(150); - assert.equal(rect.getFillB(), 150, 'rect fill b should be 150'); + layer.draw(); }); // ====================================================== @@ -507,19 +485,14 @@ suite('Shape', function() { rect.stroke('blue'); assert.equal(rect.stroke(), 'blue'); - rect.strokeR(255); - assert.equal(rect.strokeR(), 255); + rect.strokeRed(255); + assert.equal(rect.strokeRed(), 255); - rect.strokeG(20); - assert.equal(rect.strokeG(), 20); + rect.strokeGreen(20); + assert.equal(rect.strokeGreen(), 20); - rect.strokeB(30); - assert.equal(rect.strokeB(), 30); - - rect.strokeRGB({r: 1, g: 2, b: 3}); - assert.equal(rect.strokeRGB().r, 1); - assert.equal(rect.strokeRGB().g, 2); - assert.equal(rect.strokeRGB().b, 3); + rect.strokeBlue(30); + assert.equal(rect.strokeBlue(), 30); rect.lineJoin('bevel'); assert.equal(rect.lineJoin(), 'bevel'); diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 2a04051f..3bf3e519 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -293,6 +293,8 @@ suite('Blur', function() { draggable: true }); + //console.log(darth.hasStroke()) + layer.add(darth); stage.add(layer); @@ -304,7 +306,7 @@ suite('Blur', function() { showCanvas(darth._cache.canvas.hit._canvas); - //console.log(darth._cache.canvas.hit.getContext().getTrace(true)); + //console.log(darth._cache.canvas.hit.getContext().getTrace()); assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');