mirror of
https://github.com/konvajs/konva.git
synced 2025-11-24 08:46:44 +08:00
performance improvement
This commit is contained in:
lavrton
@@ -5,6 +5,7 @@ var assert = chai.assert,
|
||||
origAssertEqual = assert.equal,
|
||||
origAssert = assert,
|
||||
origNotEqual = assert.notEqual,
|
||||
origDeepEqual = assert.deepEqual,
|
||||
assertionCount = 0,
|
||||
assertions = document.createElement('em');
|
||||
|
||||
@@ -34,6 +35,11 @@ function init() {
|
||||
assertions.innerHTML = ++assertionCount;
|
||||
};
|
||||
|
||||
assert.deepEqual = function() {
|
||||
origDeepEqual.apply(this, arguments);
|
||||
assertions.innerHTML = ++assertionCount;
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var mochaStats = document.getElementById('mocha-stats');
|
||||
|
||||
|
||||
@@ -375,33 +375,49 @@ suite('Shape', function() {
|
||||
|
||||
// ======================================================
|
||||
test('fill with shadow and opacity', function(){
|
||||
var stage = addStage();
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
opacity: 0.5,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: {x:10, y:10},
|
||||
shadowOpacity: 0.5
|
||||
});
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
opacity: 0.5,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: {x:10, y:10},
|
||||
shadowOpacity: 0.5
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(rect.getX(), 100);
|
||||
assert.equal(rect.getY(), 50);
|
||||
assert.equal(rect.getX(), 100);
|
||||
assert.equal(rect.getY(), 50);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.globalAlpha = 0.5;
|
||||
// rect
|
||||
context.beginPath();
|
||||
context.rect(100, 50, 100, 50);
|
||||
context.closePath();
|
||||
|
||||
context.fillStyle = 'green';
|
||||
context.shadowColor = 'rgba(0,0,0,0.5)';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.fill();
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
|
||||
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();');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();restore();');
|
||||
|
||||
});
|
||||
|
||||
@@ -431,9 +447,29 @@ suite('Shape', function() {
|
||||
assert.equal(rect.getX(), 100);
|
||||
assert.equal(rect.getY(), 50);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.globalAlpha = 0.5;
|
||||
// rect
|
||||
context.beginPath();
|
||||
context.rect(100, 50, 100, 50);
|
||||
context.closePath();
|
||||
|
||||
context.strokeStyle = 'red';
|
||||
context.lineWidth = 20;
|
||||
|
||||
|
||||
context.shadowColor = 'rgba(0,0,0,0.5)';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.stroke();
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
|
||||
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();');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();restore();');
|
||||
});
|
||||
|
||||
|
||||
@@ -533,15 +569,8 @@ suite('Shape', function() {
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test.skip('fill and stroke with shadow and opacity', function(){
|
||||
test('fill and stroke with shadow and opacity', function(){
|
||||
var stage = addStage();
|
||||
// stage.bufferCanvas2._canvas.style.position = 'relative';
|
||||
|
||||
// document.body.appendChild(stage.bufferCanvas2._canvas);
|
||||
|
||||
stage.bufferCanvas._canvas.style.position = 'relative';
|
||||
|
||||
document.body.appendChild(stage.bufferCanvas._canvas);
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
@@ -553,8 +582,8 @@ suite('Shape', function() {
|
||||
stroke: 'black',
|
||||
strokeWidth: 10,
|
||||
shadowColor: 'grey',
|
||||
shadowBlur: 10,
|
||||
opacity : 0.5,
|
||||
shadowBlur : 1,
|
||||
shadowOffset: {
|
||||
x: 20,
|
||||
y: 20
|
||||
@@ -565,24 +594,21 @@ suite('Shape', function() {
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
console.log(trace);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.globalAlpha = 0.60;
|
||||
context.globalAlpha = 0.5;
|
||||
|
||||
// draw shadow
|
||||
var offset = 200;
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.rect(95, 45, 110, 60);
|
||||
context.rect(95 - offset, 45 - offset, 110, 60);
|
||||
context.closePath();
|
||||
context.shadowColor = 'grey';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 20;
|
||||
context.shadowOffsetY = 20;
|
||||
context.shadowBlur = 1;
|
||||
context.shadowOffsetX = 20 + offset;
|
||||
context.shadowOffsetY = 20 + offset;
|
||||
context.fillStyle = 'black';
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
@@ -597,14 +623,88 @@ suite('Shape', function() {
|
||||
context.lineWidth = 10;
|
||||
context.strokeStyle = 'black';
|
||||
context.stroke();
|
||||
context.fillStyle = 'green';
|
||||
context.fillRect(105, 55, 90, 40);
|
||||
context.restore();
|
||||
// context.stroke();
|
||||
// console.log(layer.getContext().getTrace());
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.fillStyle = 'green';
|
||||
context.rect(105, 55, 90, 40);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();save();shadowColor=rgba(128,128,128,1);shadowBlur=1;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();restore();');
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('text with fill and stroke with shadow', function(){
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var text = new Konva.Text({
|
||||
x: 50,
|
||||
y: 50,
|
||||
text : 'Test TEXT',
|
||||
fontSize : 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
shadowColor: 'grey',
|
||||
shadowBlur: 2,
|
||||
shadowOffset: {
|
||||
x: 20,
|
||||
y: 20
|
||||
}
|
||||
});
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.save();
|
||||
context.shadowColor = 'grey';
|
||||
context.shadowBlur = 2;
|
||||
context.shadowOffsetX = 20;
|
||||
context.shadowOffsetY = 20;
|
||||
context.font = 'normal 50px Arial';
|
||||
context.textBaseline = 'middle';
|
||||
|
||||
context.fillStyle = 'green';
|
||||
context.fillText('Test TEXT', 50, 75);
|
||||
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = 'black';
|
||||
context.strokeText('Test TEXT', 50, 75);
|
||||
|
||||
context.stroke();
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
// draw text again to remove shadow under stroke
|
||||
context.font = 'normal 50px Arial';
|
||||
context.textBaseline = 'middle';
|
||||
context.fillText('Test TEXT', 50, 75);
|
||||
context.fillStyle = 'green';
|
||||
context.fillText('Test TEXT', 50, 75);
|
||||
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = 'black';
|
||||
context.strokeText('Test TEXT', 50, 75);
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ======================================================
|
||||
test('shape intersect with shadow', function(){
|
||||
var stage = addStage();
|
||||
@@ -858,4 +958,31 @@ suite('Shape', function() {
|
||||
var trace = layer.getHitCanvas().getContext().getTrace(true);
|
||||
assert.equal(trace, 'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();');
|
||||
});
|
||||
|
||||
test('cache shadow color rgba', function() {
|
||||
var circle = new Konva.Circle({
|
||||
fill : 'green',
|
||||
radius : 50
|
||||
});
|
||||
// no shadow on start
|
||||
assert.equal(circle.hasShadow(), false);
|
||||
assert.equal(circle.getShadowRGBA(), undefined);
|
||||
|
||||
// set shadow
|
||||
circle.shadowColor('black');
|
||||
assert.equal(circle.hasShadow(), true);
|
||||
assert.equal(circle.getShadowRGBA(), 'rgba(0,0,0,1)');
|
||||
|
||||
// set another shadow property
|
||||
circle.shadowOpacity(0.2);
|
||||
assert.equal(circle.getShadowRGBA(), 'rgba(0,0,0,0.2)');
|
||||
|
||||
circle.shadowColor('rgba(10,10,10,0.5)');
|
||||
assert.equal(circle.getShadowRGBA(), 'rgba(10,10,10,0.1)');
|
||||
|
||||
|
||||
// reset shadow
|
||||
circle.shadowColor(null);
|
||||
assert.equal(circle.getShadowRGBA(), undefined);
|
||||
});
|
||||
});
|
||||
@@ -15,6 +15,28 @@ suite('Util', function(){
|
||||
blue: 200,
|
||||
alpha: 0.5
|
||||
}), 'rgba(100,150,200,0.5)');
|
||||
|
||||
});
|
||||
|
||||
test('test colorToRGBA', function(){
|
||||
assert.deepEqual(Konva.Util.colorToRGBA('black'), {
|
||||
r : 0,
|
||||
g : 0,
|
||||
b : 0,
|
||||
a : 1
|
||||
});
|
||||
|
||||
assert.deepEqual(Konva.Util.colorToRGBA('#ffcc00'), {
|
||||
r : 255,
|
||||
g : 204,
|
||||
b : 0,
|
||||
a : 1
|
||||
});
|
||||
|
||||
assert.deepEqual(Konva.Util.colorToRGBA(), {
|
||||
r : 0,
|
||||
g : 0,
|
||||
b : 0,
|
||||
a : 1
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
suite('Label', function() {
|
||||
// ======================================================
|
||||
test.skip('add label', function() {
|
||||
test('add label', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
|
||||
@@ -248,7 +248,7 @@ suite('Image', function(){
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
darth = new Konva.Image({
|
||||
var darth = new Konva.Image({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
@@ -259,7 +259,7 @@ suite('Image', function(){
|
||||
opacity: 0.5,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOpacity: 0.5,
|
||||
shadowOpacity: 0.1,
|
||||
shadowOffset: {x: 20, y:20}
|
||||
});
|
||||
|
||||
@@ -268,7 +268,7 @@ suite('Image', function(){
|
||||
|
||||
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();');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();');
|
||||
|
||||
done();
|
||||
|
||||
@@ -277,13 +277,13 @@ suite('Image', function(){
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test.skip('image with stroke, opacity and shadow', function(done) {
|
||||
test('image with stroke, opacity and shadow', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
darth = new Konva.Image({
|
||||
var darth = new Konva.Image({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
@@ -305,7 +305,7 @@ suite('Image', function(){
|
||||
|
||||
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();');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();restore();');
|
||||
|
||||
done();
|
||||
|
||||
|
||||
@@ -132,10 +132,31 @@ suite('Line', function() {
|
||||
layer.add(line);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.save();
|
||||
context.lineJoin = 'round';
|
||||
context.lineCap = 'round';
|
||||
context.lineWidth = 20;
|
||||
context.strokeStyle = 'blue';
|
||||
|
||||
context.shadowColor = 'rgba(0,0,0,0.5)';
|
||||
context.shadowBlur = 20;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.moveTo(73, 160);
|
||||
context.lineTo(340, 23);
|
||||
|
||||
context.stroke();
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 5);
|
||||
|
||||
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();');
|
||||
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();restore();');
|
||||
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user