xorg1990
New member
Hi,
ich versuche Algorithmus zu programmieren der mir eine Frequenzskala dynamisch an ein canvas anpasst.
Soll heißen: ein User leget eine Canvas größe fest, 800x600 oder 1024*768 usw. und die Bandbreite die er darstellen möchten von 100-1500Hz oder 0-100hz usw..
Habe schon zig Versuche unternommen doch es passt nicht, irgendwie muss man ein zusammen Spiel zwischen “Anzal der Zeilen“ und „den an zu zeigen werten finden“.
Egal was ich unternehme es klappt nicht. Der Abstand der Zeilen sollte nicht kleiner sein als ein Buchstabe groß(hoch) ist sein. Ein Buchstabe ist bei ein Schriftgröße von 12px, 7px hoch, dass habe ich via offsetHeight ermittelt.
Aus übersichtlichen gründen finde ich es besser jede 2te Zeile nur ein Strich zu machen, dass ist aber optional uns muss nicht sein.
habe da schon mal was vorbereitet:
Der kleinere Wert soll immer unten stehen der große immer ganz oben im canvas.
die Variable Az habe ich zu Schluss hergeholt, wo ich mir gedacht habe…hm legste halt fest 800*600bis1027*768, 24Zeilen und größer,50 Zeilen kleiner als 600 eben 15 Zeilen.
Hat aber am Ende auch nicht geklappt.
Am ende ist das ganz einfach, ich krige das nicht ohne Hilfe raus.
VG xorg1990
ich versuche Algorithmus zu programmieren der mir eine Frequenzskala dynamisch an ein canvas anpasst.
Soll heißen: ein User leget eine Canvas größe fest, 800x600 oder 1024*768 usw. und die Bandbreite die er darstellen möchten von 100-1500Hz oder 0-100hz usw..
Habe schon zig Versuche unternommen doch es passt nicht, irgendwie muss man ein zusammen Spiel zwischen “Anzal der Zeilen“ und „den an zu zeigen werten finden“.
Egal was ich unternehme es klappt nicht. Der Abstand der Zeilen sollte nicht kleiner sein als ein Buchstabe groß(hoch) ist sein. Ein Buchstabe ist bei ein Schriftgröße von 12px, 7px hoch, dass habe ich via offsetHeight ermittelt.
Aus übersichtlichen gründen finde ich es besser jede 2te Zeile nur ein Strich zu machen, dass ist aber optional uns muss nicht sein.
habe da schon mal was vorbereitet:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>null</title>
<script type="text/javascript">
function RederFreqAxsis(){
if (typeof document.test != "undefined") {
var F_min = parseInt(document.test.Fmin.value);
var F_max = parseInt(document.test.Fmax.value);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//erzeuge ein span für test länge berechnen
var Ziffernblock = document.getElementById("Text");
var ruler = document.createElement("canvas");
var ruler_ctx = ruler.getContext('2d');
ruler.width=80;
ruler.height=canvas.height;
ruler_ctx.fillStyle = "white"
ruler_ctx.fillRect(0,0,80,canvas.height);
var F_band=F_max-F_min;//Darzustellende Bandbreite in hz
var Az = 24;//Anzahl Zeilen
var Sa = Math.round((canvas.height/Az));
var schritt = Math.round(F_band/Az);//Schritte in Hz
console.log(F_band,Sa,schritt);
var k=0;
var string=F_min;
for(var i =canvas.height+Az;i>0;i-=Az,string+=schritt,k++){
Ziffernblock.innerHTML=string+" Hz";
if (k%2 == 0) {//mod ==1 erst Zahlen, mod==0 erst stich dann Zahlen
ruler_ctx.beginPath();
ruler_ctx.lineWidth="1";
ruler_ctx.strokeStyle="black";
ruler_ctx.moveTo(5,i-Sa);
ruler_ctx.lineTo(80,i-Sa);
ruler_ctx.stroke();
}else{
ruler_ctx.font="12px Calibri";
ruler_ctx.fillStyle="red"
ruler_ctx.fillText(Ziffernblock.innerText,5,i-Sa+3);
ruler_ctx.beginPath();
ruler_ctx.lineWidth="1";
ruler_ctx.strokeStyle="black";
ruler_ctx.moveTo(Ziffernblock.innerText.length*7,i-Sa);
ruler_ctx.lineTo(80,i-Sa);
ruler_ctx.stroke();
}
}
console.log(Ziffernblock.innerText.length);
var tempCanvas = document.createElement("canvas"),
tempCtx = tempCanvas.getContext("2d");
tempCanvas.width=canvas.width;
tempCanvas.height=canvas.height;
ctx.drawImage(ruler,canvas.width-250,0);
}
</script>
</head>
<body onload=RederFreqAxsis()>
<form name=test>
<input type="number" name="Fmin" value=100>Min<br>
<input type="number" name="Fmax" value=1000>Max
<input type="button" value="Feuer frei" onclick="RederFreqAxsis()">
</form>
<canvas id="canvas" width="1024" height="768" style="display: block; background-color: black ;"</canvas>
<span id="Text" style="visibility: hidden; font-size: 12px;"</span>
</body>
</html>Der kleinere Wert soll immer unten stehen der große immer ganz oben im canvas.
die Variable Az habe ich zu Schluss hergeholt, wo ich mir gedacht habe…hm legste halt fest 800*600bis1027*768, 24Zeilen und größer,50 Zeilen kleiner als 600 eben 15 Zeilen.
Hat aber am Ende auch nicht geklappt.
Am ende ist das ganz einfach, ich krige das nicht ohne Hilfe raus.
VG xorg1990
Zuletzt bearbeitet:
.
