62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
import { Factory } from "../Factory.js";
|
|
import { Shape } from "../Shape.js";
|
|
import { _registerNode } from "../Global.js";
|
|
import { Util } from "../Util.js";
|
|
import { getNumberOrArrayOfNumbersValidator } from "../Validators.js";
|
|
/**
|
|
* Rect constructor
|
|
* @constructor
|
|
* @memberof Konva
|
|
* @augments Konva.Shape
|
|
* @param {Object} config
|
|
* @param {Number} [config.cornerRadius]
|
|
* @@shapeParams
|
|
* @@nodeParams
|
|
* @example
|
|
* var rect = new Konva.Rect({
|
|
* width: 100,
|
|
* height: 50,
|
|
* fill: 'red',
|
|
* stroke: 'black',
|
|
* strokeWidth: 5
|
|
* });
|
|
*/
|
|
export class Rect extends Shape {
|
|
_getStrokePadding() {
|
|
return super._getStrokePadding(this.strokeScaleEnabled() ? 1 : undefined);
|
|
}
|
|
_sceneFunc(context) {
|
|
const cornerRadius = this.cornerRadius(), width = this.width(), height = this.height();
|
|
context.beginPath();
|
|
if (!cornerRadius) {
|
|
// simple rect - don't bother doing all that complicated maths stuff.
|
|
context.rect(0, 0, width, height);
|
|
}
|
|
else {
|
|
Util.drawRoundedRectPath(context, width, height, cornerRadius);
|
|
}
|
|
context.closePath();
|
|
context.fillStrokeShape(this);
|
|
}
|
|
}
|
|
Rect.prototype.className = 'Rect';
|
|
_registerNode(Rect, true);
|
|
/**
|
|
* get/set corner radius
|
|
* @method
|
|
* @name Konva.Rect#cornerRadius
|
|
* @param {Number} cornerRadius
|
|
* @returns {Number}
|
|
* @example
|
|
* // get corner radius
|
|
* var cornerRadius = rect.cornerRadius();
|
|
*
|
|
* // 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, getNumberOrArrayOfNumbersValidator(4));
|