diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index 8363b9d2..12791d3e 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -2,7 +2,10 @@ import { Util } from '../Util'; import { Factory } from '../Factory'; import { Shape, ShapeConfig } from '../Shape'; import { _registerNode } from '../Global'; -import { getNumberOrArrayOfNumbersValidator, getNumberValidator } from '../Validators'; +import { + getNumberOrArrayOfNumbersValidator, + getNumberValidator, +} from '../Validators'; import { GetSet, IRect } from '../types'; import { Context } from '../Context'; @@ -91,7 +94,7 @@ export class Image extends Shape { } } - if (this.hasFill() || this.hasStroke()) { + if (this.hasFill() || this.hasStroke() || cornerRadius) { context.beginPath(); cornerRadius ? Util.drawRoundedRectPath(context, width, height, cornerRadius) @@ -101,13 +104,10 @@ export class Image extends Shape { } if (image) { - // context.save(); if (cornerRadius) { - // Util.drawRoundedRectPath(context, width, height, cornerRadius); context.clip(); } context.drawImage.apply(context, params); - // context.restore(); } // If you need to draw later, you need to execute save/restore } diff --git a/test/unit/Image-test.ts b/test/unit/Image-test.ts index bebc7990..fb743cb1 100644 --- a/test/unit/Image-test.ts +++ b/test/unit/Image-test.ts @@ -385,4 +385,32 @@ describe('Image', function () { done(); }); }); + + it.only('corner radius', function (done) { + 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, + }); + + layer.add(darth); + stage.add(layer); + + assert.equal( + layer.getContext().getTrace(true), + 'clearRect();save();transform();beginPath();moveTo();lineTo();arc();lineTo();arc();lineTo();arc();lineTo();arc();closePath();clip();drawImage();restore();' + ); + + done(); + }); + }); });