let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5);
drawStepText(context, value, ang, rx * textLocation);
}
}
context.scale(1, rx / ry);
context.translate(-cx, -cy);
}
contains(x, y) {
// 컨테인즈는 Ellipse로 정의함
var { cx, cy, rx, ry } = this.model;
var normx = (x - cx) / (rx * 2 - 0.5);
var normy = (y - cy) / (ry * 2 - 0.5);
return normx * normx + normy * normy < 0.25;
}
_post_draw(context) {
this.drawText(context);
}
get nature() {
return NATURE;
}
}
Component.register("gauge-circle", GaugeCircle);
onclick(e) {
return
let point = this.transcoordC2S(e.offsetX, e.offsetY)
if (this._clickPoint) {
this.removeComponent(this._clickPoint)
}
this._clickPoint = Model.compile({
type: 'ellipse',
cx: point.x,
cy: point.y,
rx: 10,
ry: 10,
fillStyle: 'red'
})
this.addComponent(this._clickPoint)
this.simulate(point)
// let self = this
// setTimeout(function() {
// self.simulate(point)
// }, 500)
this.invalidate()
}
}
Component.register('floor', Floor)
delete this._fillStyle;
delete this._fontColor;
delete this._strokeStyle;
delete this._lineWidth;
}
onclick(e) {
this.parent.activeIndex = this.index;
this.parent.invalidate();
}
onchange(after) {
if (after.hasOwnProperty("fillStyle")) this._fillStyle = after.fillStyle;
if (after.hasOwnProperty("fontColor")) this._fontColor = after.fontColor;
if (after.hasOwnProperty("strokeStyle")) this._fontColor = after.fontColor;
if (after.hasOwnProperty("lineWidth")) this._fontColor = after.fontColor;
if (after.hasOwnProperty("text")) {
this.parent.reference.getAt(this.index).set("text", after.text);
}
this.invalidate();
}
}
Component.register("tab-button", TabButton);
context.lineTo(left + width, top + height);
context.lineTo(left, top + height);
context.lineTo(left, top + tmpRound);
context.quadraticCurveTo(left, top, left + tmpRound, top);
} else {
context.rect(left, top, width, height);
}
this.drawFill(context)
this.drawStroke(context)
}
get controls() {
var { left, top, width, round, height } = this.model;
round = round == undefined ? 0 : roundSet(round, width, height)
return [{
x: left + (width/2) * (round/100),
y: top,
handler: controlHandler
}]
}
}
Component.register('half-roundrect', HalfRoundrect)
context.closePath();
context.beginPath();
//// 채워지는 원 그리기 ////
context.ellipse(
cx,
cy,
Math.abs(rx),
Math.abs(ry),
0,
startAngleToRadian,
startAngleToRadian + (endAngleToRadian - startAngleToRadian) * percent
);
this.drawStroke(context);
}
_post_draw(context) {
this.drawText(context);
}
get nature() {
return NATURE;
}
}
Component.register("progress-circle", ProgressCircle);
context.stroke()
context.beginPath()
context.rect(left + width * 0.15, top + height * 0.15, width * 0.7, height * 0.7)
context.fillStyle = fillStyle
context.globalAlpha = alpha * 0.5
context.fill()
context.beginPath()
context.moveTo(left, top)
context.lineTo(left + width, top + height)
context.moveTo(left, top + height)
context.lineTo(left + width, top)
context.strokeStyle = strokeStyle
context.lineWidth = lineWidth
context.globalAlpha = alpha * 0.4
context.stroke()
}
get nature() {
return NATURE
}
get hasTextProperty() {
return false;
}
}
Component.register('rack', Rack)
let position = ((drawingValue - startValue) / totalValue) * width;
needleSize *= 4;
context.moveTo(position, height + fontSize * 1.4);
context.lineTo(
position + needleSize / 2,
height + needleSize + fontSize * 1.4
);
context.lineTo(
position - needleSize / 2,
height + needleSize + fontSize * 1.4
);
context.fillStyle = needleFillStyle;
context.fill();
context.closePath();
context.translate(-left, -top);
}
_post_draw(context) {
this.drawText(context);
}
get nature() {
return NATURE;
}
}
Component.register("gauge-horizon", GaugeHorizon);