Nein, so wie Du es beschreibst, funktioniert es leider nicht, weil die Kreise keine HTML-Elemente sondern Layers von jCanvas sind.
Ich habe mal etwas ausgearbeitet, was deinen Wunsch erfüllen sollte:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
<canvas id="display" class="circlecountdown"
width="220" height="220"></canvas>
<input id="val" />
<script>
// hier wird ein Eventlistener für das input-Feld
// mit der ID "val" (Zeile 12) registriert
// staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
$("#val").on("change", function () {
updateCircleDisplay("#display", this.value);
});
function getColor(value, opts) {
if (opts.threshold) {
if (value < opts.threshold) return opts.colorCircle;
else return opts.colorAbove;
} else {
return opts.colorCircle;
}
}
function updateCircleDisplay(selector, value) {
$(selector).each(function (idx, ele) {
var canv = $(this);
var max = canv.data("max");
var deg = value / max * 360;
canv.setLayer('text', {
text: canv.data("opts").templateText.replace("{value}", value),
}).stopLayer('circle')
.animateLayer('circle', {
end: deg,
strokeStyle: getColor(value, canv.data("opts"))
}, {
duration: 1000,
easing: 'linear',
step: function (now, fx, layer) {
console.log(now, fx);
}
});
});
}
function createCircleDisplay(selector, value, max, options) {
var opts = {
radius: 100,
colorCircle: "blue",
strokeWidthCircle: 20,
colorBgCircle: "lightgrey",
strokeWidthBgCircle: 20,
colorText: "orange",
templateText: "{value} $",
threshold: 50,
colorAbove: 'green'
}
$.extend(opts, options);
// hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
// siehe Aufruf der Funktion in Zeile 94
// staende dieses Skript im Head, waere dieses Element noch nicht definiert
$(selector).each(function (idx, ele) {
var canv = $(this);
canv.data("opts", opts);
canv.data("max", max)
var deg = value / max * 360;
var colorCircle = getColor(value, opts);
var size = 2 * opts.radius + opts.strokeWidthCircle;
var pos = opts.radius + opts.strokeWidthCircle / 2;
canv.attr("width", size);
canv.attr("height", size);
canv.drawArc({
layer: true,
name: 'circle2',
strokeStyle: opts.colorBgCircle,
strokeWidth: opts.strokeWidthBgCircle,
x: pos, y: pos,
radius: opts.radius,
// start and end angles in degrees
start: 0, end: 360
});
canv.drawArc({
layer: true,
name: 'circle',
strokeStyle: colorCircle,
strokeWidth: opts.strokeWidthCircle,
rounded: true,
x: pos, y: pos,
radius: opts.radius,
// start and end angles in degrees
start: 0, end: deg
});
canv.drawText({
layer: true,
name: 'text',
fillStyle: opts.colorText,
strokeWidth: 4,
x: pos, y: pos,
fontSize: 40,
fontFamily: 'Arial',
text: opts.templateText.replace("{value}", value)
});
});
}
createCircleDisplay('#display', 80, 100, {
threshold: 60,
colorCircle: 'red',
colorAbove: 'green'
});
</script>
</body>
</html>
Alles anzeigen
Eine coole Erweiterung wäre jetzt noch, wenn der Text nicht springt sondern während der Animation herauf- bzw. herunter gezählt würde :-;
