lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

toDataURL and toImage now work correctly on devices with a pixel ratio != 1

Browse Source
This commit is contained in:
Eric Rowell
2013-04-14 09:41:59 -07:00
parent 8657c57436
commit 90a2820e5b
6 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Layer.js
View File

@@ -25,24 +25,6 @@
this.canvas.getElement().style.position = 'absolute';
this.hitCanvas = new Kinetic.HitCanvas();
},
toDataURL: function(config) {
config = config || {};
var mimeType = config.mimeType || null,
quality = config.quality || null,
canvas, context,
x = config.x || 0,
y = config.y || 0;
// if dimension or position is defined, use Node toDataURL
if(config.width || config.height || config.x || config.y) {
return Kinetic.Node.prototype.toDataURL.call(this, config);
}
// otherwise get data url of the currently drawn layer
else {
return this.getCanvas().toDataURL(mimeType, quality);
}
},
/**
* get intersection object that contains shape and pixel data
* @name getIntersection
@@ -75,10 +57,10 @@
return null;
},
drawScene: function(canvas) {
var layer = this.getLayer();
var canvas = canvas || this.getCanvas();
if(layer && layer.getClearBeforeDraw()) {
layer.getCanvas().clear();
if(this.getClearBeforeDraw()) {
canvas.clear();
}
Kinetic.Container.prototype.drawScene.call(this, canvas);

22
src/Node.js
View File

@@ -735,28 +735,22 @@
var config = config || {},
mimeType = config.mimeType || null,
quality = config.quality || null,
stage = this.getStage(),
x = config.x || 0,
y = config.y || 0,
canvas, context;
//if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas
if(config.width && config.height) {
canvas = new Kinetic.SceneCanvas({
width: config.width,
height: config.height,
pixelRatio: 1
});
}
else {
canvas = this.getStage().bufferCanvas;
canvas.clear();
}
context = canvas.getContext();
width: config.width || stage.getWidth(),
height: config.height || stage.getHeight(),
pixelRatio: 1
}),
context = canvas.getContext();
context.save();
if(x || y) {
context.translate(-1 * x, -1 * y);
}
this.drawScene(canvas);
context.restore();

3
src/Stage.js
View File

@@ -205,7 +205,8 @@
y = config.y || 0,
canvas = new Kinetic.SceneCanvas({
width: config.width || this.getWidth(),
height: config.height || this.getHeight()
height: config.height || this.getHeight(),
pixelRatio: 1
}),
context = canvas.getContext(),
layers = this.children;

3
tests/assets/unitDataUrls.js
View File

File diff suppressed because one or more lines are too long

9
tests/js/unit/layerTests.js
View File

@@ -133,15 +133,20 @@ Test.Modules.LAYER = {
layer.draw();
}
// TODO: investigate re-enabling toDataURL with clearBeforeDraw = false.
// disabled it for now because toDataURL breaks on devices with pixelRatio != 1
//console.log(layer.toDataURL());
/*
stage.toDataURL({
callback: function(dataUrl) {
warn(dataUrls['stacked green circles'] === dataUrl, 'stacked green circles stage data url is incorrect');
testDataUrl(layer.toDataURL(), 'stacked green circles', 'stacked green circles stage data url is incorrect');
}
});
*/
warn(dataUrls['stacked green circles'] === layer.toDataURL(), 'stacked green circles layer data url is incorrect');
//testDataUrl(layer.toDataURL(), 'stacked green circles', 'stacked green circles layer data url is incorrect');
testDataUrl(layer.getCanvas().toDataURL(), 'stacked green circles', 'stacked green circles layer data url is incorrect');
},
'save layer as png (click on Circle to open new window)': function(containerId) {

40
tests/js/unit/nodeTests.js
View File

@@ -23,6 +23,42 @@ Test.Modules.NODE = {
test(circle.getAbsoluteOpacity() === 0.25, 'abs opacity should be 0.25');
test(layer.getAbsoluteOpacity() === 0.5, 'abs opacity should be 0.5');
},
'test pixel ratio toDataURL': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
// override pixel ratio
layer.canvas = new Kinetic.SceneCanvas({
pixelRatio: 2
});
layer.canvas.getElement().style.position = 'absolute';
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
test(layer.canvas.pixelRatio === 2, 'layer pixel ratio should be 2');
testDataUrl(layer.toDataURL(), 'green circle', 'problem with pixel ratio and dataURL');
//console.log(layer.toDataURL())
},
'listen and don\'t listen': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -2613,9 +2649,9 @@ Test.Modules.NODE = {
layer.hide();
layer.draw();
//console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['cleared'], 'layer is still visible');
//console.log(layer.toDataURL());
testDataUrl(layer.toDataURL(), 'cleared', 'layer is still visible');
},
'hide group': function(containerId) {
var stage = new Kinetic.Stage({