[Übersicht]
Tutorials > Javascript > Canvas > Schieberegler  

  Javascript
   WebAudio Player
   Web-Farbmixer
   Beim Scrollen nachladen
     Canvas
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation
      Lichtjockey
  HTML
   HTML 5 Grundgeruest
  CSS
   Responsive Tabelle



php


[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="nSrCv0" width="60" height="200" style="border: 1px solid #808080;"></canvas>

<script language="javascript">

var nSrCv = [];

// Konfiguration für einen Regler
// ------------------------------
nSrCv[0] = [];
nSrCv[0]['prozente'] = 0; // READONLY - Speicher für den aktuellen Prozentwert
nSrCv[0]['quer'] = 0;
nSrCv[0]['mitte'] = 0; // Mittelstellung
nSrCv[0]['start'] = 25; // Startstellung in %
nSrCv[0]['schritte'] = 3; // Schrittweite in % bei Drehung
nSrCv[0]['farbe_hinter'] = '#909090'; // Hintergrundfarbe, 0 = keine
nSrCv[0]['str_leucht'] = 1;
nSrCv[0]['str_laenge'] = 150;
nSrCv[0]['str_breite'] = 4;
nSrCv[0]['str_hinter'] = '#606060';
nSrCv[0]['str_farbe'] = '#00FFFF';
nSrCv[0]['Knopf_rund'] = 1; // 1 = rund, 0 = eckig
nSrCv[0]['Knopf_radius'] = 10; // Radius des Knopfes
nSrCv[0]['Knopf_laenge'] = 14;
nSrCv[0]['Knopf_breite'] = 24;
nSrCv[0]['Knopf_farbe_1'] = '#AAAAAA'; // Farbe unten vom Farbverlauf
nSrCv[0]['Knopf_farbe_2'] = '#707070'; // Farbe oben vom Farbverlauf
nSrCv[0]['Knopf_aktiv'] = '#00FF00'; // Farbe wenn Knopf gedrückt
nSrCv[0]['skala'] = 1; // 0 = nein, 1 = ja, 2 = nur 1, 5, 10
nSrCv[0]['skala_farbe'] = '#FFFFFF'; // SChriftfarbe der Skala
nSrCv[0]['stufen'] = []; // Stufenstellungen in %

</script>

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


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

Die Regler werden automatisch nach dem Laden der Seite entsprechend ihren Startwerten aus der Konfiguration gezeichnet.
Als erstes wird der Prozentwert in entsprechende Länge innerhalb der Vorgaben umgerechnet.
Dann werden der Hintergrund, der Knopf selber und zuletzt die Skala 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 
canvas.title = srcvPROZ + '%';

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

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

// Prozente
// ========
if( srcvPROZ < 0 ) { srcvPROZ = 0; }
if( srcvPROZ > 100 ) { srcvPROZ = 100; }
nSrCv[drcvID]['prozente'] = srcvPROZ;

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

// Streifen berechnen
// ==================
if( nSrCv[drcvID]['quer'] == 1 )
{
streifenLinks = ( nSrCv[drcvID]['width'] - nSrCv[drcvID]['str_laenge'] ) / 2;
streifenOben = ( nSrCv[drcvID]['height'] - nSrCv[drcvID]['str_breite'] ) / 2;
streifenLaenge = nSrCv[drcvID]['str_breite'];
streifenBreite = nSrCv[drcvID]['str_laenge'];
} else
{
streifenLinks = ( nSrCv[drcvID]['width'] - nSrCv[drcvID]['str_breite'] ) / 2;
streifenOben = ( nSrCv[drcvID]['height'] - nSrCv[drcvID]['str_laenge'] ) / 2;
streifenLaenge = nSrCv[drcvID]['str_laenge'];
streifenBreite = nSrCv[drcvID]['str_breite'];
}

// Skala
// =====

...

// Knopf
// =====

...

// Streifen-Beleuchtung
// =====

...


Die ganzen Berechnungen unterscheiden zwischen Linear- und Stufenregler, sowie welche mit Mittelstellung.
Eine Neuberechnung wird von den Eventlistenern MouseUp, MouseDown und MouseMove ausgelöst.
Während des Ziehens werden die bewegten Pixel in die Schrittweite umgerechnet -> nSrCv[0]['schritte']
Zusätzlich kann man direkt auf eine Stelle der Skala klicken, zu dieser der Regler sofort hinspringt.










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 
function nSrCvMouseMove(event)
{
x = event.clientX + window.pageXOffset;
y = event.clientY + window.pageYOffset;

if( nSrCvDrag != -1 )
{
nSrCvDragX = ( nSrCvDragX == -1 ) ? x : nSrCvDragX;
nSrCvDragY = ( nSrCvDragY == -1 ) ? y : nSrCvDragY;

if( nSrCv[nSrCvDrag]['quer'] == 1 )
{
if( x < nSrCvDragX )
{
nSrCv[nSrCvDrag]['prozente'] -= nSrCv[nSrCvDrag]['schritte'];
nSrCv[nSrCvDrag]['prozente'] = ( nSrCv[nSrCvDrag]['prozente'] <= 0 ) ? 0 : nSrCv[nSrCvDrag]['prozente'];
} else
if( x > nSrCvDragX )
{
nSrCv[nSrCvDrag]['prozente'] += nSrCv[nSrCvDrag]['schritte'];
nSrCv[nSrCvDrag]['prozente'] = ( nSrCv[nSrCvDrag]['prozente'] >= 100 ) ? 100 : nSrCv[nSrCvDrag]['prozente'];
}
} else
{
if( y > nSrCvDragY )
{
nSrCv[nSrCvDrag]['prozente'] -= nSrCv[nSrCvDrag]['schritte'];
nSrCv[nSrCvDrag]['prozente'] = ( nSrCv[nSrCvDrag]['prozente'] <= 0 ) ? 0 : nSrCv[nSrCvDrag]['prozente'];
} else
if( y < nSrCvDragY )
{
nSrCv[nSrCvDrag]['prozente'] += nSrCv[nSrCvDrag]['schritte'];
nSrCv[nSrCvDrag]['prozente'] = ( nSrCv[nSrCvDrag]['prozente'] >= 100 ) ? 100 : nSrCv[nSrCvDrag]['prozente'];
}
}

nSrCvDragX = x;
nSrCvDragY = y;

nSrCvSet(nSrCvDrag, nSrCv[nSrCvDrag]['prozente']);
}
}


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