fix shadow + corner radius for images, close #1734

This commit is contained in:
Anton Lavrenov 2024-07-16 20:19:26 -05:00
parent ac1587fac8
commit 3f6f9f9365
2 changed files with 40 additions and 0 deletions

View File

@ -65,6 +65,11 @@ export class Image extends Shape<ImageConfig> {
}
}
_useBufferCanvas() {
const hasCornerRadius = !!this.cornerRadius();
const hasShadow = this.hasShadow();
if (hasCornerRadius && hasShadow) {
return true;
}
return super._useBufferCanvas(true);
}
_sceneFunc(context: Context) {

View File

@ -413,4 +413,39 @@ describe('Image', function () {
done();
});
});
it('corner radius with shadow', function (done) {
// that will trigger buffer canvas
loadImage('darth-vader.jpg', (imageObj) => {
var stage = addStage();
var layer = new Konva.Layer();
var darth = new Konva.Image({
x: 20,
y: 20,
image: imageObj,
cornerRadius: 10,
draggable: true,
stroke: 'red',
strokeWidth: 100,
strokeEnabled: false,
shadowColor: 'black',
shadowBlur: 10,
shadowOffsetX: 10,
shadowOffsetY: 10,
scaleX: 0.5,
scaleY: 0.5,
});
layer.add(darth);
stage.add(layer);
assert.equal(
layer.getContext().getTrace(true),
'clearRect();save();shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();'
);
done();
});
});
});