lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

finished up all of the context traces for a simple rectangle rendering, and added unit test

Browse Source
This commit is contained in:
Eric Rowell 2013-09-01 02:03:24 -07:00
parent 8c3a53dc9d
commit 0fc44eb3ff
6 changed files with 97 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/Context.js
View File

@ -3,8 +3,25 @@
OPEN_PAREN = '(', OPEN_PAREN = '(',
CLOSE_PAREN = ')', CLOSE_PAREN = ')',
EMPTY_STRING = '', EMPTY_STRING = '',
CONTEXT_METHODS = ['clearRect', 'rect', 'restore', 'save', 'setTransform', 'transform'], EQUALS = '=',
CONTEXT_PROPERTIES = ['fillStyle', 'lineWidth', 'strokeStyle']; SET = 'set',
CONTEXT_METHODS = [
'clearRect',
'fill',
'fillText',
'rect',
'restore',
'save',
'setTransform',
'stroke',
'strokeText',
'transform'
],
CONTEXT_PROPERTIES = [
'fillStyle',
'lineWidth',
'strokeStyle'
];
/** /**
* Canvas Context constructor * Canvas Context constructor
@ -73,7 +90,7 @@
* @memberof Kinetic.Context.prototype * @memberof Kinetic.Context.prototype
* @param {Kinetic.Shape} shape * @param {Kinetic.Shape} shape
*/ */
fill: function(shape) { fillShape: function(shape) {
if(shape.getFillEnabled()) { if(shape.getFillEnabled()) {
this._fill(shape); this._fill(shape);
} }
@ -84,7 +101,7 @@
* @memberof Kinetic.Context.prototype * @memberof Kinetic.Context.prototype
* @param {Kinetic.Shape} shape * @param {Kinetic.Shape} shape
*/ */
stroke: function(shape) { strokeShape: function(shape) {
if(shape.getStrokeEnabled()) { if(shape.getStrokeEnabled()) {
this._stroke(shape); this._stroke(shape);
} }
@ -159,10 +176,28 @@
container._drawChildren(this.getCanvas()); container._drawChildren(this.getCanvas());
this.restore(); this.restore();
}, },
// context property setters
setFillStyle: function(val) {
this._context.fillStyle = val;
},
setLineWidth: function(val) {
this._context.lineWidth = val;
},
setStrokeStyle: function(val) {
this._context.strokeStyle = val;
},
// context pass through methods // context pass through methods
clearRect: function(x, y, width, height) { clearRect: function(x, y, width, height) {
this._context.clearRect(x, y, width, height); this._context.clearRect(x, y, width, height);
}, },
fill: function() {
this._context.fill();
},
fillText: function(str, x, y) {
this._context.fillText(str, x, y);
},
rect: function(x, y, width, height) { rect: function(x, y, width, height) {
this._context.rect(x, y, width, height); this._context.rect(x, y, width, height);
}, },
@ -175,6 +210,12 @@
setTransform: function(a, b, c, d, e, f) { setTransform: function(a, b, c, d, e, f) {
this._context.setTransform(a, b, c, d, e, f); this._context.setTransform(a, b, c, d, e, f);
}, },
stroke: function() {
this._context.stroke();
},
strokeText: function(str, x, y) {
this._context.strokeText(str, x, y);
},
transform: function(a, b, c, d, e, f) { transform: function(a, b, c, d, e, f) {
this._context.transform(a, b, c, d, e, f); this._context.transform(a, b, c, d, e, f);
}, },
@ -199,9 +240,16 @@
// properties // properties
len = CONTEXT_PROPERTIES.length; len = CONTEXT_PROPERTIES.length;
for (n=0; n<len; n++) { for (n=0; n<len; n++) {
(function(contextProperty) {
var methodName = SET + Kinetic.Util._capitalize(contextProperty),
method = that[methodName];
that[methodName] = function(val) {
method.call(that, val);
that._trace(contextProperty + EQUALS + val);
};
})(CONTEXT_PROPERTIES[n]);
} }
} }
}; };
@ -215,8 +263,8 @@
var _context = this._context, var _context = this._context,
fill = shape.getFill(); fill = shape.getFill();
_context.fillStyle = fill; this.setFillStyle(fill);
shape._fillFunc(_context); shape._fillFunc(this);
}, },
_fillPattern: function(shape) { _fillPattern: function(shape) {
var _context = this._context, var _context = this._context,
@ -241,8 +289,8 @@
_context.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y); _context.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
} }
_context.fillStyle = _context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'); this.setFillStyle(_context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
_context.fill(); this.fill();
}, },
_fillLinearGradient: function(shape) { _fillLinearGradient: function(shape) {
var _context = this._context, var _context = this._context,
@ -256,8 +304,8 @@
for(var n = 0; n < colorStops.length; n += 2) { for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]); grd.addColorStop(colorStops[n], colorStops[n + 1]);
} }
_context.fillStyle = grd; this.setFillStyle(grd);
_context.fill(); this.fill();
} }
}, },
_fillRadialGradient: function(shape) { _fillRadialGradient: function(shape) {
@ -273,8 +321,8 @@
for(var n = 0; n < colorStops.length; n += 2) { for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]); grd.addColorStop(colorStops[n], colorStops[n + 1]);
} }
_context.fillStyle = grd; this.setFillStyle(grd);
_context.fill(); this.fill();
}, },
_fill: function(shape, skipShadow) { _fill: function(shape, skipShadow) {
var _context = this._context, var _context = this._context,
@ -329,9 +377,9 @@
dashArray = shape.getDashArray(); dashArray = shape.getDashArray();
if(stroke || strokeWidth) { if(stroke || strokeWidth) {
_context.save(); this.save();
if (!shape.getStrokeScaleEnabled()) { if (!shape.getStrokeScaleEnabled()) {
_context.setTransform(1, 0, 0, 1, 0, 0); this.setTransform(1, 0, 0, 1, 0, 0);
} }
this._applyLineCap(shape); this._applyLineCap(shape);
if(dashArray && shape.getDashArrayEnabled()) { if(dashArray && shape.getDashArrayEnabled()) {
@ -348,10 +396,10 @@
if(!skipShadow && shape.hasShadow()) { if(!skipShadow && shape.hasShadow()) {
this._applyShadow(shape); this._applyShadow(shape);
} }
_context.lineWidth = strokeWidth || 2; this.setLineWidth(strokeWidth || 2);
_context.strokeStyle = stroke || 'black'; this.setStrokeStyle(stroke || 'black');
shape._strokeFunc(_context); shape._strokeFunc(this);
_context.restore(); this.restore();
if(!skipShadow && shape.hasShadow()) { if(!skipShadow && shape.hasShadow()) {
this._stroke(shape, true); this._stroke(shape, true);
@ -394,7 +442,7 @@
_fill: function(shape) { _fill: function(shape) {
var _context = this._context; var _context = this._context;
_context.save(); _context.save();
_context.fillStyle = shape.colorKey; this.setFillStyle(shape.colorKey);
shape._fillFuncHit(_context); shape._fillFuncHit(_context);
_context.restore(); _context.restore();
}, },

16
src/Shape.js
View File

@ -1,17 +1,17 @@
(function() { (function() {
var HAS_SHADOW = 'hasShadow'; var HAS_SHADOW = 'hasShadow';
function _fillFunc(_context) { function _fillFunc(context) {
_context.fill(); context.fill();
} }
function _strokeFunc(_context) { function _strokeFunc(context) {
_context.stroke(); context.stroke();
} }
function _fillFuncHit(_context) { function _fillFuncHit(context) {
_context.fill(); context.fill();
} }
function _strokeFuncHit(_context) { function _strokeFuncHit(context) {
_context.stroke(); context.stroke();
} }
function _clearHasShadowCache() { function _clearHasShadowCache() {

2
src/shapes/Line.js
View File

@ -55,7 +55,7 @@
_context.lineTo(point.x, point.y); _context.lineTo(point.x, point.y);
} }
context.stroke(this); context.strokeShape(this);
} }
}; };
Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape); Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape);

2
src/shapes/Spline.js
View File

@ -69,7 +69,7 @@
} }
} }
context.stroke(this); context.strokeShape(this);
}, },
_setAllPoints: function() { _setAllPoints: function() {
this.allPoints = Kinetic.Util._expandPoints(this.getPoints(), this.getTension()); this.allPoints = Kinetic.Util._expandPoints(this.getPoints(), this.getTension());

8
src/shapes/Text.js
View File

@ -58,11 +58,11 @@
Kinetic.Text = function(config) { Kinetic.Text = function(config) {
this.___init(config); this.___init(config);
}; };
function _fillFunc(_context) { function _fillFunc(context) {
_context.fillText(this.partialText, 0, 0); context.fillText(this.partialText, 0, 0);
} }
function _strokeFunc(_context) { function _strokeFunc(context) {
_context.strokeText(this.partialText, 0, 0); context.strokeText(this.partialText, 0, 0);
} }
Kinetic.Text.prototype = { Kinetic.Text.prototype = {

16
test/unit/Rect-test.js
View File

@ -34,8 +34,20 @@ suite('Rect', function(){
test('context trace array', function() { test('context trace array', function() {
var traceArr = layer.getContext().traceArr; var traceArr = layer.getContext().traceArr;
console.log(traceArr) var n = 0;
assert.equal(traceArr[0], 'clearRect(0,0,578,200)'); //console.log(traceArr);
assert.equal(traceArr[n++], 'clearRect(0,0,578,200)');
assert.equal(traceArr[n++], 'save()');
assert.equal(traceArr[n++], 'transform(1,0,0,1,100,50)');
assert.equal(traceArr[n++], 'rect(0,0,100,50)');
assert.equal(traceArr[n++], 'fillStyle=green');
assert.equal(traceArr[n++], 'fill()');
assert.equal(traceArr[n++], 'save()');
assert.equal(traceArr[n++], 'lineWidth=2');
assert.equal(traceArr[n++], 'strokeStyle=blue');
assert.equal(traceArr[n++], 'stroke()');
assert.equal(traceArr[n++], 'restore()');
assert.equal(traceArr[n++], 'restore()');
}); });
}); });
}); });