lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

different values for corner radius. fix #687

Browse Source
This commit is contained in:
Anton Lavrenov
2019-07-12 17:12:11 +07:00
parent f3a30784f8
commit 477a2392ac
6 changed files with 96 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@@ -5,7 +5,12 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
--
## [3.3.3][2019-06-07]
* TS types fixes
* Added support for different values for `cornerRadius` of `Konva.Rect`
## [3.3.3][2019-06-07]

39
konva.js
View File

@@ -11721,17 +11721,28 @@
context.rect(0, 0, width, height);
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)
cornerRadius = Math.min(cornerRadius, width / 2, height / 2);
context.moveTo(cornerRadius, 0);
context.lineTo(width - cornerRadius, 0);
context.arc(width - cornerRadius, cornerRadius, cornerRadius, (Math.PI * 3) / 2, 0, false);
context.lineTo(width, height - cornerRadius);
context.arc(width - cornerRadius, height - cornerRadius, cornerRadius, 0, Math.PI / 2, false);
context.lineTo(cornerRadius, height);
context.arc(cornerRadius, height - cornerRadius, cornerRadius, Math.PI / 2, Math.PI, false);
context.lineTo(0, cornerRadius);
context.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, (Math.PI * 3) / 2, false);
var topLeft = 0;
var topRight = 0;
var bottomLeft = 0;
var bottomRight = 0;
if (typeof cornerRadius === 'number') {
topLeft = topRight = bottomLeft = bottomRight = Math.min(cornerRadius, width / 2, height / 2);
}
else {
topLeft = Math.min(cornerRadius[0], width / 2, height / 2);
topRight = Math.min(cornerRadius[1], width / 2, height / 2);
bottomRight = Math.min(cornerRadius[2], width / 2, height / 2);
bottomLeft = Math.min(cornerRadius[3], width / 2, height / 2);
}
context.moveTo(topLeft, 0);
context.lineTo(width - topRight, 0);
context.arc(width - topRight, topRight, topRight, (Math.PI * 3) / 2, 0, false);
context.lineTo(width, height - bottomRight);
context.arc(width - bottomRight, height - bottomRight, bottomRight, 0, Math.PI / 2, false);
context.lineTo(bottomLeft, height);
context.arc(bottomLeft, height - bottomLeft, bottomLeft, Math.PI / 2, Math.PI, false);
context.lineTo(0, topLeft);
context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
}
context.closePath();
context.fillStrokeShape(this);
@@ -11752,8 +11763,12 @@
*
* // set corner radius
* rect.cornerRadius(10);
*
* // set different corner radius values
* // top-left, top-right, bottom-right, bottom-left
* rect.cornerRadius([0, 10, 20, 30]);
*/
Factory.addGetterSetter(Rect, 'cornerRadius', 0, getNumberValidator());
Factory.addGetterSetter(Rect, 'cornerRadius', 0);
Collection.mapMethods(Rect);
/**

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

66
src/shapes/Rect.ts
View File

@@ -1,12 +1,11 @@
import { Collection } from '../Util';
import { Factory } from '../Factory';
import { Shape, ShapeConfig } from '../Shape';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
export interface RectConfig extends ShapeConfig {
cornerRadius?: number;
cornerRadius?: number | number[];
}
/**
@@ -39,51 +38,58 @@ export class Rect extends Shape<RectConfig> {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, width, height);
} else {
// arcTo would be nicer, but browser support is patchy (Opera)
cornerRadius = Math.min(cornerRadius, width / 2, height / 2);
context.moveTo(cornerRadius, 0);
context.lineTo(width - cornerRadius, 0);
let topLeft = 0;
let topRight = 0;
let bottomLeft = 0;
let bottomRight = 0;
if (typeof cornerRadius === 'number') {
topLeft = topRight = bottomLeft = bottomRight = Math.min(
cornerRadius,
width / 2,
height / 2
);
} else {
topLeft = Math.min(cornerRadius[0], width / 2, height / 2);
topRight = Math.min(cornerRadius[1], width / 2, height / 2);
bottomRight = Math.min(cornerRadius[2], width / 2, height / 2);
bottomLeft = Math.min(cornerRadius[3], width / 2, height / 2);
}
context.moveTo(topLeft, 0);
context.lineTo(width - topRight, 0);
context.arc(
width - cornerRadius,
cornerRadius,
cornerRadius,
width - topRight,
topRight,
topRight,
(Math.PI * 3) / 2,
0,
false
);
context.lineTo(width, height - cornerRadius);
context.lineTo(width, height - bottomRight);
context.arc(
width - cornerRadius,
height - cornerRadius,
cornerRadius,
width - bottomRight,
height - bottomRight,
bottomRight,
0,
Math.PI / 2,
false
);
context.lineTo(cornerRadius, height);
context.lineTo(bottomLeft, height);
context.arc(
cornerRadius,
height - cornerRadius,
cornerRadius,
bottomLeft,
height - bottomLeft,
bottomLeft,
Math.PI / 2,
Math.PI,
false
);
context.lineTo(0, cornerRadius);
context.arc(
cornerRadius,
cornerRadius,
cornerRadius,
Math.PI,
(Math.PI * 3) / 2,
false
);
context.lineTo(0, topLeft);
context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
}
context.closePath();
context.fillStrokeShape(this);
}
cornerRadius: GetSet<number, this>;
cornerRadius: GetSet<number | number[], this>;
}
Rect.prototype.className = 'Rect';
@@ -101,7 +107,11 @@ _registerNode(Rect);
*
* // set corner radius
* rect.cornerRadius(10);
*
* // set different corner radius values
* // top-left, top-right, bottom-right, bottom-left
* rect.cornerRadius([0, 10, 20, 30]);
*/
Factory.addGetterSetter(Rect, 'cornerRadius', 0, getNumberValidator());
Factory.addGetterSetter(Rect, 'cornerRadius', 0);
Collection.mapMethods(Rect);

2
test/unit/Context-test.js
View File

@@ -19,7 +19,7 @@ suite('Context', function() {
'arc',
'arcTo',
'rect',
'ellipse'
'ellipse',
'fill',
'stroke',
'clip',

24
test/unit/shapes/Rect-test.js
View File

@@ -201,4 +201,28 @@ suite('Rect', function() {
context.fill();
compareLayerAndCanvas(layer, canvas, 100);
});
// ======================================================
test('array for corner radius', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 100,
fill: 'black',
cornerRadius: [0, 10, 20, 30]
});
layer.add(rect);
stage.add(layer);
layer.draw();
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,50,50);beginPath();moveTo(0,0);lineTo(90,0);arc(90,10,10,4.712,0,false);lineTo(100,80);arc(80,80,20,0,1.571,false);lineTo(30,100);arc(30,70,30,1.571,3.142,false);lineTo(0,0);arc(0,0,0,3.142,4.712,false);closePath();fillStyle=black;fill();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,50,50);beginPath();moveTo(0,0);lineTo(90,0);arc(90,10,10,4.712,0,false);lineTo(100,80);arc(80,80,20,0,1.571,false);lineTo(30,100);arc(30,70,30,1.571,3.142,false);lineTo(0,0);arc(0,0,0,3.142,4.712,false);closePath();fillStyle=black;fill();restore();'
);
});
});