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

cache + pixelRatio

Browse Source
This commit is contained in:
lavrton
2015-02-14 22:12:54 +07:00
parent 7d65463e3c
commit c3511210f2
23 changed files with 449 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
test/unit/Canvas-test.js
View File

@@ -6,12 +6,13 @@ suite('Canvas', function() {
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 578/2,
y: 100,
x: 100,
y: 70,
radius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 4
strokeWidth: 4,
draggable : true
});
layer.add(circle);
@@ -22,6 +23,7 @@ suite('Canvas', function() {
stage.setHeight(100);
stage.draw();
assert.equal(layer.getCanvas().getPixelRatio(), Konva.pixelRatio || window.devicePixelRatio || 1);
layer.getCanvas().setPixelRatio(1);
assert.equal(layer.getCanvas().getPixelRatio(), 1);

191
test/unit/Node-cache-test.js
View File

@@ -1,5 +1,5 @@
suite('Caching', function() {
this.timeout(5000);
// CACHING SHAPE
test('cache simple rectangle', function() {
@@ -12,7 +12,8 @@ suite('Caching', function() {
y: 50,
width: 100,
height: 50,
fill: 'green'
fill: 'green',
draggable : true
});
rect.cache();
@@ -26,8 +27,10 @@ suite('Caching', function() {
context.closePath();
context.fillStyle = 'green';
context.fill();
compareLayerAndCanvas(layer, canvas, 10);
compareSceneAndHit(layer);
cloneAndCompareLayer(layer);
});
test('cache simple rectangle with transform', function() {
@@ -60,8 +63,8 @@ suite('Caching', function() {
context.fill();
if (!window.mochaPhantomJS) {
compareLayerAndCanvas(layer, canvas, 40);
compareSceneAndHit(layer);
compareLayerAndCanvas(layer, canvas, 200);
cloneAndCompareLayer(layer, 150);
}
});
@@ -94,8 +97,89 @@ suite('Caching', function() {
context.fill();
context.lineWidth = 20;
context.stroke();
compareLayerAndCanvas(layer, canvas, 10);
compareSceneAndHit(layer);
compareLayerAndCanvas(layer, canvas, 50);
cloneAndCompareLayer(layer, 50);
});
test.skip('cache rectangle with fill and opacity', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
opacity : 0.5
});
rect.cache();
rect.opacity(0.3);
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.globalAlpha = 0.3;
context.beginPath();
context.rect(100, 50, 100, 50);
context.closePath();
context.fillStyle = 'green';
context.fill();
compareLayerAndCanvas(layer, canvas, 5);
});
test('cache rectangle with fill, stroke opacity', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
opacity : 0.5,
stroke : 'black',
strokeWidth : 10
});
rect.cache();
rect.opacity(0.3);
layer.add(rect);
stage.add(layer);
cloneAndCompareLayer(layer, 100);
});
test.skip('cache rectangle with fill, shadow and opacity', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
opacity : 0.5,
shadowBlur : 10,
shadowColor : 'black'
});
rect.cache();
rect.opacity(0.3);
layer.add(rect);
stage.add(layer);
if (!window.mochaPhantomJS) {
cloneAndCompareLayer(layer, 10);
}
});
test('cache rectangle with fill and simple shadow', function() {
@@ -110,7 +194,8 @@ suite('Caching', function() {
height: 50,
fill: 'green',
shadowColor : 'black',
shadowBlur : 10
shadowBlur : 10,
draggable : true
});
rect.cache();
@@ -126,6 +211,10 @@ suite('Caching', function() {
context.shadowColor = 'black';
context.shadowBlur = 10;
context.fill();
showCanvas(rect._cache.canvas.scene._canvas);
showCanvas(rect._cache.canvas.hit._canvas);
showHit(layer);
compareLayerAndCanvas(layer, canvas, 10);
});
@@ -273,7 +362,7 @@ suite('Caching', function() {
context.fillStyle = 'green';
context.fill();
compareLayerAndCanvas(layer, canvas, 10);
compareSceneAndHit(layer);
cloneAndCompareLayer(layer);
});
test('cache group with simple rectangle with transform', function() {
@@ -311,7 +400,7 @@ suite('Caching', function() {
context.fill();
if (!window.mochaPhantomJS) {
compareLayerAndCanvas(layer, canvas, 150);
compareSceneAndHit(layer);
cloneAndCompareLayer(layer, 150);
}
});
@@ -504,6 +593,86 @@ suite('Caching', function() {
context.restore();
compareLayerAndCanvas(layer, canvas, 50);
compareLayerAndCanvas(layer, canvas, 150);
});
test('cache shape that is larger than stage but need buffer canvas', function(){
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 400,
fill: 'red',
stroke: 'black',
strokeWidth: 50,
opacity : 0.5,
scaleX : 1 / 5,
scaleY : 1 / 5
});
group.add(circle);
layer.add(group);
stage.add(layer);
circle.cache();
layer.draw();
cloneAndCompareLayer(layer, 200);
});
test('cache nested groups', function() {
var stage = addStage();
var layer = new Konva.Layer();
var groupOuter = new Konva.Group({
x: 50,
y: 10
});
var groupInner = new Konva.Group({
x: 10,
y: 10,
draggable : true
});
var rect = new Konva.Rect({
width: 50,
height: 50,
stroke: 'grey',
strokeWidth: 3,
fill: 'yellow'
});
var text = new Konva.Text({
x: 18,
y: 15,
text: 'A',
fill: 'black',
fontSize: 24
});
groupInner.add(rect);
groupInner.add(text);
groupOuter.add(groupInner);
layer.add(groupOuter);
stage.add(layer);
groupInner.cache();
layer.draw();
cloneAndCompareLayer(layer, 150);
groupInner.clearCache();
groupOuter.cache();
layer.draw();
cloneAndCompareLayer(layer, 150);
groupOuter.clearCache();
groupInner.clearCache();
rect.cache();
layer.draw();
cloneAndCompareLayer(layer, 150);
});
});

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

