lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

some toDataURL fixes and refactoring

Browse Source
This commit is contained in:
Anton Lavrenov 2018-08-16 14:52:42 +07:00
parent 363f9943c5
commit 22eee6530f
7 changed files with 100 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.2.1
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Mon Aug 13 2018
* Date: Thu Aug 16 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -2561,12 +2561,9 @@
drawBorder = conf.drawBorder || false;
if (!width || !height) {
// make throw async, because we don't need to stop funcion
setTimeout(function() {
Konva.Util.throw(
'Width or height of caching configuration equals 0. Caching is ignored.'
);
});
Konva.Util.error(
'Can not cache the node. Width or height of the node equals 0. Caching is skipped.'
);
return;
}
@ -3966,8 +3963,8 @@
var box = this.getClientRect();
var stage = this.getStage(),
x = config.x || box.x,
y = config.y || box.y,
x = config.x !== undefined ? config.x : box.x,
y = config.y !== undefined ? config.y : box.y,
pixelRatio = config.pixelRatio || 1,
canvas = new Konva.SceneCanvas({
width: config.width || box.width || (stage ? stage.getWidth() : 0),
@ -4028,7 +4025,11 @@
config = config || {};
var mimeType = config.mimeType || null,
quality = config.quality || null;
return this._toKonvaCanvas(config).toDataURL(mimeType, quality);
var url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
if (config.callback) {
config.callback(url);
}
return url;
},
/**
* converts node into an image. Since the toImage
@ -4059,8 +4060,10 @@
if (!config || !config.callback) {
throw 'callback required for toImage method config argument';
}
var callback = config.callback;
delete config.callback;
Konva.Util._getImage(this.toDataURL(config), function(img) {
config.callback(img);
callback(img);
});
},
setSize: function(size) {
@ -10354,12 +10357,10 @@
getContent: function() {
return this.content;
},
toDataURL: function(config) {
_toKonvaCanvas: function(config) {
config = config || {};
var mimeType = config.mimeType || null,
quality = config.quality || null,
x = config.x || 0,
var x = config.x || 0,
y = config.y || 0,
canvas = new Konva.SceneCanvas({
width: config.width || this.getWidth(),
@ -10377,24 +10378,16 @@
if (!layer.isVisible()) {
return;
}
var width = layer.getCanvas().getWidth();
var height = layer.getCanvas().getHeight();
var ratio = layer.getCanvas().getPixelRatio();
var layerCanvas = layer._toKonvaCanvas(config);
_context.drawImage(
layer.getCanvas()._canvas,
0,
0,
width / ratio,
height / ratio
layerCanvas._canvas,
x,
y,
layerCanvas.getWidth() / layerCanvas.getPixelRatio(),
layerCanvas.getHeight() / layerCanvas.getPixelRatio()
);
});
var src = canvas.toDataURL(mimeType, quality);
if (config.callback) {
config.callback(src);
}
return src;
return canvas;
},
/**
* converts stage into an image.
@ -11173,6 +11166,15 @@
this.canvas.setSize(width, height);
return this;
},
_toKonvaCanvas: function(config) {
config = config || {};
config.width = config.width || this.getWidth();
config.height = config.height || this.getHeight();
config.x = config.x !== undefined ? config.x : this.getX();
config.y = config.y !== undefined ? config.y : this.getY();
return Konva.Node.prototype._toKonvaCanvas.call(this, config);
},
/**
* get/set width of layer.getter return width of stage. setter doing nothing.
* if you want change width use `stage.width(value);`

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/BaseLayer.js
View File

@ -172,6 +172,15 @@
this.canvas.setSize(width, height);
return this;
},
_toKonvaCanvas: function(config) {
config = config || {};
config.width = config.width || this.getWidth();
config.height = config.height || this.getHeight();
config.x = config.x !== undefined ? config.x : this.getX();
config.y = config.y !== undefined ? config.y : this.getY();
return Konva.Node.prototype._toKonvaCanvas.call(this, config);
},
/**
* get/set width of layer.getter return width of stage. setter doing nothing.
* if you want change width use `stage.width(value);`

23
src/Node.js
View File

@ -180,12 +180,9 @@
drawBorder = conf.drawBorder || false;
if (!width || !height) {
// make throw async, because we don't need to stop funcion
setTimeout(function() {
Konva.Util.throw(
'Width or height of caching configuration equals 0. Caching is ignored.'
);
});
Konva.Util.error(
'Can not cache the node. Width or height of the node equals 0. Caching is skipped.'
);
return;
}
@ -1585,8 +1582,8 @@
var box = this.getClientRect();
var stage = this.getStage(),
x = config.x || box.x,
y = config.y || box.y,
x = config.x !== undefined ? config.x : box.x,
y = config.y !== undefined ? config.y : box.y,
pixelRatio = config.pixelRatio || 1,
canvas = new Konva.SceneCanvas({
width: config.width || box.width || (stage ? stage.getWidth() : 0),
@ -1647,7 +1644,11 @@
config = config || {};
var mimeType = config.mimeType || null,
quality = config.quality || null;
return this._toKonvaCanvas(config).toDataURL(mimeType, quality);
var url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
if (config.callback) {
config.callback(url);
}
return url;
},
/**
* converts node into an image. Since the toImage
@ -1678,8 +1679,10 @@
if (!config || !config.callback) {
throw 'callback required for toImage method config argument';
}
var callback = config.callback;
delete config.callback;
Konva.Util._getImage(this.toDataURL(config), function(img) {
config.callback(img);
callback(img);
});
},
setSize: function(size) {

28
src/Stage.js
View File

@ -232,12 +232,10 @@
getContent: function() {
return this.content;
},
toDataURL: function(config) {
_toKonvaCanvas: function(config) {
config = config || {};
var mimeType = config.mimeType || null,
quality = config.quality || null,
x = config.x || 0,
var x = config.x || 0,
y = config.y || 0,
canvas = new Konva.SceneCanvas({
width: config.width || this.getWidth(),
@ -255,24 +253,16 @@
if (!layer.isVisible()) {
return;
}
var width = layer.getCanvas().getWidth();
var height = layer.getCanvas().getHeight();
var ratio = layer.getCanvas().getPixelRatio();
var layerCanvas = layer._toKonvaCanvas(config);
_context.drawImage(
layer.getCanvas()._canvas,
0,
0,
width / ratio,
height / ratio
layerCanvas._canvas,
x,
y,
layerCanvas.getWidth() / layerCanvas.getPixelRatio(),
layerCanvas.getHeight() / layerCanvas.getPixelRatio()
);
});
var src = canvas.toDataURL(mimeType, quality);
if (config.callback) {
config.callback(src);
}
return src;
return canvas;
},
/**
* converts stage into an image.

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

@ -1,4 +1,4 @@
suite('Node', function() {
suite.only('Node', function() {
// ======================================================
test('getType and getClassName', function() {
var stage = addStage();

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

@ -1046,19 +1046,19 @@ suite('Stage', function() {
assert.equal(dblicks, 1, 'first dbclick registered');
});
test('toDataURL in sync way', function() {
test('toCanvas in sync way', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'red',
fill: 'black',
radius: 50
});
layer.add(circle);
stage.add(layer);
compareCanvases(stage.toCanvas(), layer.toCanvas());
compareCanvases(stage.toCanvas(), layer.toCanvas(), 200);
});
test('toDataURL with hidden layer', function() {
@ -1078,6 +1078,36 @@ suite('Stage', function() {
assert.equal(stage.toDataURL() === stageDataUrl, false);
});
test('toDataURL works as toCanvas', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'red',
radius: 50
});
layer.add(circle);
stage.add(layer);
assert.equal(stage.toDataURL(), stage.toCanvas().toDataURL());
});
test('toDataURL should no relate on stage size', function() {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'red',
radius: stage.height() * 0.6
});
layer.add(circle);
stage.add(layer);
compareCanvases(stage.toCanvas(circle.getClientRect()), circle.toCanvas());
});
test('toCanvas with large size', function() {
var stage = addStage();
var layer = new Konva.Layer();