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

Merge branch 'master' of github.com:ericdrowell/KineticJS

Browse Source
This commit is contained in:
Eric Rowell 2013-02-20 21:31:10 -08:00
commit 88e1c5fa08
12 changed files with 124 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -13,7 +13,7 @@ Currently, KineticJS has unit, functional, performance, manual, and special test
### Running the tests
Unit, functional, and performance tests output the results to the console via `console.log()` so be sure to have it open.
In order for the data url tests and image manipulation tests to pass, you need to run the unit test suite on a web server due to canvas security constraints ([read more about that here](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements)). All tests should pass in Google Chrome with no warnings, and all tests should pass with some warnings in other browsers.
In order for the data url tests and image manipulation tests to pass, you need to run the unit test suite on a web server due to canvas security constraints ([read more about that here](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements)). All tests should pass in Google Chrome on Windows 7 with no warnings, and all tests should pass with some warnings in other browsers and operating systems.
### Updating the tests

1
Thorfile
View File

@ -146,6 +146,7 @@ class Build < Thor
content.gsub!("{{version}}", version)
content.sub!("{{date}}", date)
content.gsub!("{{NodeParams}}", IO.read("configParams/NodeParams.txt"))
content.gsub!("{{ContainerParams}}", IO.read("configParams/ContainerParams.txt"))
content.gsub!("{{ShapeParams}}", IO.read("configParams/ShapeParams.txt"))
return content

1
configParams/containerParams.txt Normal file
View File

@ -0,0 +1 @@
@param {Function} [config.clipFunc] clipping function

13
src/Canvas.js
View File

@ -16,6 +16,10 @@
this.width = width;
this.height = height;
this.element = document.createElement('canvas');
this.element.style.padding = 0;
this.element.style.margin = 0;
this.element.style.border = 0;
this.element.style.background = 'transparent';
this.context = this.element.getContext('2d');
this.setSize(width || 0, height || 0);
};
@ -200,6 +204,15 @@
var t = no.getTransform(), m = t.getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}, true);
},
_clip: function(container) {
var context = this.getContext();
context.save();
this._applyAncestorTransforms(container);
context.beginPath();
container.getClipFunc()(this);
context.clip();
context.setTransform(1, 0, 0, 1, 0, 0);
}
};

36
src/Container.js
View File

@ -5,6 +5,7 @@
* @augments Kinetic.Node
* @param {Object} config
* {{NodeParams}}
* {{ContainerParams}}
*/
Kinetic.Container = function(config) {
this._containerInit(config);
@ -203,21 +204,56 @@
this.drawHit();
},
drawScene: function(canvas) {
var clip = !!this.getClipFunc() && canvas;
if (clip) {
canvas._clip(this);
}
if(this.isVisible()) {
var children = this.children, len = children.length;
for(var n = 0; n < len; n++) {
children[n].drawScene(canvas);
}
}
if (clip) {
canvas.getContext().restore();
}
},
drawHit: function() {
var clip = !!this.getClipFunc() && this.nodeType !== 'Stage',
hitCanvas;
if (clip) {
hitCanvas = this.getLayer().hitCanvas;
hitCanvas._clip(this);
}
if(this.isVisible() && this.isListening()) {
var children = this.children, len = children.length;
for(var n = 0; n < len; n++) {
children[n].drawHit();
}
}
if (clip) {
hitCanvas.getContext().restore();
}
}
};
Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Container, ['clipFunc']);
/**
* set clipping function
* @name setClipFunc
* @methodOf Kinetic.Container.prototype
* @param {Number} deg
*/
/**
* get clipping function
* @name getClipFunc
* @methodOf Kinetic.Container.prototype
*/
})();

1
src/Group.js
View File

