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;
},
// 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) {
var m = shape.getTransform().getMatrix();
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;
},
// 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) {
var m = shape.getAbsoluteTransform().getMatrix();
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 height = 300;
var VERSION = Kinetic.version === '4.7.4' || Kinetic.version === 'dev' ? 'new' : 'old';
var VERSION = Kinetic.version === 'dev' ? 'new' : 'old';
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
@ -66,12 +66,9 @@
for (var i = 0; i < circles.length; i++) {
var x = Math.round(Math.random() * width);
var y = Math.round(Math.random() * height);
if (VERSION === 'new') {
circles[i].setPosition({x: x, y: y});
}
else {
circles[i].setPosition(x, y);
}
circles[i].setPosition({x: x, y: y});
}
lastTime = time;
@ -83,56 +80,26 @@
}
function make_shape(color) {
if (VERSION === 'new') {
return new Kinetic.Rect({
fill: color,
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();
});
}
return new Kinetic.Rect({
fill: color,
width: 10,
height: 10
});
}
function make_stage() {
stage = new Kinetic.Stage({
container: "container",
width: width,
height: height
});
if (VERSION === 'new') {
stage = new Kinetic.Stage({
container: "container",
width: width,
height: height,
nestedTransformsEnabled: false
});
circlesLayer = new Kinetic.Layer({
hitGraphEnabled: false
});
} else {
stage = new Kinetic.Stage("container", width, height);
console.log('create fast layer')
circlesLayer = new Kinetic.FastLayer();
}
else {
console.log('create normal 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>
<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="../lib/stats.js"></script>
<script src="common/random-squares.js"></script>

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

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