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 Packages Projects Releases Wiki Activity

added more cache and filter tests

Browse Source
This commit is contained in:
Eric Rowell
2014-01-05 13:21:05 -08:00
parent 65a0aecb97
commit 0d7cfdee9d
3 changed files with 151 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/Node.js
View File

@@ -100,24 +100,34 @@
* @example
* node.clearCache();
*/
clearCache: function(attr) {
clearCache: function() {
delete this._cache.canvas;
this._filterUpToDate = false;
return this;
},
/**
* cache node to improve drawing performance, apply filters, or create more accurate
* hit regions
* @method
* @memberof Kinetic.Node.prototype
* @param {Object} config
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.showBorder] when set to true, a red border will be drawn around the cached
* region for debugging purposes
* @returns {Kinetic.Node}
* @example
* node.cache();
*/
cache: function(b) {
var box = b || {},
x = box.x || 0,
y = box.y || 0,
width = box.width || this.width(),
height = box.height || this.height(),
cache: function(config) {
var conf = config || {},
x = conf.x || 0,
y = conf.y || 0,
width = conf.width || this.width(),
height = conf.height || this.height(),
showBorder = conf.showBorder || false,
cachedSceneCanvas = new Kinetic.SceneCanvas({
pixelRatio: 1,
width: width,
@@ -134,7 +144,10 @@
}),
origTransEnabled = this.transformsEnabled(),
origX = this.x(),
origY = this.y();
origY = this.y(),
sceneContext;
this.clearCache();
this.transformsEnabled('position');
this.x(x * -1);
@@ -143,6 +156,20 @@
this.drawScene(cachedSceneCanvas);
this.drawHit(cachedHitCanvas);
// this will draw a red border around the cached box for
// debugging purposes
if (showBorder) {
sceneContext = cachedSceneCanvas.getContext();
sceneContext.save();
sceneContext.beginPath();
sceneContext.rect(0, 0, width, height);
sceneContext.closePath();
sceneContext.setAttr('strokeStyle', 'red');
sceneContext.setAttr('lineWidth', 5);
sceneContext.stroke();
sceneContext.restore();
}
this.x(origX);
this.y(origY);
this.transformsEnabled(origTransEnabled);

65
test/manual/manual-test.js
View File

@@ -83,4 +83,69 @@ suite('Manual', function() {
tween.play();
});
// ======================================================
test('blur and tween spline', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var spline = new Kinetic.Line({
points: [
73, 160,
340, 23,
500, 109,
300, 109
],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(spline);
stage.add(layer);
spline.cache({
width: stage.width(),
height: stage.height()
});
spline.filters([Kinetic.Filters.Blur]).blurRadius(40);
layer.draw();
layer.on('beforeDraw', function() {
spline.cache({
width: stage.width(),
height: stage.height()
});
});
var tween = new Kinetic.Tween({
node: spline,
duration: 2,
//x: 100,
points: [
200, 160,
200, 23,
500, 109,
100, 10
],
blurRadius: 0,
easing: Kinetic.Easings.BackEaseOut,
yoyo: false
});
// stage.getContent().addEventListener('mouseover', function() {
// tween.play();
// });
// stage.getContent().addEventListener('mouseout', function() {
// tween.reverse();
// });
tween.play();
});
});

53
test/unit/Node-test.js
View File

@@ -2901,8 +2901,8 @@ suite('Node', function() {
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: 70,
y: 70,
x: 74,
y: 74,
radius: 70,
fill: 'green',
stroke: 'black',
@@ -2941,13 +2941,60 @@ suite('Node', function() {
//console.log(layer.getContext().getTrace());
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,70,70);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,-4,-4);drawImage([object HTMLCanvasElement],0,0);restore();');
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);drawImage([object HTMLCanvasElement],0,0);restore();');
//console.log(circle._cache.canvas.scene.getContext().getTrace());
assert.equal(circle._cache.canvas.scene.getContext().getTrace(), 'save();translate(74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
});
test.only('show cache border', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: 74,
y: 74,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(circle._cache.canvas, undefined);
circle.cache({
x: -74,
y: -74,
width: 148,
height: 148,
showBorder: true
}).center({
x: 74,
y: 74
});
assert.notEqual(circle._cache.canvas.scene, undefined);
assert.notEqual(circle._cache.canvas.hit, undefined);
layer.draw();
showHit(layer);
//console.log(circle._cache.canvas.scene.getContext().getTrace());
// make sure the border rectangle was drawn onto the cached scene canvas
assert.equal(circle._cache.canvas.scene.getContext().getTrace(),'save();translate(74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();beginPath();rect(0,0,148,148);closePath();strokeStyle=red;lineWidth=5;stroke();restore();');
});
test('cache group', function(){
var stage = addStage();
var layer = new Kinetic.Layer();