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

Fixed negative polygon radius corner radius bug

Browse Source
This commit is contained in:
CadenH 2025-07-23 10:34:30 -07:00
parent 1adf506a93
commit 18956ae62b
3 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Util.ts
View File

@ -1049,6 +1049,7 @@ export const Util = {
radius: number, radius: number,
cornerRadius: number | number[] cornerRadius: number | number[]
) { ) {
radius = Math.abs(radius);
for (let i = 0; i < sides; i++) { for (let i = 0; i < sides; i++) {
const prev = points[(i - 1 + sides) % sides]; const prev = points[(i - 1 + sides) % sides];
const curr = points[i]; const curr = points[i];

9
src/shapes/RegularPolygon.ts
View File

@ -147,14 +147,13 @@ Factory.addGetterSetter(RegularPolygon, 'sides', 0, getNumberValidator());
* @returns {Number} * @returns {Number}
* @example * @example
* // get corner radius * // get corner radius
* var cornerRadius = rect.cornerRadius(); * var cornerRadius = poly.cornerRadius();
* *
* // set corner radius * // set corner radius
* rect.cornerRadius(10); * poly.cornerRadius(10);
* *
* // set different corner radius values * // set different corner radius values (pentagon)
* // top-left, top-right, bottom-right, bottom-left * poly.cornerRadius([0, 10, 20, 30, 40]);
* rect.cornerRadius([0, 10, 20, 30]);
*/ */
Factory.addGetterSetter( Factory.addGetterSetter(
RegularPolygon, RegularPolygon,

25
test/unit/RegularPolygon-test.ts
View File

@ -238,4 +238,29 @@ describe('RegularPolygon', function () {
context.fill(); context.fill();
compareLayerAndCanvas(layer, canvas, 200); compareLayerAndCanvas(layer, canvas, 200);
}); });
// ======================================================
it('negative polygon radius with cornerRadius', function () {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 100,
y: 100,
sides: 5,
radius: -100,
fill: 'black',
cornerRadius: 20,
});
layer.add(poly);
stage.add(layer);
layer.draw();
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();moveTo(26.18,80.979);arcTo(0,100,-26.18,80.979,32.361);lineTo(-68.925,49.923);arcTo(-95.106,30.902,-85.106,0.125,32.361);lineTo(-68.779,-50.125);arcTo(-58.779,-80.902,-26.418,-80.902,32.361);lineTo(26.418,-80.902);arcTo(58.779,-80.902,68.779,-50.125,32.361);lineTo(85.106,0.125);arcTo(95.106,30.902,68.925,49.923,32.361);closePath();fillStyle=black;fill();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();moveTo(26.18,80.979);arcTo(0,100,-26.18,80.979,32.361);lineTo(-68.925,49.923);arcTo(-95.106,30.902,-85.106,0.125,32.361);lineTo(-68.779,-50.125);arcTo(-58.779,-80.902,-26.418,-80.902,32.361);lineTo(26.418,-80.902);arcTo(58.779,-80.902,68.779,-50.125,32.361);lineTo(85.106,0.125);arcTo(95.106,30.902,68.925,49.923,32.361);closePath();fillStyle=black;fill();restore();'
);
});
}); });