konva
Version:
<p align="center"> <img src="https://konvajs.org/android-chrome-192x192.png" alt="Konva logo" height="180" /> </p>
56 lines (55 loc) • 2.4 kB
JavaScript
import { Factory } from '../Factory.js';
import { Shape } from '../Shape.js';
import { Konva } from '../Global.js';
import { getNumberValidator, getBooleanValidator } from '../Validators.js';
import { _registerNode } from '../Global.js';
export class Arc extends Shape {
_sceneFunc(context) {
var angle = Konva.getAngle(this.angle()), clockwise = this.clockwise();
context.beginPath();
context.arc(0, 0, this.outerRadius(), 0, angle, clockwise);
context.arc(0, 0, this.innerRadius(), angle, 0, !clockwise);
context.closePath();
context.fillStrokeShape(this);
}
getWidth() {
return this.outerRadius() * 2;
}
getHeight() {
return this.outerRadius() * 2;
}
setWidth(width) {
this.outerRadius(width / 2);
}
setHeight(height) {
this.outerRadius(height / 2);
}
getSelfRect() {
const innerRadius = this.innerRadius();
const outerRadius = this.outerRadius();
const clockwise = this.clockwise();
const angle = Konva.getAngle(clockwise ? 360 - this.angle() : this.angle());
const boundLeftRatio = Math.cos(Math.min(angle, Math.PI));
const boundRightRatio = 1;
const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle), (3 * Math.PI) / 2));
const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
const boundRight = boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius);
const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
return {
x: boundLeft,
y: clockwise ? -1 * boundBottom : boundTop,
width: boundRight - boundLeft,
height: boundBottom - boundTop,
};
}
}
Arc.prototype._centroid = true;
Arc.prototype.className = 'Arc';
Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
_registerNode(Arc);
Factory.addGetterSetter(Arc, 'innerRadius', 0, getNumberValidator());
Factory.addGetterSetter(Arc, 'outerRadius', 0, getNumberValidator());
Factory.addGetterSetter(Arc, 'angle', 0, getNumberValidator());
Factory.addGetterSetter(Arc, 'clockwise', false, getBooleanValidator());