lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-24 16:53:06 +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

7
src/Container.js
View File

@@ -309,18 +309,19 @@
return this;
},
_drawChildren: function(canvas, drawMethod) {
var context = canvas && canvas.getContext(),
var layer = this.getLayer(),
context = canvas && canvas.getContext(),
clipWidth = this.getClipWidth(),
clipHeight = this.getClipHeight(),
hasClip = clipWidth && clipHeight,
clipX, clipY;
if (hasClip) {
if (hasClip && layer) {
clipX = this.getClipX();
clipY = this.getClipY();
context.save();
context._applyTransform(this);
layer._applyTransform(this, context);
context.beginPath();
context.rect(clipX, clipY, clipWidth, clipHeight);
context.clip();

13
src/Context.js
View File

@@ -222,19 +222,6 @@
this.setAttr('lineJoin', lineJoin);
}
},
_applyTransform: function(shape) {
var transformsEnabled = shape.getTransformsEnabled(),
m;
if (transformsEnabled === 'all') {
m = shape.getAbsoluteTransform().getMatrix();
this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
else if (transformsEnabled === 'position') {
// best performance for position only transforms
this.translate(shape.getX(), shape.getY());
}
},
setAttr: function(attr, val) {
this._context[attr] = val;
},

27
src/FastLayer.js
View File

@@ -33,22 +33,25 @@
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas());
this._fire(BEFORE_DRAW, {
node: this
});
if(this.getClearBeforeDraw()) {
canvas.getContext().clear();
}
Kinetic.Container.prototype.drawScene.call(this, canvas);
this._fire(DRAW, {
node: 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) {
var m = shape.getTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
},
draw: function() {
this.drawScene();
return this;
},
/**
* get layer canvas
* @method
@@ -79,11 +82,7 @@
* layer.clear(0, 0, 100, 100);
*/
clear: function(bounds) {
var context = this.getContext(),
hitContext = this.getHitCanvas().getContext();
context.clear(bounds);
hitContext.clear(bounds);
this.getContext().clear(bounds);
return this;
},
// extend Node.prototype.setVisible
@@ -91,11 +90,9 @@
Kinetic.Node.prototype.setVisible.call(this, visible);
if(visible) {
this.getCanvas()._canvas.style.display = 'block';
this.hitCanvas._canvas.style.display = 'block';
}
else {
this.getCanvas()._canvas.style.display = 'none';
this.hitCanvas._canvas.style.display = 'none';
}
return this;
},

14
src/Layer.js
View File

@@ -123,6 +123,13 @@
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]);
},
drawHit: function(can) {
var layer = this.getLayer(),
canvas = can || (layer && layer.hitCanvas);
@@ -172,11 +179,8 @@
* layer.clear(0, 0, 100, 100);
*/
clear: function(bounds) {
var context = this.getContext(),
hitContext = this.getHitCanvas().getContext();
context.clear(bounds);
hitContext.clear(bounds);
this.getContext().clear(bounds);
this.getHitCanvas().getContext().clear(bounds);
return this;
},
// extend Node.prototype.setVisible

18
src/Node.js
View File

@@ -150,6 +150,7 @@
width = conf.width || this.width(),
height = conf.height || this.height(),
drawBorder = conf.drawBorder || false,
layer = this.getLayer(),
cachedSceneCanvas = new Kinetic.SceneCanvas({
pixelRatio: 1,
width: width,
@@ -171,9 +172,10 @@
this.clearCache();
this.transformsEnabled('position');
this.x(x * -1);
this.y(y * -1);
var layerApplyTrans = layer._applyTransform;
layer._applyTransform = function(shape, context) {
context.translate(x * -1, y * -1);
};
this.drawScene(cachedSceneCanvas);
this.drawHit(cachedHitCanvas);
@@ -192,9 +194,9 @@
sceneContext.restore();
}
this.x(origX);
this.y(origY);
this.transformsEnabled(origTransEnabled);
// set the _applyTransform method back to the original
layer._applyTransform = layerApplyTrans;
this._cache.canvas = {
scene: cachedSceneCanvas,
@@ -206,7 +208,7 @@
},
_drawCachedSceneCanvas: function(context) {
context.save();
context._applyTransform(this);
this.getLayer()._applyTransform(this, context);
context.drawImage(this._getCachedSceneCanvas()._canvas, 0, 0);
context.restore();
},
@@ -252,7 +254,7 @@
hitCanvas = cachedCanvas.hit;
context.save();
context._applyTransform(this);
this.getLayer()._applyTransform(this, context);
context.drawImage(hitCanvas._canvas, 0, 0);
context.restore();
},

12
src/Shape.js
View File

@@ -133,7 +133,8 @@
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage();
},
drawScene: function(can) {
var canvas = can || this.getLayer().getCanvas(),
var layer = this.getLayer(),
canvas = can || layer.getCanvas(),
context = canvas.getContext(),
cachedCanvas = this._cache.canvas,
drawFunc = this.sceneFunc(),
@@ -154,7 +155,7 @@
bufferContext.clear();
bufferContext.save();
bufferContext._applyLineJoin(this);
bufferContext._applyTransform(this);
layer._applyTransform(this, bufferContext);
drawFunc.call(this, bufferContext);
bufferContext.restore();
@@ -172,7 +173,7 @@
// if buffer canvas is not needed
else {
context._applyLineJoin(this);
context._applyTransform(this);
layer._applyTransform(this, context);
if (hasShadow) {
context.save();
@@ -191,7 +192,8 @@
return this;
},
drawHit: function(can) {
var canvas = can || this.getLayer().hitCanvas,
var layer = this.getLayer(),
canvas = can || layer.hitCanvas,
context = canvas.getContext(),
drawFunc = this.hitFunc() || this.sceneFunc(),
cachedCanvas = this._cache.canvas,
@@ -205,7 +207,7 @@
else if (drawFunc) {
context.save();
context._applyLineJoin(this);
context._applyTransform(this);
layer._applyTransform(this, context);
drawFunc.call(this, context);
context.restore();

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();');