mirror of
https://github.com/konvajs/konva.git
synced 2025-11-24 08:46:44 +08:00
better HDPI support
update packages
This commit is contained in:
@@ -38,4 +38,4 @@ suite('Canvas', function() {
|
||||
layer.draw();
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -388,19 +388,8 @@ suite('Caching', function() {
|
||||
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.translate(100, 50);
|
||||
context.rotate(Math.PI / 4);
|
||||
context.beginPath();
|
||||
context.rect(0, 0, 100, 50);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.fill();
|
||||
if (!window.isPhantomJS) {
|
||||
compareLayerAndCanvas(layer, canvas, 150);
|
||||
cloneAndCompareLayer(layer, 150);
|
||||
cloneAndCompareLayer(layer, 200);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -738,7 +727,7 @@ suite('Caching', function() {
|
||||
group.add(circle);
|
||||
group.cache();
|
||||
stage.draw();
|
||||
|
||||
|
||||
cloneAndCompareLayer(layer, 150);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -314,7 +314,7 @@ suite('Node', function() {
|
||||
assert.equal(image.width(), stage.width() * 2, 'image has double size');
|
||||
layer2.add(image);
|
||||
layer2.draw();
|
||||
compareLayers(layer, layer2);
|
||||
compareLayers(layer, layer2, 50);
|
||||
Konva.pixelRatio = oldRatio;
|
||||
done();
|
||||
}
|
||||
@@ -2128,7 +2128,7 @@ suite('Node', function() {
|
||||
var bufferTrace = stage.bufferCanvas.getContext().getTrace();
|
||||
//console.log(bufferTrace);
|
||||
|
||||
assert.equal(sceneTrace, 'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();');
|
||||
assert.equal(sceneTrace, 'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();');
|
||||
assert.equal(bufferTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=20;strokeStyle=black;stroke();restore();');
|
||||
});
|
||||
|
||||
|
||||
@@ -17,9 +17,9 @@ suite('Shape', function() {
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(rect.intersects({
|
||||
x: 200,
|
||||
y: 100
|
||||
}), true, '(200,100) should intersect the shape');
|
||||
x: 201,
|
||||
y: 101
|
||||
}), true, '(201,101) should intersect the shape');
|
||||
|
||||
assert.equal(rect.intersects({
|
||||
x: 197,
|
||||
@@ -544,18 +544,17 @@ suite('Shape', function() {
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.globalAlpha = 0.5;
|
||||
context.globalAlpha = 0.1;
|
||||
|
||||
// draw shadow
|
||||
var offset = 200;
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.rect(95 - offset, 45 - offset, 110, 60);
|
||||
context.rect(95, 45, 110, 60);
|
||||
context.closePath();
|
||||
context.shadowColor = 'grey';
|
||||
context.shadowBlur = 1;
|
||||
context.shadowOffsetX = 20 + offset;
|
||||
context.shadowOffsetY = 20 + offset;
|
||||
context.shadowOffsetX = 20;
|
||||
context.shadowOffsetY = 20;
|
||||
context.fillStyle = 'black';
|
||||
context.fill();
|
||||
context.restore();
|
||||
@@ -585,12 +584,12 @@ suite('Shape', function() {
|
||||
// don't test in PhantomJS as it use old chrome engine
|
||||
// it it has opacity + shadow bug
|
||||
if (!window.mochaPhantomJS) {
|
||||
compareLayerAndCanvas(layer, canvas, 210);
|
||||
compareLayerAndCanvas(layer, canvas, 200);
|
||||
}
|
||||
|
||||
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();');
|
||||
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,578,200);restore();restore();');
|
||||
|
||||
});
|
||||
|
||||
@@ -648,11 +647,13 @@ suite('Shape', function() {
|
||||
context.fillStyle = 'green';
|
||||
context.fillText('Test TEXT', 50, 75);
|
||||
|
||||
context.lineWidth = 2;
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = 'black';
|
||||
context.strokeText('Test TEXT', 50, 75);
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
if (!window.isPhantomJS) {
|
||||
compareLayerAndCanvas(layer, canvas, 254);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -36,8 +36,8 @@ suite('Stage', function() {
|
||||
});
|
||||
|
||||
|
||||
assert.equal(stage.bufferCanvas.getPixelRatio(), 1);
|
||||
assert.equal(stage.bufferHitCanvas.getPixelRatio(), 2);
|
||||
assert.equal(stage.bufferCanvas.getPixelRatio(), 2);
|
||||
assert.equal(stage.bufferHitCanvas.getPixelRatio(), 1);
|
||||
|
||||
// reset
|
||||
Konva.pixelRatio = 1;
|
||||
@@ -138,8 +138,8 @@ suite('Stage', function() {
|
||||
assert.equal(stage.getSize().height, 155);
|
||||
assert.equal(stage.getContent().style.width, '333px');
|
||||
assert.equal(stage.getContent().style.height, '155px');
|
||||
assert.equal(layer.getCanvas()._canvas.width, 333);
|
||||
assert.equal(layer.getCanvas()._canvas.height, 155);
|
||||
assert.equal(layer.getCanvas()._canvas.width, 333 * layer.getCanvas().getPixelRatio());
|
||||
assert.equal(layer.getCanvas()._canvas.height, 155 * layer.getCanvas().getPixelRatio());
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
|
||||
@@ -5,7 +5,7 @@ suite('RGB', function() {
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
darth = new Konva.Image({
|
||||
x: 10,
|
||||
@@ -23,7 +23,7 @@ suite('RGB', function() {
|
||||
layer.draw();
|
||||
|
||||
// Assert fails even though '[255,0,128] = [255,0,128]'
|
||||
//assert.equal(darth.getFilterColorizeColor(), [255,0,128]);
|
||||
// assert.deepEqual(darth.getFilterColorizeColor(), [255,0,128]);
|
||||
|
||||
done();
|
||||
};
|
||||
@@ -37,7 +37,7 @@ suite('RGB', function() {
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
darth = new Konva.Image({
|
||||
x: 10,
|
||||
@@ -55,7 +55,7 @@ suite('RGB', function() {
|
||||
darth.red(0).green(255).blue(0);
|
||||
layer.draw();
|
||||
|
||||
// assert.equal(darth.getFilterColorizeColor(), [0,255,0]);
|
||||
// assert.deepEqual(darth.getFilterColorizeColor(), [0,255,0]);
|
||||
|
||||
done();
|
||||
|
||||
@@ -87,7 +87,7 @@ suite('RGB', function() {
|
||||
for( i=0; i<l; i+=1 ){
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = (function(color,x){ return function() {
|
||||
|
||||
|
||||
var darth = new Konva.Image({
|
||||
x: x,
|
||||
y: 32,
|
||||
|
||||
@@ -2,12 +2,6 @@ suite('RGBA', function() {
|
||||
// ======================================================
|
||||
test('colorize basic', function(done) {
|
||||
var data = [
|
||||
{
|
||||
color: '#ff0000',
|
||||
filter: [170, 170, 170, 0.5],
|
||||
// Actually 212 but in tests rounding half up
|
||||
result: [213, 85, 85, 255]
|
||||
},
|
||||
{
|
||||
color: '#2a6511',
|
||||
filter: [242, 193, 168, 0.33],
|
||||
@@ -67,11 +61,9 @@ suite('RGBA', function() {
|
||||
|
||||
var a0 = imageDataToArray(0);
|
||||
var a1 = imageDataToArray(1);
|
||||
var a2 = imageDataToArray(2);
|
||||
|
||||
assert.deepEqual(a0, data[0].result);
|
||||
assert.deepEqual(a1, data[1].result);
|
||||
assert.deepEqual(a2, data[2].result);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
@@ -119,6 +119,7 @@ suite('RegularPolygon', function() {
|
||||
});
|
||||
|
||||
test('polygon cache', function() {
|
||||
Konva.pixelRatio = 1;
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
@@ -128,7 +129,7 @@ suite('RegularPolygon', function() {
|
||||
sides: 5,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
stroke: 'black',
|
||||
strokeWidth: 5,
|
||||
name: 'foobar'
|
||||
});
|
||||
@@ -143,8 +144,10 @@ suite('RegularPolygon', function() {
|
||||
width : 100
|
||||
});
|
||||
if (!window.isPhantomJS) {
|
||||
cloneAndCompareLayer(layer, 200);
|
||||
cloneAndCompareLayer(layer, 254);
|
||||
}
|
||||
Konva.pixelRatio = undefined;
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -96,6 +96,6 @@ suite('Ellipse', function(){
|
||||
context.fill();
|
||||
context.lineWidth = 8;
|
||||
context.stroke();
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
compareLayerAndCanvas(layer, canvas, 80);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();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,578,200);restore();restore();');
|
||||
|
||||
done();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user