fixed flickering when a node was added to the stage, updated, and redraw due to throttling

This commit is contained in:
Eric Rowell
2012-05-20 15:30:32 -07:00
parent 2331222459
commit e26575a6c8
4 changed files with 46 additions and 3 deletions

View File

@@ -1685,6 +1685,13 @@ Kinetic.Stage.prototype = {
// draw layer and append canvas to container
layer.draw();
this.content.appendChild(layer.canvas);
/*
* set layer last draw time to zero
* so that throttling doesn't take into account
* the layer draws associated with adding a node
*/
layer.lastDrawTime = 0;
},
/**
* get mouse position for desktop apps

File diff suppressed because one or more lines are too long

View File

@@ -309,6 +309,13 @@ Kinetic.Stage.prototype = {
// draw layer and append canvas to container
layer.draw();
this.content.appendChild(layer.canvas);
/*
* set layer last draw time to zero
* so that throttling doesn't take into account
* the layer draws associated with adding a node
*/
layer.lastDrawTime = 0;
},
/**
* get mouse position for desktop apps

View File

@@ -40,8 +40,37 @@ Test.prototype.tests = {
stage.add(layer);
layer.add(group);
layer.draw();
},
'STAGE - test layer throttle': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
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'
});
console.log(circle);
group.add(circle);
layer.add(group);
stage.add(layer);
/*
* if throttling isn't working correctly, then the circle will
* flash green and then turn red
*/
circle.setFill('red');
layer.draw();
},
'STAGE - add shape with linear gradient fill': function(containerId) {
var stage = new Kinetic.Stage({