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

Merge branch 'master' of github.com:ericdrowell/KineticJS

Browse Source
This commit is contained in:
Лаврёнов Антон
2014-03-11 23:15:20 +08:00
parent d0c7aed452 e7175824a1
commit b364af6f4d
11 changed files with 117 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@@ -2605,90 +2605,6 @@ suite('Node', function() {
assert.equal(rect.shouldDrawHit(), false);
});
// ======================================================
test('transformEnabled methods', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: 100,
y: 100,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(circle.transformsEnabled(), 'all');
circle.transformsEnabled('position');
assert.equal(circle.transformsEnabled(), 'position');
layer.draw();
});
// ======================================================
test('transformEnabled context tracing', function(){
var stage = addStage();
stage.setX(100);
var layer = new Kinetic.Layer({
x: 100
});
var group = new Kinetic.Group({
x: 100
});
var circle = new Kinetic.Circle({
x: 100,
y: 100,
radius: 40,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,400,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
stage.transformsEnabled('none');
layer.getContext().clearTrace();
stage.draw();
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,300,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
layer.transformsEnabled('none');
layer.getContext().clearTrace();
stage.draw();
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
group.transformsEnabled('none');
layer.getContext().clearTrace();
stage.draw();
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
// disabling a shape transform disables all transforms but x and y. In this case, the Kinetic.Context uses translate instead of transform
circle.transformsEnabled('position');
layer.getContext().clearTrace();
stage.draw();
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();translate(100,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
//console.log(layer.getContext().getTrace());
});
// ======================================================
@@ -2886,18 +2802,62 @@ suite('Node', function() {
// document.body.appendChild(circle._cache.canvas.hit._canvas);
showHit(layer)
//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(layer.getContext().getTrace());
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();');
//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('cache shape inside transformed group', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
x: 50,
y: 50
});
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
}).offset({
x: 74,
y: 74
});
assert.notEqual(circle._cache.canvas.scene, undefined);
assert.notEqual(circle._cache.canvas.hit, undefined);
layer.draw();
//document.body.appendChild(circle._cache.canvas.scene._canvas);
// document.body.appendChild(circle._cache.canvas.hit._canvas);
showHit(layer)
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,124,124);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,50,50);drawImage([object HTMLCanvasElement],0,0);restore();');
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('cache shape thats larger than stage', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
@@ -2977,7 +2937,7 @@ suite('Node', function() {
//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();');
//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(){

2
test/unit/filters/Blur-test.js
View File

@@ -308,7 +308,7 @@ suite('Blur', function() {
//console.log(darth._cache.canvas.hit.getContext().getTrace());
assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');
//assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');