lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

optmized buffer canvas requirement logic

Browse Source
This commit is contained in:
Eric Rowell
2013-09-29 13:01:13 -07:00
parent e13a0b5fd8
commit e8b479e89f
7 changed files with 211 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
test/unit/Shape-test.js
View File

@@ -388,5 +388,99 @@ suite('Shape-test', function() {
});
// ======================================================
test('fill with shadow and opacity', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
});
layer.add(rect);
stage.add(layer);
assert.equal(rect.getX(), 100);
assert.equal(rect.getY(), 50);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();');
});
// ======================================================
test('stroke with shadow and opacity', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
stroke: 'red',
strokeWidth: 20,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
});
layer.add(rect);
stage.add(layer);
assert.equal(rect.getX(), 100);
assert.equal(rect.getY(), 50);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();');
});
// ======================================================
test('fill and stroke with shadow and opacity', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
stroke: 'red',
strokeWidth: 20,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5,
draggable: true
});
layer.add(rect);
stage.add(layer);
assert.equal(rect.getX(), 100);
assert.equal(rect.getY(), 50);
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;drawImage([object HTMLCanvasElement],0,0);restore();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();');
});
});

80
test/unit/shapes/Image-test.js
View File

@@ -210,12 +210,13 @@ suite('Image', function(){
draggable: true,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOffset: 20,
shadowOpacity: 0.2
});
// override color key with black
lion.colorKey = '000000';
lion.colorKey = '#000000';
Kinetic.shapes['#000000'] = lion;
layer.add(lion);
@@ -227,6 +228,10 @@ suite('Image', function(){
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();');
var hitTrace = layer.hitCanvas.getContext().getTrace();
//console.log(hitTrace);
assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();');
done();
});
@@ -303,4 +308,75 @@ suite('Image', function(){
});
// ======================================================
test('image with opacity and shadow', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: [50, 30],
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.5,
shadowOffset: 20
});
layer.add(darth);
stage.add(layer);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();globalAlpha=0.5;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();');
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('image with stroke, opacity and shadow', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: [50, 30],
draggable: true,
opacity: 0.5,
shadowColor: 'black',
shadowBlur: 10,
shadowOpacity: 0.5,
shadowOffset: 20,
stroke: 'red',
strokeWidth: 20
});
layer.add(darth);
stage.add(layer);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLCanvasElement],0,0);restore();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();');
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
});

6
test/unit/shapes/Line-test.js
View File

@@ -155,9 +155,9 @@ suite('Line', function() {
stage.add(layer);
var relaxedTrace = layer.getContext().getTrace(true);
//console.log(relaxedTrace);
assert.equal(relaxedTrace, 'clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();globalAlpha=0.5;shadowColor=black;shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();');
});
});