lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-14 11:44:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added cache perf test. refactored Star.js to better incorporate getters

Browse Source
This commit is contained in:
Eric Rowell
2013-12-28 13:52:03 -08:00
parent b5165fa8fb
commit 264f24e241
5 changed files with 158 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/plugins/Star.js
View File

@@ -34,21 +34,20 @@
this.setDrawFunc(this._drawFunc); this.setDrawFunc(this._drawFunc);
}, },
_drawFunc: function(context) { _drawFunc: function(context) {
var _context = context._context, var innerRadius = this.innerRadius(),
innerRadius = this.attrs.innerRadius, outerRadius = this.outerRadius(),
outerRadius = this.attrs.outerRadius, numPoints = this.numPoints();
numPoints = this.attrs.numPoints;
_context.beginPath(); context.beginPath();
_context.moveTo(0, 0 - this.attrs.outerRadius); context.moveTo(0, 0 - outerRadius);
for(var n = 1; n < numPoints * 2; n++) { for(var n = 1; n < numPoints * 2; n++) {
var radius = n % 2 === 0 ? outerRadius : innerRadius; var radius = n % 2 === 0 ? outerRadius : innerRadius;
var x = radius * Math.sin(n * Math.PI / numPoints); var x = radius * Math.sin(n * Math.PI / numPoints);
var y = -1 * radius * Math.cos(n * Math.PI / numPoints); var y = -1 * radius * Math.cos(n * Math.PI / numPoints);
_context.lineTo(x, y); context.lineTo(x, y);
} }
_context.closePath(); context.closePath();
context.fillStrokeShape(this); context.fillStrokeShape(this);
} }
@@ -56,7 +55,7 @@
Kinetic.Util.extend(Kinetic.Star, Kinetic.Shape); Kinetic.Util.extend(Kinetic.Star, Kinetic.Shape);
// add getters setters // add getters setters
Kinetic.Factory.addGetterSetter(Kinetic.Star, 'numPoints', 0); Kinetic.Factory.addGetterSetter(Kinetic.Star, 'numPoints', 5);
/** /**
* set number of points * set number of points

64
test/performance/rotate-cached-star.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../../dist/kinetic-dev.js"></script>
<script src="../lib/stats.js"></script>
<script src="../setStats.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: 250,
y: 250,
innerRadius: 100,
outerRadius: 200,
numPoints: 500,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
layer.add(star);
stage.add(layer);
var anim = new Kinetic.Animation(function() {
stats.begin();
star.rotate(0.1);
}, layer);
star.cache({
x: -204,
y: -204,
width: 408,
height: 408
});
anim.start();
</script>
</body>
</html>

57
test/performance/rotate-star.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../../dist/kinetic-dev.js"></script>
<script src="../lib/stats.js"></script>
<script src="../setStats.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: 250,
y: 250,
innerRadius: 100,
outerRadius: 200,
numPoints: 500,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
layer.add(star);
stage.add(layer);
var anim = new Kinetic.Animation(function() {
stats.begin();
star.rotate(0.1);
}, layer);
anim.start();
</script>
</body>
</html>

27
test/setStats.js Normal file
View File

@@ -0,0 +1,27 @@
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 30);
};
})();
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'fixed';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
function setStats() {
stats.begin();
requestAnimFrame(function(){
stats.end();
setStats();
});
}
setStats();

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

@@ -2940,19 +2940,8 @@ suite('Node', function() {
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,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();');
// setTimeout(function() { //console.log(circle._cache.canvas.scene.getContext().getTrace());
// console.log('draw')
// layer.draw();
// }, 1000)
// setTimeout(function() { 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();');
// console.log('draw')
// layer.draw();
// }, 2000)
// setTimeout(function() {
// console.log('draw')
// layer.draw();
// }, 3000)
}); });
}); });