- 12, May 2024
- #1
Привет,
Я снова вернулся к часам, датчикам и т. д. Я обнаружил инструмент JS под названием Gauge.js.
https://bernii.github.io/gauge.js/
В качестве упражнения я хотел сделать датчик оборотов в минуту (оборотов в минуту).
Я могу построить датчик с помощью этого инструмента, а также разместить тики с помощью этого инструмента.
Теперь добавление меток усложняется, посколькукалибровка.js не предоставляет здесь гибкого метода.
Поскольку код не слишком длинный (Game.js), я подумал, что смогу настроить это самостоятельно.
статические метки это объект, который имеет следующие свойства: шрифт, метки, цвет, дробные цифры. Gauge.js отображает метки с помощью приведенного ниже кода. Как мне подойти к этому методу, чтобы понять, как он работает, и сделать функциональность более гибкой?
НАПРИМЕР. Почему метод начинается с M.prototype.renderStaticLabels?? Бесконечно благодарен!
https://bernii.github.io/gauge.js/
В качестве упражнения я хотел сделать датчик оборотов в минуту (оборотов в минуту).
Я могу построить датчик с помощью этого инструмента, а также разместить тики с помощью этого инструмента.
Теперь добавление меток усложняется, посколькукалибровка.js не предоставляет здесь гибкого метода.
Поскольку код не слишком длинный (Game.js), я подумал, что смогу настроить это самостоятельно.
статические метки это объект, который имеет следующие свойства: шрифт, метки, цвет, дробные цифры. Gauge.js отображает метки с помощью приведенного ниже кода. Как мне подойти к этому методу, чтобы понять, как он работает, и сделать функциональность более гибкой?
НАПРИМЕР. Почему метод начинается с M.prototype.renderStaticLabels?? Бесконечно благодарен!
(M.prototype.renderStaticLabels = function (t, i, e, s) {
var n, o, a, h, r, l, p, c, u, d;
for (
this.ctx.save(),
this.ctx.translate(i, e),
l = /\d+\.?\d?/,
r = (n = t.font || "10px Times").match(l)[0],
c = n.slice(r.length),
o = parseFloat(r) * this.displayScale,
this.ctx.font = o + c,
this.ctx.fillStyle = t.color || "#000000",
this.ctx.textBaseline = "bottom",
this.ctx.textAlign = "center",
a = 0,
h = (p = t.labels).length;
a < h;
a++
)
void 0 !== (d = p[a]).label
? (!this.options.limitMin || d >= this.minValue) &&
(!this.options.limitMax || d <= this.maxValue) &&
((r = (n = d.font || t.font).match(l)[0]),
(c = n.slice(r.length)),
(o = parseFloat(r) * this.displayScale),
(this.ctx.font = o + c),
(u = this.getAngle(d.label) - (3 * Math.PI) / 2),
this.ctx.rotate(u),
this.ctx.fillText(
g(d.label, t.fractionDigits),
0,
-s - this.lineWidth / 2
),
this.ctx.rotate(-u))
: (!this.options.limitMin || d >= this.minValue) &&
(!this.options.limitMax || d <= this.maxValue) &&
((u = this.getAngle(d) - (3 * Math.PI) / 2),
this.ctx.rotate(u),
this.ctx.fillText(
g(d, t.fractionDigits),
0,
-s - this.lineWidth / 2
),
this.ctx.rotate(-u));
return this.ctx.restore();
}),
![[Мария Солодар] Школа интернет-маркетологов 2016](/assets/images/icons/forum5.png){kind=icon}
