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

added perf tests for new FastLayer

Browse Source
This commit is contained in:
Eric Rowell 2014-03-09 13:15:01 -07:00
parent a9ecfd74a2
commit 852ef7056d
6 changed files with 28 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/FastLayer.js
View File

@ -41,6 +41,9 @@
return this; return this;
}, },
// the apply transform method is handled by the Layer and FastLayer class
// because it is up to the layer to decide if an absolute or relative transform
// should be used
_applyTransform: function(shape, context) { _applyTransform: function(shape, context) {
var m = shape.getTransform().getMatrix(); var m = shape.getTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);

3
src/Layer.js
View File

@ -123,6 +123,9 @@
return this; return this;
}, },
// the apply transform method is handled by the Layer and FastLayer class
// because it is up to the layer to decide if an absolute or relative transform
// should be used
_applyTransform: function(shape, context) { _applyTransform: function(shape, context) {
var m = shape.getAbsoluteTransform().getMatrix(); var m = shape.getAbsoluteTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);

73
test/performance/common/random-squares.js
View File

@ -5,7 +5,7 @@
var width = 500; var width = 500;
var height = 300; var height = 300;
var VERSION = Kinetic.version === '4.7.4' || Kinetic.version === 'dev' ? 'new' : 'old'; var VERSION = Kinetic.version === 'dev' ? 'new' : 'old';
window.requestAnimFrame = (function(){ window.requestAnimFrame = (function(){
return window.requestAnimationFrame || return window.requestAnimationFrame ||
@ -66,12 +66,9 @@
for (var i = 0; i < circles.length; i++) { for (var i = 0; i < circles.length; i++) {
var x = Math.round(Math.random() * width); var x = Math.round(Math.random() * width);
var y = Math.round(Math.random() * height); var y = Math.round(Math.random() * height);
if (VERSION === 'new') {
circles[i].setPosition({x: x, y: y}); circles[i].setPosition({x: x, y: y});
}
else {
circles[i].setPosition(x, y);
}
} }
lastTime = time; lastTime = time;
@ -83,56 +80,26 @@
} }
function make_shape(color) { function make_shape(color) {
if (VERSION === 'new') { return new Kinetic.Rect({
fill: color,
return new Kinetic.Rect({ width: 10,
fill: color, height: 10
width: 10, });
height: 10,
transformsEnabled: "position",
listening : false
});
// return new Kinetic.Shape({
// drawFunc: function(context) {
// var _context = context._context;
// _context.beginPath();
// _context.rect(0, 0, 10, 10);
// _context.closePath();
// _context.fillStyle = color;
// _context.fill();
// }
// });
} else {
return new Kinetic.Shape(function(){
var context = this.getContext();
context.beginPath();
context.rect(0, 0, 10, 10);
context.fillStyle = color;
context.fill();
context.closePath();
});
}
} }
function make_stage() { function make_stage() {
stage = new Kinetic.Stage({
container: "container",
width: width,
height: height
});
if (VERSION === 'new') { if (VERSION === 'new') {
stage = new Kinetic.Stage({ console.log('create fast layer')
container: "container", circlesLayer = new Kinetic.FastLayer();
width: width, }
height: height, else {
nestedTransformsEnabled: false console.log('create normal layer')
});
circlesLayer = new Kinetic.Layer({
hitGraphEnabled: false
});
} else {
stage = new Kinetic.Stage("container", width, height);
circlesLayer = new Kinetic.Layer(); circlesLayer = new Kinetic.Layer();
} }
} }

21
test/performance/random-squares-v3.6.2.html
View File

@ -1,21 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v3.6.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../lib/stats.js"></script>
<script src="common/random-squares.js"></script>
</body>
</html>

2
test/performance/random-squares-v4.7.4.html → test/performance/random-squares-v5.0.1.html
View File

@ -14,7 +14,7 @@
<body> <body>
<div id="container"></div> <div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../lib/stats.js"></script> <script src="../lib/stats.js"></script>
<script src="common/random-squares.js"></script> <script src="common/random-squares.js"></script>

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

@ -1,7 +1,7 @@
suite('FastLayer', function() { suite('FastLayer', function() {
// ====================================================== // ======================================================
test('basic render', function() { test.only('basic render', function() {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.FastLayer(); var layer = new Kinetic.FastLayer();