18041 sujets

Questions générales et questions de débutants

[Résolu] Faire varier une droite à l'aide d'un curseur

Bonjour,
je souhaites faire varier le tracé d'une droite à l'aide d'un curseur en javascript ....
j'arrives à faire varier et afficher la variable (sous le curseur)
Mais si je mets cette variable dans une des 4 coordonnées de ma droite ... la variable n'est pas pris en compte. Merci d'avance de toute aide.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Régulation</title>
<link rel="stylesheet" href="stylecentrage.css" />
<link rel="stylesheet" href="stylecadresearch.css" />
<link rel="shortcut icon" href="courbes.ico" />
</head>
<!-- background -->
<body style="background-color:#6a9ed7; margin-top: 0px; margin-bottom: 0px; margin-left:auto; margin-right:auto">
<!-- dimension du rectangle -->
<canvas id="moncanevas" width="1200" height="250"></canvas>
<!--génération de la variable -->
<style type="text/css">
form { position: relative; }
input[type="range"] {position: relative; margin-left: 1em;}
input[type="range"]:after, input[type="range"]:before { position: absolute; top: 2em; color: blue;}
input[type="range"]:before { left:0em; content: attr(min);}
input[type="range"]:after { right: 0em; content: attr(max);}
output { position: absolute; top: 50px; left: 170px;}
</style>
</head>
<!-- curseur -->
<form action="input-type-range-min-max.php" method="post">
<input type="range" id="champ" name="range" value="5" min="0" max="100" step="5">
<br /><br />
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// affichage de la variable
$(function()
{ $("#champ").after('<output></output>');
$("#champ").live('change', function()
{ var droite = $(this).val(); $('output').text(droite); }
);
});
// Tracé du rectangle
function rectangle()
{
var canvas = document.getElementById("moncanevas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle="blue";
context.lineWidth="2";
context.rect(300,0,400,200);
context.fillStyle="yellow";
context.fill();
context.stroke();
}
rectangle();
// Tracé de la droite
canvas = document.getElementById("moncanevas");
if (canvas.getContext)
{ context = canvas.getContext('2d'); }
function drawLine()
{ context.strokeStyle='green';
context.lineCap='round';
context.lineWidth=4;
context.moveTo(310,50);
context.lineTo(350,droite);
context.stroke(); }
drawLine();
</script>
</body>
</html>
Bonjour,
je ne les ai pas mis car c'est uniquement du centrage d'image et de positionnement dans un cartouche ... voici la version sans les css :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Régulation</title>
</head>
<!-- dimension du rectangle -->
<canvas id="moncanevas" width="1200" height="250"></canvas>
<!--génération de la variable --> 
<style type="text/css">
form { position: relative; }
input[type="range"] {position: relative; margin-left: 1em;}
input[type="range"]:after, input[type="range"]:before { position: absolute; top: 2em; color: blue;}
input[type="range"]:before { left:0em; content: attr(min);}
input[type="range"]:after { right: 0em; content: attr(max);}
output { position: absolute; top: 50px; left: 170px;}
</style>
</head>
<!-- curseur --> 
<form action="input-type-range-min-max.php" method="post">
<input type="range" id="champ" name="range" value="5" min="0" max="100" step="5">
<br /><br />
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> 
// affichage de la variable
$(function()
{ $("#champ").after('<output></output>');
$("#champ").live('change', function()
{ var droite = $(this).val(); $('output').text(droite); }
); 
}); 
// Tracé du rectangle
function rectangle()
{
var canvas = document.getElementById("moncanevas"); 
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle="blue"; 
context.lineWidth="2"; 
context.rect(300,0,400,200);
context.fillStyle="yellow";
context.fill();
context.stroke();
}
rectangle();
// Tracé de la droite
canvas = document.getElementById("moncanevas"); 
if (canvas.getContext)
{ context = canvas.getContext('2d'); }
function drawLine()
{ context.strokeStyle='green';
context.lineCap='round';
context.lineWidth=4; 
context.moveTo(310,50);
context.lineTo(350,droite);
context.stroke(); } 
drawLine();
</script>
</body>
</html>


Cordialement
CS
Sujet clos
Aller à