[Übersicht]
Tutorials > Javascript > Canvas > Drehregler  

  PHP Basics
   Administrationsbereich
   Counter
   Umfrage
   Kalender
   Kontaktformular
  Javascript
   WebAudio Player
   WebAudio Player Singles
   Web-Farbmixer
   Beim Scrollen nachladen
     Canvas
      Weihnachtskalender
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation & Spiele
      Warp-Flug
      Lichtjockey
  HTML
   HTML 5 Grundgerüst
  CSS
   Responsive Tabelle






php



webhostingbanner 250x250


[Beispiel]   [Download]  

Oftmals stellen Dreh- und Schieberegler eine kompfortable Variante dar um Werte einzustellen.

Dieses Script bietet einige Konfigurationsmöglichkeiten in Darstellung und Funktionsweise:










10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
<canvas id="nDrCv0" width="80" height="80" style="border: 0px solid #808080;"></canvas>

<script language="javascript">

var nDrCv = [];

// Konfiguration für einen Regler
// ------------------------------
nDrCv[0] = [];
nDrCv[0]['prozente'] = 0; // READONLY - Speicher für den aktuellen Prozentwert
nDrCv[0]['min'] = 0; // 0 = SSW
nDrCv[0]['max'] = 270; // 270 = SSO
nDrCv[0]['radius'] = 20; // Radius des Knopfes
nDrCv[0]['mitte'] = 0; // Mittelstellung
nDrCv[0]['start'] = 25; // Startwinkel in %
nDrCv[0]['schritte'] = 4; // Schrittweite in % bei Drehung
nDrCv[0]['farbe_hinter'] = '#909090'; // Hintergrundfarbe, 0 = keine
nDrCv[0]['Knopf_farbe_1'] = '#DCDCDC'; // Farbe oben vom Farbverlauf
nDrCv[0]['Knopf_farbe_2'] = '#505050'; // Farbe unten vom Farbverlauf
nDrCv[0]['punkt'] = 'strich'; // "punkt" oder "strich"
nDrCv[0]['punkt_farbe'] = '#00FFFF'; //
nDrCv[0]['skala'] = 1; // 0(keine), 1(1 bis 10), 2(-5 bis +5), 3(-10 bis 0)
nDrCv[0]['skala_alle'] = 1; // 1 = alle 11 Werte, 0 = nur Start, Mitte & Ende
nDrCv[0]['skala_farbe'] = '#FFFFFF'; // SChriftfarbe der Skala
nDrCv[0]['ring'] = 1; // 0(keiner), 1(aktiv), 2(dauer-an), 3(dauer-an Vollkreis)
nDrCv[0]['ring_breite'] = 4; // Strichstärke
nDrCv[0]['ring_farbe'] = 'orange'; // Farbe des Rings
nDrCv[0]['ring_hinter'] = 1; // 0(keiner), 1(wie Vordergrund), 2(dauer-an Vollkreis)
nDrCv[0]['ring_hinter_f'] = '#505050'; // Farbe des Hintergrund-Rings
nDrCv[0]['stufen'] = []; // Stufenstellungen in %

</script>

<script type="text/javascript" src="nDrehregler.js"></script>


Die ID des ersten Canvas "nDrCv0" hat die 0 am Ende, weiter ginge es mit "nDrCv1" usw.

Die Regler werden automatisch nach dem Laden der Seite entsprechend ihren Startwerten aus der Konfiguration gezeichnet.
Als erstes wird der Prozentwert in einen Winkel innerhalb der Vorgaben (z.B. 180 oder 270 Grad) umgerechnet.
Dann werden der Hintergrund, der Knopf selber, dann dessen Punkt oder Strich und zuletzt die Skala und der Ring gezeichnet.










10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
canvas.title = drcvPROZ + '%';

ctx = canvas.getContext('2d');

nDrCv[drcvID]['width'] = canvas.width;
nDrCv[drcvID]['height'] = canvas.height;

nCpX = nDrCv[drcvID]['width'] / 2;
nCpY = nDrCv[drcvID]['height'] / 2;

// Radius den anderen Funktionen zur Verfügung stellen
// ===================================================
nDrCvRadius = nDrCv[drcvID]['radius'];

// Prozent in Winkel umrechnen
// ===========================
if( drcvPROZ < 0 ) { drcvPROZ = 0; }
if( drcvPROZ > 100 ) { drcvPROZ = 100; }
nDrCv[drcvID]['prozente'] = drcvPROZ;
nDrCv[drcvID]['winkel'] = nDrCv[drcvID]['min'] + ( ( nDrCv[drcvID]['max'] - nDrCv[drcvID]['min'] ) * ( drcvPROZ / 100 ) );

