lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:00:36 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactored stroke and fill logic to eliminate duplicated logic

Browse Source
This commit is contained in:
Eric Rowell
2013-01-24 22:44:00 -08:00
parent 624ec25c29
commit c2e5f4c1b3
5 changed files with 59 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Canvas.js
View File

@@ -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();
}
}

2
src/Global.js
View File

@@ -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.

8
src/Shape.js
View File

@@ -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;

88
src/shapes/Text.js
View File

@@ -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']);

31
src/shapes/TextPath.js
View File

@@ -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