lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix for correct image/dataURL/canvas exports for Konva.Stage.

Browse Source
This commit is contained in:
Anton Lavrenov 2020-11-10 12:50:29 -05:00
parent 16fc74036d
commit 0830819eba
5 changed files with 84 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
## 7.1.6
* Fix for correct image/dataURL/canvas exports for `Konva.Stage`.
## 7.1.5
* Performance fixes for dragging many nodes with `Konva.Transformer`.

20
konva.js
View File

@ -6098,20 +6098,26 @@
};
Stage.prototype._toKonvaCanvas = function (config) {
config = config || {};
var x = config.x || 0, y = config.y || 0, canvas = new SceneCanvas({
width: config.width || this.width(),
height: config.height || this.height(),
config.x = config.x || 0;
config.y = config.y || 0;
config.width = config.width || this.width();
config.height = config.height || this.height();
var canvas = new SceneCanvas({
width: config.width,
height: config.height,
pixelRatio: config.pixelRatio || 1,
}), _context = canvas.getContext()._context, layers = this.children;
if (x || y) {
_context.translate(-1 * x, -1 * y);
});
var _context = canvas.getContext()._context;
var layers = this.children;
if (config.x || config.y) {
_context.translate(-1 * config.x, -1 * config.y);
}
layers.each(function (layer) {
if (!layer.isVisible()) {
return;
}
var layerCanvas = layer._toKonvaCanvas(config);
_context.drawImage(layerCanvas._canvas, x, y, layerCanvas.getWidth() / layerCanvas.getPixelRatio(), layerCanvas.getHeight() / layerCanvas.getPixelRatio());
_context.drawImage(layerCanvas._canvas, config.x, config.y, layerCanvas.getWidth() / layerCanvas.getPixelRatio(), layerCanvas.getHeight() / layerCanvas.getPixelRatio());
});
return canvas;
};

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

29
src/Stage.ts
View File

@ -278,18 +278,21 @@ export class Stage extends Container<Layer> {
_toKonvaCanvas(config) {
config = config || {};
var x = config.x || 0,
y = config.y || 0,
canvas = new SceneCanvas({
width: config.width || this.width(),
height: config.height || this.height(),
pixelRatio: config.pixelRatio || 1,
}),
_context = canvas.getContext()._context,
layers = this.children;
config.x = config.x || 0;
config.y = config.y || 0;
config.width = config.width || this.width();
config.height = config.height || this.height();
if (x || y) {
_context.translate(-1 * x, -1 * y);
var canvas = new SceneCanvas({
width: config.width,
height: config.height,
pixelRatio: config.pixelRatio || 1,
});
var _context = canvas.getContext()._context;
var layers = this.children;
if (config.x || config.y) {
_context.translate(-1 * config.x, -1 * config.y);
}
layers.each(function (layer) {
@ -299,8 +302,8 @@ export class Stage extends Container<Layer> {
var layerCanvas = layer._toKonvaCanvas(config);
_context.drawImage(
layerCanvas._canvas,
x,
y,
config.x,
config.y,
layerCanvas.getWidth() / layerCanvas.getPixelRatio(),
layerCanvas.getHeight() / layerCanvas.getPixelRatio()
);

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

@ -337,6 +337,56 @@ suite('Node', function () {
});
});
// ======================================================
test('toDataURL with moved layer', function () {
var stage = addStage();
var layer = new Konva.Layer({
x: 50,
y: 50,
});
stage.add(layer);
var circle = new Konva.Circle({
fill: 'green',
x: 50,
y: 50,
radius: 50,
});
layer.add(circle);
stage.draw();
var stageExport = stage.toCanvas({
pixelRatio: layer.getCanvas().getPixelRatio(),
});
compareLayerAndCanvas(layer, stageExport);
});
// ======================================================
test('toDataURL with moved layer and moved export', function () {
var stage = addStage();
var layer = new Konva.Layer({});
stage.add(layer);
var circle = new Konva.Circle({
fill: 'green',
x: 50,
y: 50,
radius: 50,
});
layer.add(circle);
stage.draw();
var stageExport = stage.toCanvas({
x: 50,
y: 50,
pixelRatio: layer.getCanvas().getPixelRatio(),
});
layer.x(-50);
layer.y(-50);
layer.draw();
compareLayerAndCanvas(layer, stageExport);
});
// ======================================================
test('toDataURL of moved shape', function () {
var stage = addStage();