lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

started working on context tracing. Added first context trace unit test

Browse Source
This commit is contained in:
Eric Rowell
2013-09-01 01:13:52 -07:00
parent f144c67264
commit 8c3a53dc9d
6 changed files with 243 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/Context.js
View File

@@ -1,4 +1,11 @@
(function() {
var COMMA = ',',
OPEN_PAREN = '(',
CLOSE_PAREN = ')',
EMPTY_STRING = '',
CONTEXT_METHODS = ['clearRect', 'rect', 'restore', 'save', 'setTransform', 'transform'],
CONTEXT_PROPERTIES = ['fillStyle', 'lineWidth', 'strokeStyle'];
/**
* Canvas Context constructor
* @constructor
@@ -13,6 +20,22 @@
init: function(canvas) {
this.canvas = canvas;
this._context = canvas._canvas.getContext('2d');
if (Kinetic.enableTrace) {
this.traceArr = [];
this._enableTrace();
}
},
_trace: function(str) {
var traceArr = this.traceArr,
len;
traceArr.push(str);
len = traceArr.length;
if (len >= Kinetic.traceArrMax) {
traceArr.shift();
}
},
/**
* reset canvas context transform
@@ -21,7 +44,7 @@
*/
reset: function() {
var pixelRatio = this.getCanvas().getPixelRatio();
this._context.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
},
getCanvas: function() {
return this.canvas;
@@ -32,17 +55,16 @@
* @memberof Kinetic.Context.prototype
*/
clear: function(clip) {
var _context = this._context,
canvas = this.getCanvas(),
var canvas = this.getCanvas(),
pos, size;
if (clip) {
pos = Kinetic.Util._getXY(clip);
size = Kinetic.Util._getSize(clip);
_context.clearRect(pos.x || 0, pos.y || 0, size.width, size.height);
this.clearRect(pos.x || 0, pos.y || 0, size.width, size.height);
}
else {
_context.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
this.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
}
},
/**
@@ -93,11 +115,10 @@
* @param {Function} drawFunc
*/
applyShadow: function(shape, drawFunc) {
var _context = this._context;
_context.save();
context.save();
this._applyShadow(shape);
drawFunc();
_context.restore();
context.restore();
drawFunc();
},
_applyLineCap: function(shape) {
@@ -120,7 +141,7 @@
},
_applyAncestorTransforms: function(shape) {
var m = shape.getAbsoluteTransform().getMatrix();
this._context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
},
_clip: function(container) {
var _context = this._context,
@@ -129,14 +150,59 @@
clipWidth = container.getClipWidth(),
clipHeight = container.getClipHeight();
_context.save();
this.save();
this._applyAncestorTransforms(container);
_context.beginPath();
_context.rect(clipX, clipY, clipWidth, clipHeight);
this.rect(clipX, clipY, clipWidth, clipHeight);
_context.clip();
this.reset();
container._drawChildren(this.getCanvas());
_context.restore();
this.restore();
},
// context pass through methods
clearRect: function(x, y, width, height) {
this._context.clearRect(x, y, width, height);
},
rect: function(x, y, width, height) {
this._context.rect(x, y, width, height);
},
restore: function() {
this._context.restore();
},
save: function() {
this._context.save();
},
setTransform: function(a, b, c, d, e, f) {
this._context.setTransform(a, b, c, d, e, f);
},
transform: function(a, b, c, d, e, f) {
this._context.transform(a, b, c, d, e, f);
},
_enableTrace: function() {
var that = this,
len = CONTEXT_METHODS.length,
n;
// methods
for (n=0; n<len; n++) {
(function(contextMethod) {
var method = that[contextMethod],
args;
that[contextMethod] = function() {
args = Array.prototype.slice.call(arguments, 0);
method.apply(that, arguments);
that._trace(contextMethod + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN);
};
})(CONTEXT_METHODS[n]);
}
// properties
len = CONTEXT_PROPERTIES.length;
for (n=0; n<len; n++) {
}
}
};
@@ -346,5 +412,4 @@
}
};
Kinetic.Util.extend(Kinetic.HitContext, Kinetic.Context);
})();