// Hintergrund
// ===========
ctx.clearRect(0, 0, nDrCv[drcvID]['width'], nDrCv[drcvID]['height']);
if( nDrCv[drcvID]['farbe_hinter'] != '' )
{
ctx.fillStyle = nDrCv[drcvID]['farbe_hinter'];
ctx.fillRect(0, 0, nDrCv[drcvID]['width'], nDrCv[drcvID]['height']);
}

// Knopf
// =====
nDrGradient = ctx.createLinearGradient(0, (nCpY+(nDrCv[drcvID]['radius']/2)), 0, 0);
nDrGradient.addColorStop(0, nDrCv[drcvID]['Knopf_farbe_2']);
nDrGradient.addColorStop(1, nDrCv[drcvID]['Knopf_farbe_1']);
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = nDrCv[drcvID]['Knopf_farbe_2'];
ctx.fillStyle = nDrGradient;
ctx.arc(nCpX, nCpY, nDrCv[drcvID]['radius'], 0, 2*Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.closePath();

// Skala
// =====

...

// Punkt oder Strich
// =================

...


Die ganzen Berechnungen unterscheiden zwischen Linear- und Stufenregler, sowie welche mit Mittelstellung.
Das Bild ist eigentlich immer gleich, bis auf den Punkt, welcher mit Sinus & Cosinus vom Mittelpunkt aus errechnet wird.










10 
11 
12 
13 
14 
15 
16 
17 
18 
if( nDrCv[drcvID]['punkt'] == 'strich' )
{
StartPunktX = nRadialToCosinus(nProzentToRadial(drcvID, useDrcvPROZ), 1.0);
StartPunktY = nRadialToSinus(nProzentToRadial(drcvID, useDrcvPROZ), 1.0);

EndPunktX = nRadialToCosinus(nProzentToRadial(drcvID, useDrcvPROZ), 0.4);
EndPunktY = nRadialToSinus(nProzentToRadial(drcvID, useDrcvPROZ), 0.4);

ctx.moveTo((nCpX+StartPunktX),(nCpY+StartPunktY));
ctx.lineTo((nCpX+EndPunktX), (nCpY+EndPunktY));
} else
{
StartPunktX = nRadialToCosinus(nProzentToRadial(drcvID, useDrcvPROZ), 0.7);
StartPunktY = nRadialToSinus(nProzentToRadial(drcvID, useDrcvPROZ), 0.7);

ctx.arc(nCpX+StartPunktX, nCpY+StartPunktY, 2, 0, 2*Math.PI);
ctx.fill();
}


Eine Neuberechnung wird von den Eventlistenern MouseUp, MouseDown und MouseMove ausgelöst.
Während des Ziehens werden die bewegten Pixel in Winkel umgerechnet -> nDrCv[0]['schritte']










10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
function nDrCvMouseMove(event)
{
x = event.clientX + window.pageXOffset;
y = event.clientY + window.pageYOffset;

if( nDrCvDrag != -1 )
{
nDrCvDragX = ( nDrCvDragX == -1 ) ? x : nDrCvDragX;
nDrCvDragY = ( nDrCvDragY == -1 ) ? y : nDrCvDragY;

if( y > nDrCvDragY )
{
nDrCv[nDrCvDrag]['prozente'] -= nDrCv[nDrCvDrag]['schritte'];
nDrCv[nDrCvDrag]['prozente'] = ( nDrCv[nDrCvDrag]['prozente'] <= 0 ) ? 0 : nDrCv[nDrCvDrag]['prozente'];
} else
if( y < nDrCvDragY )
{
nDrCv[nDrCvDrag]['prozente'] += nDrCv[nDrCvDrag]['schritte'];
nDrCv[nDrCvDrag]['prozente'] = ( nDrCv[nDrCvDrag]['prozente'] >= 100 ) ? 100 : nDrCv[nDrCvDrag]['prozente'];
}

nDrCvDragX = x;
nDrCvDragY = y;

nDrCvSet(nDrCvDrag, nDrCv[nDrCvDrag]['prozente']);
}
}


Die Weiterverarbeitung des Stellwertes in Prozent erfolgt in der Hauptfunktion nDrCvSet() anhand der Regler-ID.
Ebenso bietet die Funktion "nDrCvMouseUp(event)" die Möglichkeit, den beim Loslassen eingestellten Wert zu verarbeiten.