Redimensionnement d'un rectangle dans un élément de canevas à l'aide des valeurs de curseur

Question

Je souhaite pouvoir redimensionner un rectangle sur un canevas à l'aide d'un curseur, tout en affichant ces valeurs dans deux zones de texte. J'ai ce code qui fonctionne, mais il conserve les anciennes valeurs visibles sur le canevas. J'ai essayé d'utiliser clearRect() avant d'appeler strokeRect(), mais cela a empêché mes curseurs de fonctionner. En bref, je veux dessiner un rectangle sur le canevas, et le faire en sorte que deux curseurs le redimensionnent, un pour la largeur et un pour la hauteur. Je suis relativement nouveau au codage, donc je sais que j'ai probablement fait une erreur évidente!

Voici mon code JS pour l'impression des valeurs dans les zones de texte et le dessin du rectangle:

$(function() { 
    var c1=document.getElementById("c1"); 
    var ctx1=c2.getContext("2d"); 
    $("#slider1").slider({ 
    value:100, 
    min: 10, 
    max: 500, 
    step: 10, 
    slide: function(event, ui) { 
    $("#textBox1").val(ui.value + "cm"); 
    ctx1.strokeRect(0, 0,$("#slider1").slider("value"), $("#slider2").slider("value")); 
    } 
    }); 
    $("#slider2").slider({ 
    value:100, 
    min: 10, 
    max: 500, 
    step: 10, 
    slide: function(event, ui) { 
    $("#textBox2").val(ui.value + "cm"); 
    ctx1.strokeRect(0, 0,$("#slider1").slider("value"), $("#slider2").slider("value")); 
    } 
    }); 
$("#textBox1").val($("#slider1").slider("value") + "cm"); 
$("#textBox2").val($("#slider2").slider("value") + "cm"); 
}); 

Et mon code HTML:

<div id="slider1" class="slider"></div> 
<input type="text" id="textBox1" class="sizeBox" value="100cm"> 
<label>Height</label></input> 
<br> 
<div id="slider2" class="slider"></div> 
<input type="text" id="textBox2" class="sizeBox" value="100cm"> 
<label>Width</label></input> 
<canvas id="c1"></canvas> 

Answer 1

est ici quelques glitches dans votre code :

• Vous êtes en train de manquer une citation sur "100cm".
• Il n'y a aucun élément frameCanvas pour var c2=document.getElementById("frameCanvas")

Il pourrait y avoir plus de glitches - je me suis arrêté à la recherche après avoir trouvé ceux-ci.

Sinon, vous pouvez écouter les change événements sur input-type=range natifs éléments:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
ctx.fillStyle='skyblue'; 
 
ctx.strokeStyle='gray'; 
 
ctx.lineWidth=3; 
 

 
var width=75; 
 
var height=60; 
 

 
// listen to slider events 
 
$rwidth=$('#rwidth'); 
 
$rwidth.attr({min:20,max:150}).val(width); 
 
$rwidth.on('input change',function(){ 
 
    width=parseInt($(this).val()); 
 
    draw(); 
 
}); 
 
// 
 
$rheight=$('#rheight'); 
 
$rheight.attr({min:20,max:150}).val(height); 
 
$rheight.on('input change',function(){ 
 
    height=parseInt($(this).val()); 
 
    draw(); 
 
}); 
 

 
draw(); 
 

 
function draw(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.fillRect(20,20,width,height); 
 
    ctx.strokeRect(20,20,width,height); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
Width:&nbsp<input id=rwidth type=range><br> 
 
Height:&nbsp<input id=rheight type=range><br> 
 
<br> 
 
<canvas id="canvas" width=300 height=300></canvas>