lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +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
Download Patch File Download Diff File Expand all files Collapse all files

51
src/Context.js
View File

@@ -6,9 +6,15 @@
EQUALS = '=', EQUALS = '=',
SET = 'set', SET = 'set',
CONTEXT_METHODS = [ CONTEXT_METHODS = [
'arc',
'arcTo',
'beginPath',
'clearRect', 'clearRect',
'closePath',
'fill', 'fill',
'fillText', 'fillText',
'lineTo',
'moveTo',
'rect', 'rect',
'restore', 'restore',
'save', 'save',
@@ -43,6 +49,16 @@
this._enableTrace(); 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) { _trace: function(str) {
var traceArr = this.traceArr, var traceArr = this.traceArr,
len; len;
@@ -124,20 +140,6 @@
this._stroke(shape, shape.hasShadow() && shape.hasFill() && fillEnabled); 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) { _applyLineCap: function(shape) {
var lineCap = shape.getLineCap(); var lineCap = shape.getLineCap();
if(lineCap) { if(lineCap) {
@@ -189,15 +191,33 @@
}, },
// context pass through methods // 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) { clearRect: function(x, y, width, height) {
this._context.clearRect(x, y, width, height); this._context.clearRect(x, y, width, height);
}, },
closePath: function() {
this._context.closePath();
},
fill: function() { fill: function() {
this._context.fill(); this._context.fill();
}, },
fillText: function(str, x, y) { fillText: function(str, x, y) {
this._context.fillText(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) { rect: function(x, y, width, height) {
this._context.rect(x, y, width, height); this._context.rect(x, y, width, height);
}, },
@@ -222,6 +242,7 @@
_enableTrace: function() { _enableTrace: function() {
var that = this, var that = this,
len = CONTEXT_METHODS.length, len = CONTEXT_METHODS.length,
_roundArrValues = Kinetic.Util._roundArrValues,
n; n;
// methods // methods
@@ -231,7 +252,7 @@
args; args;
that[contextMethod] = function() { that[contextMethod] = function() {
args = Array.prototype.slice.call(arguments, 0); args = _roundArrValues(Array.prototype.slice.call(arguments, 0));
method.apply(that, arguments); method.apply(that, arguments);
that._trace(contextMethod + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN); that._trace(contextMethod + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN);
}; };

16
src/Util.js
View File

@@ -346,6 +346,22 @@
} }
return false; 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: * The argument can be:
* - an integer (will be applied to both x and y) * - an integer (will be applied to both x and y)

25
src/shapes/Rect.js
View File

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

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

@@ -5,6 +5,8 @@ suite('Rect', function(){
}); });
// ======================================================
suite('add rect to stage', function(){ suite('add rect to stage', function(){
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: 'container', container: 'container',
@@ -32,22 +34,57 @@ suite('Rect', function(){
}); });
test('context trace array', function() { test('context trace', function() {
var traceArr = layer.getContext().traceArr; var trace = layer.getContext().getTrace();
var n = 0; //console.log(trace);
//console.log(traceArr); 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()');
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()'); suite('add rect to stage with shadow, rotation, corner radius, and opacity', function(){
assert.equal(traceArr[n++], 'save()'); var stage = new Kinetic.Stage({
assert.equal(traceArr[n++], 'lineWidth=2'); container: 'container',
assert.equal(traceArr[n++], 'strokeStyle=blue'); width: 578,
assert.equal(traceArr[n++], 'stroke()'); height: 200
assert.equal(traceArr[n++], 'restore()'); });
assert.equal(traceArr[n++], 'restore()');
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()');
}); });
}); });
}); });