From c2e5f4c1b3111268f1bd840ed07e75aa52218d00 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Thu, 24 Jan 2013 22:44:00 -0800 Subject: [PATCH] refactored stroke and fill logic to eliminate duplicated logic --- src/Canvas.js | 14 +++---- src/Global.js | 2 +- src/Shape.js | 8 ++++ src/shapes/Text.js | 88 ++++++++++++------------------------------ src/shapes/TextPath.js | 31 ++++++++------- 5 files changed, 59 insertions(+), 84 deletions(-) diff --git a/src/Canvas.js b/src/Canvas.js index 266d25aa..078b45b5 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -220,7 +220,7 @@ _fillColor: function(shape) { var context = this.context, fill = shape.getFill(); context.fillStyle = fill; - context.fill(context); + shape._fillFunc(context); }, _fillPattern: function(shape) { var context = this.context, fillPatternImage = shape.getFillPatternImage(), fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScale = shape.getFillPatternScale(), fillPatternRotation = shape.getFillPatternRotation(), fillPatternOffset = shape.getFillPatternOffset(), fillPatternRepeat = shape.getFillPatternRepeat(); @@ -239,7 +239,7 @@ } context.fillStyle = context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'); - context.fill(context); + context.fill(); }, _fillLinearGradient: function(shape) { var context = this.context, start = shape.getFillLinearGradientStartPoint(), end = shape.getFillLinearGradientEndPoint(), colorStops = shape.getFillLinearGradientColorStops(), grd = context.createLinearGradient(start.x, start.y, end.x, end.y); @@ -249,7 +249,7 @@ grd.addColorStop(colorStops[n], colorStops[n + 1]); } context.fillStyle = grd; - context.fill(context); + context.fill(); }, _fillRadialGradient: function(shape) { var context = this.context, start = shape.getFillRadialGradientStartPoint(), end = shape.getFillRadialGradientEndPoint(), startRadius = shape.getFillRadialGradientStartRadius(), endRadius = shape.getFillRadialGradientEndRadius(), colorStops = shape.getFillRadialGradientColorStops(), grd = context.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius); @@ -259,7 +259,7 @@ grd.addColorStop(colorStops[n], colorStops[n + 1]); } context.fillStyle = grd; - context.fill(context); + context.fill(); }, _fill: function(shape, skipShadow) { var context = this.context, fill = shape.getFill(), fillPatternImage = shape.getFillPatternImage(), fillLinearGradientStartPoint = shape.getFillLinearGradientStartPoint(), fillRadialGradientStartPoint = shape.getFillRadialGradientStartPoint(); @@ -303,7 +303,7 @@ } context.lineWidth = strokeWidth || 2; context.strokeStyle = stroke || 'black'; - context.stroke(context); + shape._strokeFunc(context); context.restore(); if(!skipShadow && shape.hasShadow()) { @@ -344,7 +344,7 @@ var context = this.context; context.save(); context.fillStyle = '#' + shape.colorKey; - context.fill(context); + shape._fillFunc(context); context.restore(); }, _stroke: function(shape) { @@ -354,7 +354,7 @@ context.save(); context.lineWidth = strokeWidth || 2; context.strokeStyle = '#' + shape.colorKey; - context.stroke(context); + shape._strokeFunc(context); context.restore(); } } diff --git a/src/Global.js b/src/Global.js index c48f1ef8..a48b5585 100644 --- a/src/Global.js +++ b/src/Global.js @@ -1,5 +1,5 @@ /** - * KineticJS JavaScript Library v@version + * KineticJS JavaScript Framework v@version * http://www.kineticjs.com/ * Copyright 2013, Eric Rowell * Licensed under the MIT or GPL Version 2 licenses. diff --git a/src/Shape.js b/src/Shape.js index 9ae5af9e..abeaa06f 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -66,6 +66,12 @@ Kinetic.Shape = function(config) { this._initShape(config); }; + function _fillFunc(context) { + context.fill(); + } + function _strokeFunc(context) { + context.stroke(); + } Kinetic.Shape.prototype = { _initShape: function(config) { @@ -77,6 +83,8 @@ }); this.nodeType = 'Shape'; + this._fillFunc = _fillFunc; + this._strokeFunc = _strokeFunc; // set colorKey var shapes = Kinetic.Global.shapes; diff --git a/src/shapes/Text.js b/src/shapes/Text.js index b90538c8..7a17e195 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -13,7 +13,7 @@ * @param {Number} [config.width] default is auto * @param {Number} [config.height] default is auto * @param {Number} [config.lineHeight] default is 1 - * + * * * @param {String} [config.fill] fill color * @@ -49,9 +49,9 @@ * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number * between 0 and 1 * @param {Array} [config.dashArray] - * - * - * + * + * + * * @param {Number} [config.x] * @param {Number} [config.y] * @param {Number} [config.width] @@ -76,6 +76,13 @@ this._initText(config); }; + function _fillFunc(context) { + context.fillText(this.partialText, 0, 0); + } + function _strokeFunc(context) { + context.strokeText(this.partialText, 0, 0); + } + Kinetic.Text.prototype = { _initText: function(config) { this.setDefaultAttrs({ @@ -92,9 +99,14 @@ }); this.dummyCanvas = document.createElement('canvas'); - + // call super constructor Kinetic.Shape.call(this, config); + + // overrides + this._fillFunc = _fillFunc; + this._strokeFunc = _strokeFunc; + this.shapeType = 'Text'; this._setDrawFuncs(); @@ -105,6 +117,7 @@ var attr = attrs[n]; this.on(attr + 'Change.kinetic', that._setTextData); } + that._setTextData(); }, drawFunc: function(canvas) { @@ -116,7 +129,7 @@ context.save(); context.translate(p, 0); context.translate(0, p + this.getTextHeight() / 2); - + // draw text lines for(var n = 0; n < textArr.length; n++) { var text = textArr[n]; @@ -130,18 +143,19 @@ context.translate((this.getWidth() - this._getTextSize(text).width - p * 2) / 2, 0); } - canvas.fillStrokeText(this, text); + this.partialText = text; + canvas.fillStroke(this); context.restore(); context.translate(0, lineHeightPx); } context.restore(); }, drawHitFunc: function(canvas) { - var context = canvas.getContext(), width = this.getWidth(), height = this.getHeight(); - + var context = canvas.getContext(), width = this.getWidth(), height = this.getHeight(); + context.beginPath(); - context.rect(0, 0, width, height); - context.closePath(); + context.rect(0, 0, width, height); + context.closePath(); canvas.fillStroke(this); }, /** @@ -268,58 +282,6 @@ }; Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape); - /* - * extend canvas renderers - */ - var fillText = function(shape, text, skipShadow) { - var textFill = shape.getFill(), context = this.context; - if(textFill) { - context.save(); - if(!skipShadow && shape.hasShadow()) { - this._applyShadow(shape); - } - context.fillStyle = textFill; - context.fillText(text, 0, 0); - context.restore(); - - if(!skipShadow && shape.hasShadow()) { - this.fillText(shape, text, true); - } - } - }; - var strokeText = function(shape, text, skipShadow) { - var textStroke = shape.getStroke(), textStrokeWidth = shape.getStrokeWidth(), context = this.context; - if(textStroke || textStrokeWidth) { - context.save(); - if(!skipShadow && shape.hasShadow()) { - this._applyShadow(shape); - } - - context.lineWidth = textStrokeWidth || 2; - context.strokeStyle = textStroke || 'black'; - context.strokeText(text, 0, 0); - context.restore(); - - if(!skipShadow && shape.hasShadow()) { - this.strokeText(shape, text, true); - } - } - }; - var fillStrokeText = function(shape, text) { - this.fillText(shape, text); - this.strokeText(shape, text, shape.hasShadow() && shape.getFill()); - }; - - // scene canvases - Kinetic.SceneCanvas.prototype.fillText = fillText; - Kinetic.SceneCanvas.prototype.strokeText = strokeText; - Kinetic.SceneCanvas.prototype.fillStrokeText = fillStrokeText; - - // hit canvases - Kinetic.HitCanvas.prototype.fillText = fillText; - Kinetic.HitCanvas.prototype.strokeText = strokeText; - Kinetic.HitCanvas.prototype.fillStrokeText = fillStrokeText; - // add getters setters Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight']); Kinetic.Node.addGetters(Kinetic.Text, ['text']); diff --git a/src/shapes/TextPath.js b/src/shapes/TextPath.js index 74889d0c..19b03c6c 100644 --- a/src/shapes/TextPath.js +++ b/src/shapes/TextPath.js @@ -9,7 +9,7 @@ * @param {Number} [config.fontSize] default is 12 * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal * @param {String} config.text - * + * * * @param {String} [config.fill] fill color * @@ -45,9 +45,9 @@ * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number * between 0 and 1 * @param {Array} [config.dashArray] - * - * - * + * + * + * * @param {Number} [config.x] * @param {Number} [config.y] * @param {Number} [config.width] @@ -71,6 +71,13 @@ Kinetic.TextPath = function(config) { this._initTextPath(config); }; + + function _fillFunc(context) { + context.fillText(this.partialText, 0, 0); + } + function _strokeFunc(context) { + context.strokeText(this.partialText, 0, 0); + } Kinetic.TextPath.prototype = { _initTextPath: function(config) { @@ -87,6 +94,11 @@ // call super constructor Kinetic.Shape.call(this, config); + + // overrides + this._fillFunc = _fillFunc; + this._strokeFunc = _strokeFunc; + this.shapeType = 'TextPath'; this._setDrawFuncs(); @@ -120,9 +132,8 @@ context.translate(p0.x, p0.y); context.rotate(glyphInfo[i].rotation); - - canvas.fillStrokeText(this, glyphInfo[i].text); - + this.partialText = glyphInfo[i].text; + canvas.fillStroke(this); context.restore(); //// To assist with debugging visually, uncomment following @@ -136,7 +147,6 @@ // context.lineTo(p1.x, p1.y); // context.stroke(); } - context.restore(); }, /** @@ -356,11 +366,6 @@ Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle']); Kinetic.Node.addGetters(Kinetic.TextPath, ['text']); - // reference Text methods - Kinetic.TextPath.prototype.fillText = Kinetic.Text.prototype.fillText; - Kinetic.TextPath.prototype.strokeText = Kinetic.Text.prototype.strokeText; - Kinetic.TextPath.prototype.fillStrokeText = Kinetic.Text.prototype.strokeText; - /** * set font family * @name setFontFamily