lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +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;

68
src/shapes/Text.js
View File

@@ -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({
@@ -95,6 +102,11 @@
// 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) {
@@ -130,7 +143,8 @@
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);
}
@@ -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']);

23
src/shapes/TextPath.js
View File

@@ -72,6 +72,13 @@
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) {
this.setDefaultAttrs({
@@ -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