31
src/Global.js
View File

@@ -30,13 +30,15 @@
*/
var Kinetic = {};
(function() {
Kinetic.version = '@@version';
Kinetic = {
version: '@@version',
enableTrace: false,
traceArrMax: 100,
/**
* @namespace Filters
* @memberof Kinetic
*/
Kinetic.Filters = {};
Filters: {},
/**
* Node constructor. Nodes are entities that can be transformed, layered,
@@ -47,9 +49,9 @@ var Kinetic = {};
* @param {Object} config
* @@nodeParams
*/
Kinetic.Node = function(config) {
Node: function(config) {
this._init(config);
};
},
/**
* Shape constructor. Shapes are primitive objects such as rectangles,
@@ -77,9 +79,9 @@ var Kinetic = {};
* }<br>
*});
*/
Kinetic.Shape = function(config) {
Shape: function(config) {
this.__init(config);
};
},
/**
* Container constructor.&nbsp; Containers are used to contain nodes or other containers
@@ -91,9 +93,9 @@ var Kinetic = {};
* @@nodeParams
* @@containerParams
*/
Kinetic.Container = function(config) {
Container: function(config) {
this.__init(config);
};
},
/**
* Stage constructor. A stage is used to contain multiple layers
@@ -111,9 +113,9 @@ var Kinetic = {};
* container: 'containerId'<br>
* });
*/
Kinetic.Stage = function(config) {
Stage: function(config) {
this.___init(config);
};
},
/**
* Layer constructor. Layers are tied to their own canvas element and are used
@@ -129,9 +131,9 @@ var Kinetic = {};
* @example
* var layer = new Kinetic.Layer();
*/
Kinetic.Layer = function(config) {
Layer: function(config) {
this.___init(config);
};
},
/**
* Group constructor. Groups are used to contain shapes or other groups.
@@ -144,8 +146,9 @@ var Kinetic = {};
* @example
* var group = new Kinetic.Group();
*/
Kinetic.Group = function(config) {
Group: function(config) {
this.___init(config);
}
};
/**

4
src/Shape.js
View File

@@ -215,12 +215,12 @@
context = canvas.getContext();
if(drawFunc && this.isVisible()) {
context._context.save();
context.save();
context._applyOpacity(this);
context._applyLineJoin(this);
context._applyAncestorTransforms(this);
drawFunc.call(this, context);
context._context.restore();
context.restore();
}
return this;
},

2
src/shapes/Rect.js
View File

@@ -36,7 +36,7 @@
if(!cornerRadius) {
// simple rect - don't bother doing all that complicated maths stuff.
_context.rect(0, 0, width, height);
context.rect(0, 0, width, height);
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)

9
test/runner.html
View File

@@ -1,19 +1,26 @@
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<title>KineticJS Mocha Tests</title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<!-- used for KineticJS container -->
<div id="container"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../dist/kinetic-dev.js"></script>
<script>
mocha.ui('tdd');
var assert = chai.assert;
Kinetic.enableTrace = true;
</script>
<script src="unit/Util-test.js"></script>
<script src="unit/Rect-test.js"></script>
<script>
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
else { mocha.run(); }

41
test/unit/Rect-test.js Normal file
View File

@@ -0,0 +1,41 @@
suite('Rect', function(){
var util;
setup(function(){
});
suite('add rect to stage', 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'
});
layer.add(rect);
stage.add(layer);
test('getters', function(){
assert.equal(rect.getX(), 100);
assert.equal(rect.getY(), 50);
});
test('context trace array', function() {
var traceArr = layer.getContext().traceArr;
console.log(traceArr)
assert.equal(traceArr[0], 'clearRect(0,0,578,200)');
});
});
});