lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 10:47:59 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

migrated text tests. added more context wrapper methods and properties

Browse Source
This commit is contained in:
Eric Rowell
2013-09-02 20:35:25 -07:00
parent 18d36d9d77
commit f298267bd7
8 changed files with 196 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/Context.js
View File

@@ -9,6 +9,7 @@
'arc',
'arcTo',
'beginPath',
'bezierCurveTo',
'clearRect',
'closePath',
'fill',
@@ -21,12 +22,8 @@
'setTransform',
'stroke',
'strokeText',
'transform'
],
CONTEXT_PROPERTIES = [
'fillStyle',
'lineWidth',
'strokeStyle'
'transform',
'translate'
];
/**
@@ -185,7 +182,7 @@
this.save();
this._applyAncestorTransforms(container);
_context.beginPath();
this.beginPath();
this.rect(clipX, clipY, clipWidth, clipHeight);
_context.clip();
this.reset();
@@ -193,15 +190,8 @@
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;
setAttr: function(attr, val) {
this._context[attr] = val;
},
// context pass through methods
@@ -212,6 +202,10 @@
beginPath: function() {
this._context.beginPath();
},
bezierCurveTo: function() {
var a = arguments;
this._context.bezierCurveTo(a[0], a[1], a[2], a[3], a[4], a[5]);
},
clearRect: function() {
var a = arguments;
this._context.clearRect(a[0], a[1], a[2], a[3]);
@@ -259,39 +253,34 @@
var a = arguments;
this._context.transform(a[0], a[1], a[2], a[3], a[4], a[5]);
},
translate: function() {
var a = arguments;
this._context.translate(a[0], a[1]);
},
_enableTrace: function() {
var that = this,
len = CONTEXT_METHODS.length,
_roundArrValues = Kinetic.Util._roundArrValues,
n;
origSetter = this.setAttr,
n, args;
// methods
for (n=0; n<len; n++) {
(function(contextMethod) {
var method = that[contextMethod],
args;
that[contextMethod] = function() {
(function(methodName) {
var origMethod = that[methodName];
that[methodName] = function() {
args = _roundArrValues(Array.prototype.slice.call(arguments, 0));
method.apply(that, arguments);
that._trace(contextMethod + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN);
origMethod.apply(that, arguments);
that._trace(methodName + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN);
};
})(CONTEXT_METHODS[n]);
}
// properties
len = CONTEXT_PROPERTIES.length;
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);
// attrs
that.setAttr = function() {
origSetter.apply(that, arguments);
that._trace(arguments[0] + EQUALS + arguments[1]);
};
})(CONTEXT_PROPERTIES[n]);
}
}
};
@@ -301,10 +290,9 @@
Kinetic.SceneContext.prototype = {
_fillColor: function(shape) {
var _context = this._context,
fill = shape.getFill();
var fill = shape.getFill();
this.setFillStyle(fill);
this.setAttr('fillStyle', fill);
shape._fillFunc(this);
},
_fillPattern: function(shape) {
@@ -318,7 +306,7 @@
fillPatternRepeat = shape.getFillPatternRepeat();
if(fillPatternX || fillPatternY) {
_context.translate(fillPatternX || 0, fillPatternY || 0);
this.translate(fillPatternX || 0, fillPatternY || 0);
}
if(fillPatternRotation) {
_context.rotate(fillPatternRotation);
@@ -327,10 +315,10 @@
_context.scale(fillPatternScale.x, fillPatternScale.y);
}
if(fillPatternOffset) {
_context.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
}
this.setFillStyle(_context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
this.setAttr('fillStyle', _context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
this.fill();
},
_fillLinearGradient: function(shape) {
@@ -345,7 +333,7 @@
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
this.setFillStyle(grd);
this.setAttr('fillStyle', grd);
this.fill();
}
},
@@ -362,7 +350,7 @@
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
this.setFillStyle(grd);
this.setAttr('fillStyle', grd);
this.fill();
},
_fill: function(shape, skipShadow) {
@@ -373,7 +361,7 @@
hasRadialGradient = shape.getFillRadialGradientColorStops(),
fillPriority = shape.getFillPriority();
_context.save();
this.save();
if(!skipShadow && shape.hasShadow()) {
this._applyShadow(shape);
@@ -405,7 +393,7 @@
else if(hasRadialGradient) {
this._fillRadialGradient(shape);
}
_context.restore();
this.restore();
if(!skipShadow && shape.hasShadow()) {
this._fill(shape, true);
@@ -437,8 +425,8 @@
if(!skipShadow && shape.hasShadow()) {
this._applyShadow(shape);
}
this.setLineWidth(strokeWidth || 2);
this.setStrokeStyle(stroke || 'black');
this.setAttr('lineWidth', strokeWidth || 2);
this.setAttr('strokeStyle', stroke || 'black');
shape._strokeFunc(this);
this.restore();
@@ -482,10 +470,10 @@
Kinetic.HitContext.prototype = {
_fill: function(shape) {
var _context = this._context;
_context.save();
this.setFillStyle(shape.colorKey);
shape._fillFuncHit(_context);
_context.restore();
this.save();
this.setAttr('fillStyle', shape.colorKey);
shape._fillFuncHit(this);
this.restore();
},
_stroke: function(shape) {
var _context = this._context,
@@ -496,7 +484,7 @@
this._applyLineCap(shape);
_context.lineWidth = strokeWidth || 2;
_context.strokeStyle = shape.colorKey;
shape._strokeFuncHit(_context);
shape._strokeFuncHit(this);
}
}
};

11
src/shapes/Blob.js
View File

@@ -40,12 +40,11 @@
drawFunc: function(context) {
var points = this.getPoints(),
length = points.length,
_context = context._context,
tension = this.getTension(),
ap, len, n, point;
_context.beginPath();
_context.moveTo(points[0].x, points[0].y);
context.beginPath();
context.moveTo(points[0].x, points[0].y);
// tension
if(tension !== 0 && length > 2) {
@@ -54,18 +53,18 @@
n = 0;
while(n < len-1) {
_context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
}
}
// no tension
else {
for(n = 1; n < length; n++) {
point = points[n];
_context.lineTo(point.x, point.y);
context.lineTo(point.x, point.y);
}
}
_context.closePath();
context.closePath();
context.fillStrokeShape(this);
},
_setAllPoints: function() {

36
src/shapes/Text.js
View File

@@ -91,8 +91,7 @@
this._setTextData();
},
drawFunc: function(context) {
var _context = context._context,
p = this.getPadding(),
var p = this.getPadding(),
fontStyle = this.getFontStyle(),
fontSize = this.getFontSize(),
fontFamily = this.getFontFamily(),
@@ -102,12 +101,12 @@
textArrLen = textArr.length,
totalWidth = this.getWidth();
_context.font = this._getContextFont();
_context.textBaseline = MIDDLE;
_context.textAlign = LEFT;
_context.save();
_context.translate(p, 0);
_context.translate(0, p + textHeight / 2);
context.setAttr('font', this._getContextFont());
context.setAttr('textBaseline', MIDDLE);
context.setAttr('textAlign', LEFT);
context.save();
context.translate(p, 0);
context.translate(0, p + textHeight / 2);
// draw text lines
for(var n = 0; n < textArrLen; n++) {
@@ -116,29 +115,28 @@
width = obj.width;
// horizontal alignment
_context.save();
context.save();
if(this.getAlign() === RIGHT) {
_context.translate(totalWidth - width - p * 2, 0);
context.translate(totalWidth - width - p * 2, 0);
}
else if(this.getAlign() === CENTER) {
_context.translate((totalWidth - width - p * 2) / 2, 0);
context.translate((totalWidth - width - p * 2) / 2, 0);
}
this.partialText = text;
context.fillStrokeShape(this);
_context.restore();
_context.translate(0, lineHeightPx);
context.restore();
context.translate(0, lineHeightPx);
}
_context.restore();
context.restore();
},
drawHitFunc: function(context) {
var _context = context._context,
width = this.getWidth(),
var width = this.getWidth(),
height = this.getHeight();
_context.beginPath();
_context.rect(0, 0, width, height);
_context.closePath();
context.beginPath();
context.rect(0, 0, width, height);
context.closePath();
context.fillStrokeShape(this);
},
/**

3
test/runner.html
View File

@@ -1,4 +1,4 @@
<html>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>KineticJS Mocha Tests</title>
@@ -28,6 +28,7 @@
<script src="unit/Rect-test.js"></script>
<script src="unit/Circle-test.js"></script>
<script src="unit/Text-test.js"></script>
<script src="unit/Blob-test.js"></script>
<script>
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }

60
test/sandbox.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>KineticJS Mocha Tests</title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
<style>
#mocha .test {
overflow: auto;
}
</style>
</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>
Kinetic.enableTrace = true;
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: 10,
y: 10,
//stroke: '#555',
//strokeWidth: 5,
text: 'HEADING\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
fontSize: 16,
fontFamily: 'Calibri',
fontStyle: 'normal',
fill: '#555',
//width: 20,
width: 380,
//width: 200,
padding: 20,
align: 'center',
shadowColor: 'red',
shadowBlur: 1,
shadowOffset: [10, 10],
shadowOpacity: 0.5,
draggable: true
});
layer.add(text);
stage.add(layer);
console.log(layer.getContext().getTrace());
</script>
</body>
</html>

2
test/unit/Circle-test.js
View File

@@ -42,7 +42,7 @@ suite('Circle', function(){
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();save();lineWidth=4;strokeStyle=black;stroke();restore();restore()');
assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();fillStyle=green;fill();restore();save();lineWidth=4;strokeStyle=black;stroke();restore();restore()');
});
// ======================================================

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

@@ -27,13 +27,13 @@ suite('Rect', 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()');
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();save();fillStyle=green;fill();restore();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
});
// ======================================================
test('add rect to stage with shadow, rotation, corner radius, and opacity', function(){
test('add rect with shadow, rotation, corner radius, and opacity', function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
@@ -70,7 +70,7 @@ suite('Rect', 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()');
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();save();fillStyle=green;fill();restore();save();fillStyle=green;fill();restore();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
});

119
tests/js/unit/shapes/textTests.js → test/unit/Text-test.js
View File

@@ -1,7 +1,8 @@
Test.Modules.Text = {
'add text with shadows': function(containerId) {
suite('Text', function(){
// ======================================================
test('add text with shadows', function() {
var stage = new Kinetic.Stage({
container: containerId,
container: 'container',
width: 578,
height: 200
});
@@ -55,11 +56,13 @@ Test.Modules.Text = {
layer.add(group);
stage.add(layer);
test(text.getClassName() === 'Text', 'getClassName should be Text');
},
'text getters and setters': function(containerId) {
assert.equal(text.getClassName(),'Text', 'getClassName should be Text');
});
// ======================================================
test('text getters and setters', function() {
var stage = new Kinetic.Stage({
container: containerId,
container: 'container',
width: 578,
height: 200
});
@@ -96,25 +99,25 @@ Test.Modules.Text = {
* test getters and setters
*/
test(text.getX() === stage.getWidth() / 2, 'text box x should be in center of stage');
test(text.getY() === stage.getHeight() / 2, 'text box y should be in center of stage');
test(text.getText() === 'Hello World!', 'text should be Hello World!');
test(text.getFontSize() == 50, 'font size should 50');
test(text.getFontFamily() == 'Calibri', 'font family should be Calibri');
test(text.getFontStyle() == 'normal', 'font style should be normal');
test(text.getFill() == '#888', 'text fill should be #888');
test(text.getStroke() == '#333', 'text fill should be #333');
test(text.getAlign() === 'right', 'text should be aligned right');
test(text.getLineHeight() === 1.2, 'line height should be 1.2');
test(text.getWidth() === 400, 'width should be 400');
test(text.getHeight() === 100, 'height should be 100');
test(text.getPadding() === 10, 'padding should be 10');
test(text.getShadowColor() === 'black', 'text box shadow color should be black');
test(text.getDraggable() === true, 'text should be draggable');
test(text.getWidth() === 400, 'box width should be 400');
test(text.getHeight() === 100, 'box height should be 100');
test(text.getTextWidth() > 0, 'text width should be greater than 0');
test(text.getTextHeight() > 0, 'text height should be greater than 0');
assert.equal(text.getX(), stage.getWidth() / 2);
assert.equal(text.getY(), stage.getHeight() / 2);
assert.equal(text.getText(), 'Hello World!');
assert.equal(text.getFontSize(), 50);
assert.equal(text.getFontFamily(), 'Calibri');
assert.equal(text.getFontStyle(), 'normal');
assert.equal(text.getFill(), '#888');
assert.equal(text.getStroke(), '#333');
assert.equal(text.getAlign(), 'right');
assert.equal(text.getLineHeight(), 1.2);
assert.equal(text.getWidth(), 400);
assert.equal(text.getHeight(), 100);
assert.equal(text.getPadding(), 10);
assert.equal(text.getShadowColor(), 'black');
assert.equal(text.getDraggable(), true);
assert.equal(text.getWidth(), 400);
assert.equal(text.getHeight(), 100);
assert(text.getTextWidth() > 0, 'text width should be greater than 0');
assert(text.getTextHeight() > 0, 'text height should be greater than 0');
text.setX(1);
text.setY(2);
@@ -131,20 +134,20 @@ Test.Modules.Text = {
text.setShadowColor('green');
text.setDraggable(false);
test(text.getX() === 1, 'text box x should be 1');
test(text.getY() === 2, 'text box y should be 2');
test(text.getText() === 'bye world!', 'text should be bye world!');
test(text.getFontSize() == 10, 'font size should 10');
test(text.getFontFamily() == 'Arial', 'font family should be Arial');
test(text.getFontStyle() == 'bold', 'font style should be bold');
test(text.getFill() == 'green', 'text fill should be green');
test(text.getStroke() == 'yellow', 'text fill should be yellow');
test(text.getAlign() === 'left', 'text should be aligned left');
test(text.getWidth() === 300, 'width should be 300');
test(text.getHeight() === 75, 'height should be 75');
test(text.getPadding() === 20, 'padding should be 20');
test(text.getShadowColor() === 'green', 'text box shadow color should be green');
test(text.getDraggable() === false, 'text draggable should be false');
assert.equal(text.getX(), 1);
assert.equal(text.getY(), 2);
assert.equal(text.getText(), 'bye world!');
assert.equal(text.getFontSize(), 10);
assert.equal(text.getFontFamily(), 'Arial');
assert.equal(text.getFontStyle(), 'bold');
assert.equal(text.getFill(), 'green');
assert.equal(text.getStroke(), 'yellow');
assert.equal(text.getAlign(), 'left');
assert.equal(text.getWidth(), 300);
assert.equal(text.getHeight(), 75);
assert.equal(text.getPadding(), 20);
assert.equal(text.getShadowColor(), 'green');
assert.equal(text.getDraggable(), false);
// test set text to integer
text.setText(5);
@@ -154,10 +157,12 @@ Test.Modules.Text = {
//layer.setListening(false);
layer.drawHit();
},
'text multi line': function(containerId) {
});
// ======================================================
test('text multi line', function() {
var stage = new Kinetic.Stage({
container: containerId,
container: 'container',
width: 578,
height: 200
});
@@ -195,7 +200,7 @@ Test.Modules.Text = {
layer.add(rect).add(text);
stage.add(layer);
test(text.getLineHeight() === 1, 'text line height should be defaulted to 1');
assert.equal(text.getLineHeight(), 1);
/*
text.transitionTo({
@@ -210,10 +215,12 @@ Test.Modules.Text = {
*/
},
'text multi line with shadows': function(containerId) {
});
// ======================================================
test('text multi line with shadows', function() {
var stage = new Kinetic.Stage({
container: containerId,
container: 'container',
width: 578,
height: 200
});
@@ -245,10 +252,14 @@ Test.Modules.Text = {
layer.add(text);
stage.add(layer);
},
'change font size should update text data': function(containerId) {
console.log(layer.getContext().getTrace());
});
// ======================================================
test('change font size should update text data', function() {
var stage = new Kinetic.Stage({
container: containerId,
container: 'container',
width: 578,
height: 200
});
@@ -280,8 +291,8 @@ Test.Modules.Text = {
//console.log(text.getHeight() + ',' + height);
test(text.getWidth() > width, 'text box width should have increased.');
test(text.getHeight() > height, 'text box height should have increased.');
assert(text.getWidth() > width, 'width should have increased');
assert(text.getHeight() > height, 'height should have increased');
}
};
});
});