fix buffer usage in export for stage and layer. fix #1903

This commit is contained in:
Anton Lavrevov 2025-03-28 12:52:40 -05:00
parent 4eddaf813d
commit fd77f305d1
4 changed files with 49 additions and 5 deletions

View File

@ -120,8 +120,6 @@ export abstract class Container<
* layer.add(shape1, shape2, shape3); * layer.add(shape1, shape2, shape3);
* // empty arrays are accepted, though each individual child must be defined * // empty arrays are accepted, though each individual child must be defined
* layer.add(...shapes); * layer.add(...shapes);
* // remember to redraw layer if you changed something
* layer.draw();
*/ */
add(...children: ChildType[]) { add(...children: ChildType[]) {
if (children.length === 0) { if (children.length === 0) {

View File

@ -385,7 +385,7 @@ export class Layer extends Container<Group | Shape> {
// empty pixel // empty pixel
return {}; return {};
} }
drawScene(can?: SceneCanvas, top?: Node) { drawScene(can?: SceneCanvas, top?: Node, bufferCanvas?: SceneCanvas) {
const layer = this.getLayer(), const layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas()); canvas = can || (layer && layer.getCanvas());
@ -397,7 +397,7 @@ export class Layer extends Container<Group | Shape> {
canvas.getContext().clear(); canvas.getContext().clear();
} }
Container.prototype.drawScene.call(this, canvas, top); Container.prototype.drawScene.call(this, canvas, top, bufferCanvas);
this._fire(DRAW, { this._fire(DRAW, {
node: this, node: this,

View File

@ -163,7 +163,6 @@ export class Image extends Shape<ImageConfig> {
* Konva.Image.fromURL(imageURL, function(image){ * Konva.Image.fromURL(imageURL, function(image){
* // image is Konva.Image instance * // image is Konva.Image instance
* layer.add(image); * layer.add(image);
* layer.draw();
* }); * });
*/ */
static fromURL( static fromURL(

View File

@ -1550,6 +1550,53 @@ describe('Shape', function () {
compareCanvases(canvas2, canvas1, 240, 110); compareCanvases(canvas2, canvas1, 240, 110);
}); });
it('export stage when buffer canvas is for line', async function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
const group = new Konva.Group({
id: 'group01',
draggable: false,
opacity: 0.99,
});
layer.add(group);
const arrow = new Konva.Arrow({
x: 0,
y: 0,
points: [50, 25, 200, 25, 200, 225, 400, 225],
stroke: 'purple',
fill: 'purple',
strokeWidth: 4,
pointerAtEnding: true,
bezier: true,
});
group.add(arrow);
const bounds = layer.getClientRect({ relativeTo: stage });
const pos = stage.getPosition();
const canvas1 = layer.toCanvas({
pixelRatio: 1,
x: bounds.x + pos.x,
y: bounds.y + pos.y,
width: bounds.width,
height: bounds.height,
});
group.opacity(1);
const canvas2 = layer.toCanvas({
pixelRatio: 1,
x: bounds.x + pos.x,
y: bounds.y + pos.y,
width: bounds.width,
height: bounds.height,
});
compareCanvases(canvas1, canvas2, 240, 110);
});
// ====================================================== // ======================================================
it('optional disable shadow for stroke', function () { it('optional disable shadow for stroke', function () {
var stage = addStage(); var stage = addStage();