@ -5,6 +5,7 @@
* @augments Kinetic.Container
* @param {Object} config
* {{NodeParams}}
* {{ContainerParams}}
*/
Kinetic.Group = function(config) {
this._initGroup(config);

1
src/Layer.js
View File

@ -8,6 +8,7 @@
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
* to clear the canvas before each layer draw. The default value is true.
* {{NodeParams}}
* {{ContainerParams}}
*/
Kinetic.Layer = function(config) {
this._initLayer(config);

1
src/Stage.js
View File

@ -6,6 +6,7 @@
* @param {Object} config
* @param {String|DomElement} config.container Container id or DOM element
* {{NodeParams}}
* {{ContainerParams}}
*/
Kinetic.Stage = function(config) {
this._initStage(config);

30
tests/js/unit/containerTests.js
View File

@ -1,4 +1,34 @@
Test.Modules.CONTAINER = {
'use clipping function': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
draggable: true
});
var layer = new Kinetic.Layer({
clipFunc: function(canvas) {
var context = canvas.getContext();
context.rect(0, 0, 400, 100);
}
});
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
stage.add(layer);
layer.add(group);
group.add(circle);
layer.draw();
},
'add layer then group then shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,

31
tests/js/unit/layerTests.js
View File

@ -1,4 +1,35 @@
Test.Modules.LAYER = {
'test canvas inline styles': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
var style = layer.getCanvas().getElement().style;
console.log('--' + style.display);
test(style.position === 'absolute', 'canvas position style should be absolute');
test(style.border === '0px', 'canvas border style should be 0px');
test(style.margin === '0px', 'canvas margin style should be 0px');
test(style.padding === '0px', 'canvas padding style should be 0px');
test(style.backgroundColor === 'transparent', 'canvas backgroundColor style should be transparent');
},
'beforeDraw and afterDraw': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,

10
tests/js/unit/shapeTests.js
View File

@ -387,7 +387,7 @@ Test.Modules.SHAPE = {
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['everything enabled'], 'should be circle with green fill, dashed stroke, and shadow');
warn(layer.toDataURL() === dataUrls['everything enabled'], 'should be circle with green fill, dashed stroke, and shadow');
},
'fill disabled': function(containerId) {
var stage = new Kinetic.Stage({
@ -416,7 +416,7 @@ Test.Modules.SHAPE = {
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['fill disabled'], 'should be circle with no fill, dashed stroke, and shadow');
warn(layer.toDataURL() === dataUrls['fill disabled'], 'should be circle with no fill, dashed stroke, and shadow');
},
'stroke disabled': function(containerId) {
var stage = new Kinetic.Stage({
@ -445,7 +445,7 @@ Test.Modules.SHAPE = {
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['stroke disabled'], 'should be circle with green fill, no stroke, and shadow');
warn(layer.toDataURL() === dataUrls['stroke disabled'], 'should be circle with green fill, no stroke, and shadow');
},
'dash array disabled': function(containerId) {
var stage = new Kinetic.Stage({
@ -474,7 +474,7 @@ Test.Modules.SHAPE = {
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['dash array disabled'], 'should be circle with green fill, solid stroke, and shadow');
warn(layer.toDataURL() === dataUrls['dash array disabled'], 'should be circle with green fill, solid stroke, and shadow');
},
'shadow disabled': function(containerId) {
var stage = new Kinetic.Stage({
@ -503,7 +503,7 @@ Test.Modules.SHAPE = {
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['shadow disabled'], 'should be circle with green fill, dashed stroke, and no shadow');
warn(layer.toDataURL() === dataUrls['shadow disabled'], 'should be circle with green fill, dashed stroke, and no shadow');
},
'test enablers and disablers': function(containerId) {
var stage = new Kinetic.Stage({

6
tests/js/unit/shapes/textTests.js
View File

@ -295,7 +295,7 @@ Test.Modules.Text = {
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['text everything enabled'], 'should be text with blue fill and red stroke');
warn(layer.toDataURL() === dataUrls['text everything enabled'], 'should be text with blue fill and red stroke');
},
'text fill disabled': function(containerId) {
var stage = new Kinetic.Stage({
@ -325,7 +325,7 @@ Test.Modules.Text = {
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['text fill disabled'], 'should be text with no fill and red stroke');
warn(layer.toDataURL() === dataUrls['text fill disabled'], 'should be text with no fill and red stroke');
},
'text stroke disabled': function(containerId) {
var stage = new Kinetic.Stage({
@ -355,6 +355,6 @@ Test.Modules.Text = {
stage.add(layer);
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['text stroke disabled'], 'should be text with blue fill and no stroke');
warn(layer.toDataURL() === dataUrls['text stroke disabled'], 'should be text with blue fill and no stroke');
}
};