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

added more pass through methods for the new context class, and added more unit tests

Browse Source
This commit is contained in:
Eric Rowell 2013-09-01 13:28:52 -07:00
parent 0fc44eb3ff
commit fe551c1ece
4 changed files with 117 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/Context.js
View File

@ -6,9 +6,15 @@
EQUALS = '=',
SET = 'set',
CONTEXT_METHODS = [
'arc',
'arcTo',
'beginPath',
'clearRect',
'closePath',
'fill',
'fillText',
'lineTo',
'moveTo',
'rect',
'restore',
'save',
@ -43,6 +49,16 @@
this._enableTrace();
}
},
/**
* get context trace if trace is enabled
* @method
* @memberof Kinetic.Context.prototype
* @returns {String}
*/
getTrace: function() {
return this.traceArr.join(';');
},
_trace: function(str) {
var traceArr = this.traceArr,
len;
@ -124,20 +140,6 @@
this._stroke(shape, shape.hasShadow() && shape.hasFill() && fillEnabled);
}
},
/**
* apply shadow
* @method
* @memberof Kinetic.Context.prototype
* @param {Kinetic.Shape} shape
* @param {Function} drawFunc
*/
applyShadow: function(shape, drawFunc) {
context.save();
this._applyShadow(shape);
drawFunc();
context.restore();
drawFunc();
},
_applyLineCap: function(shape) {
var lineCap = shape.getLineCap();
if(lineCap) {
@ -189,15 +191,33 @@
},
// context pass through methods
arc: function() {
var a = arguments;
this._context.arc(a[0], a[1], a[2], a[3], a[4], a[5]);
},
beginPath: function() {
this._context.beginPath();
},
clearRect: function(x, y, width, height) {
this._context.clearRect(x, y, width, height);
},
closePath: function() {
this._context.closePath();
},
fill: function() {
this._context.fill();
},
fillText: function(str, x, y) {
this._context.fillText(str, x, y);
},
lineTo: function() {
var a = arguments;
this._context.lineTo(a[0], a[1]);
},
moveTo: function() {
var a = arguments;
this._context.moveTo(a[0], a[1]);
},
rect: function(x, y, width, height) {
this._context.rect(x, y, width, height);
},
@ -222,6 +242,7 @@
_enableTrace: function() {
var that = this,
len = CONTEXT_METHODS.length,
_roundArrValues = Kinetic.Util._roundArrValues,
n;
// methods
@ -231,7 +252,7 @@
args;
that[contextMethod] = function() {
args = Array.prototype.slice.call(arguments, 0);
args = _roundArrValues(Array.prototype.slice.call(arguments, 0));
method.apply(that, arguments);
that._trace(contextMethod + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN);
};

16
src/Util.js
View File

@ -346,6 +346,22 @@
}
return false;
},
_roundArrValues: function(arr) {
var retArr = [],
len = arr.length,
_isNumber = Kinetic.Util._isNumber,
n, val;
for (n=0; n<len; n++) {
val = arr[n];
if (_isNumber(val)) {
val = Math.round(val * 1000) / 1000;
}
retArr.push(val);
}
return retArr;
},
/*
* The argument can be:
* - an integer (will be applied to both x and y)

25
src/shapes/Rect.js
View File

@ -27,12 +27,11 @@
this.className = 'Rect';
},
drawFunc: function(context) {
var _context = context._context,
cornerRadius = this.getCornerRadius(),
var cornerRadius = this.getCornerRadius(),
width = this.getWidth(),
height = this.getHeight();
_context.beginPath();
context.beginPath();
if(!cornerRadius) {
// simple rect - don't bother doing all that complicated maths stuff.
@ -40,17 +39,17 @@
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)
_context.moveTo(cornerRadius, 0);
_context.lineTo(width - cornerRadius, 0);
_context.arc(width - cornerRadius, cornerRadius, cornerRadius, Math.PI * 3 / 2, 0, false);
_context.lineTo(width, height - cornerRadius);
_context.arc(width - cornerRadius, height - cornerRadius, cornerRadius, 0, Math.PI / 2, false);
_context.lineTo(cornerRadius, height);
_context.arc(cornerRadius, height - cornerRadius, cornerRadius, Math.PI / 2, Math.PI, false);
_context.lineTo(0, cornerRadius);
_context.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, Math.PI * 3 / 2, false);
context.moveTo(cornerRadius, 0);
context.lineTo(width - cornerRadius, 0);
context.arc(width - cornerRadius, cornerRadius, cornerRadius, Math.PI * 3 / 2, 0, false);
context.lineTo(width, height - cornerRadius);
context.arc(width - cornerRadius, height - cornerRadius, cornerRadius, 0, Math.PI / 2, false);
context.lineTo(cornerRadius, height);
context.arc(cornerRadius, height - cornerRadius, cornerRadius, Math.PI / 2, Math.PI, false);
context.lineTo(0, cornerRadius);
context.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, Math.PI * 3 / 2, false);
}
_context.closePath();
context.closePath();
context.fillStroke(this);
}
};

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

@ -5,6 +5,8 @@ suite('Rect', function(){
});
// ======================================================
suite('add rect to stage', function(){
var stage = new Kinetic.Stage({
container: 'container',
@ -32,22 +34,57 @@ suite('Rect', function(){
});
test('context trace array', function() {
var traceArr = layer.getContext().traceArr;
var n = 0;
//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()');
test('context trace', function() {
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
});
});
// ======================================================
suite('add rect to stage with shadow, rotation, corner radius, and opacity', function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
stroke: 'blue',
shadowColor: 'red',
shadowBlur: 10,
shadowOffset: 5,
shadowOpacity: 0.5,
opacity: 0.4,
cornerRadius: 5
});
layer.add(rect);
stage.add(layer);
test('getters', function(){
assert.equal(rect.getShadowColor(), 'red');
assert.equal(rect.getShadowBlur(), 10);
assert.equal(rect.getShadowOffsetX(), 5);
assert.equal(rect.getShadowOffsetY(), 5);
assert.equal(rect.getShadowOpacity(), 0.5);
assert.equal(rect.getOpacity(), 0.4);
assert.equal(rect.getCornerRadius(), 5);
});
test('context trace', function() {
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=green;fill();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
});
});
});