@@ -2689,8 +2689,9 @@ suite('Node', function() {
layer.on('click', function() {
layerClick += 1;
});
showHit(layer);
var top = stage.content.getBoundingClientRect().top;
stage._mousedown({
clientX: 150,
clientY: 75 + top
@@ -2701,7 +2702,7 @@ suite('Node', function() {
clientY: 75 + top
});
assert.equal(rectClick, 1, 'click on rectange');
assert.equal(rectClick, 1, 'click on rectangle');
assert.equal(groupClick, 0, 'no click on group');
assert.equal(layerClick, 0, 'no click on layer');
});

8
test/unit/Stage-test.js
View File

@@ -505,7 +505,8 @@ suite('Stage', function() {
clientY: clientY
});
Konva.DD._endDragAfter({dragEndNode:rect});
assert.equal(Konva.isDragging(), false);
assert.equal(Konva.DD.node, undefined);
// simulate click
stage._mousedown({
clientX: 66,
@@ -516,5 +517,8 @@ suite('Stage', function() {
clientX: 66,
clientY: clientY
});
})
Konva.DD._endDragBefore({dragEndNode:rect});
assert.equal(Konva.isDragging(), false);
assert.equal(Konva.DD.node, undefined);
});
});

1
test/unit/Tween-test.js
View File

@@ -132,7 +132,6 @@ suite('Tween', function() {
setTimeout(function(){
"use strict";
assert.equal(circle.x(), 200);
assert.equal(circle.y(), 100);
done();

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

@@ -1,6 +1,7 @@
suite('Blur', function() {
// ======================================================
test('basic blur', function(done) {
this.timeout(5000);
var stage = addStage();
var imageObj = new Image();

2
test/unit/plugins/Label-test.js
View File

@@ -214,7 +214,7 @@ suite('Label', function() {
stage.add(layer);
cloneAndCompareLayer(layer, 150);
cloneAndCompareLayer(layer, 220);
});
});

1
test/unit/plugins/Path-test.js
View File

@@ -414,6 +414,7 @@ suite('Path', function() {
// ======================================================
test('Tiger (RAWR!)', function() {
this.timeout(5000);
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();

2
test/unit/plugins/RegularPolygon-test.js
View File

@@ -143,7 +143,7 @@ suite('RegularPolygon', function() {
width : 100
});
if (!window.mochaPhantomJS) {
cloneAndCompareLayer(layer, 50);
cloneAndCompareLayer(layer, 200);
}
});

3
test/unit/shapes/Blob-test.js
View File

@@ -106,12 +106,13 @@ suite('Blob', function(){
tension: 0.3,
closed: true
});
blob.cache();
layer.add(blob);
stage.add(layer);
if (!window.mochaPhantomJS) {
cloneAndCompareLayer(layer, 50);
cloneAndCompareLayer(layer, 100);
}
});
});

2
test/unit/shapes/Circle-test.js
View File

@@ -266,6 +266,6 @@ suite('Circle', function(){
context.fill();
context.lineWidth = 4;
context.stroke();
compareLayerAndCanvas(layer, canvas, 50);
compareLayerAndCanvas(layer, canvas, 100);
});
});

30
test/unit/shapes/Text-test.js
View File

@@ -366,5 +366,35 @@ suite('Text', function(){
});
});
test.skip('cache text', function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
fontSize: 20,
y : 50,
x : 50,
fill: 'black',
text: 'Hello world with cache!\nHow are you?',
draggable : true
});
text.cache();
layer.add(text);
var text2 = new Konva.Text({
fontSize: 20,
y : 50,
x : 260,
fill: 'black',
text: 'Hello world without cache!\nHow are you?',
draggable : true
});
layer.add(text2);
stage.add(layer);
});
});