캔버스에 범위 입력

Question

캔버스 요소를 조작하는 데 사용할 수있는 값을 다시 제공하는 캔버스 요소에 범위 슬라이더를 만들려고합니다. html5 배너 광고와 마찬가지로 캔버스 내부에 있어야합니다. 캔버스를 사용하여 범위 슬라이더를 만드는 데 사용할 라이브러리 또는 플러그인이 있는지 궁금합니다. DOM 요소를 캔버스에 삽입 할 수 없습니다.

내가 원하는 것은 범위 슬라이더를 사용하여 캔버스에서 이미지의 위치를 ​​조작하는 것입니다. 즉 슬라이더가 오른쪽으로 이동함에 따라 이미지 위치가 왼쪽으로 이동하고 그 반대도 마찬가지입니다. 입력 슬라이더를 사용하여이 작업을 수행 할 수 있지만 캔버스 자체에 슬라이더를 만드는 데 문제가 있음을 알고 있습니다.

Answer 1

범위 컨트롤은 네이티브 생성이 쉽고 특히 범위 컨트롤이 가로 또는 세로로 정렬되어있는 경우 특히 쉽습니다.

이 범위 제어를위한 이들 값을 감안하면 매우 간단한 수평 범위 제어

를 만들려면

• 바의 시작 위치 : x,y, 바
• 폭 : width,
• 엄지 손가락 높이 : height,
• 백분율로 표시되는 현재 엄지 손가락 위치 : pct.

표시 범위 제어 : [x,y]와 [x+width, y] 사이의 수평선 :

• 의 범위는 줄을 그립니다.
• 범위 썸 드로 그리기 [x+width*pct, y-height/2]과 [x+width*pct, y+height/2] 사이의 수직선.
  1. 이 mousemove 이벤트를 듣고 현재 mouseX 위치를 얻을 :

는 엄지 손가락의 위치를 ​​설정합니다. pct=(mouseX-x)/width mouseX이 x & x+width 사이에 고정됩니다 :

마우스가 범위 바의 시작 & 끝 사이에 백분율을 계산하기 위해 현재 마우스 위치를 사용합니다.

새롭게 계산 된 엄지 손가락의 백분율로 범위를 다시 표시하십시오.

pct을 사용하여 범위 제어 값을 계산하십시오 : value=minValue+(maxValue-minValue)*pct.

비 축 정렬 범위를 제어하여 범위 제어가 수평으로 배치되지 않았거나 수직으로 마우스의 줄에 가장 가까운 지점을 계산해야합니다 경우

. 그런 다음 해당 범위의 시작 지점 인 & 사이의 지점의 백분율을 계산해야합니다. 이 이전의 Q&A은 현재 마우스 위치에 가장 가까운 행 (줄 == 범위 막대)을 찾는 방법을 보여줍니다.

예제 코드와 데모 :

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
var isDown=false; 
 

 
var range=makeRangeControl(50,40,200,25); 
 
drawRangeControl(range); 
 

 
canvas.onmousedown=(function(e){handleMouseDown(e);}); 
 
canvas.onmousemove=(function(e){handleMouseMove(e);}); 
 
canvas.onmouseup=(function(e){handleMouseUpOut(e);}); 
 
canvas.onmouseout=(function(e){handleMouseUpOut(e);}); 
 

 

 
function makeRangeControl(x,y,width,height){ 
 
    var range={x:x,y:y,width:width,height:height}; 
 
    range.x1=range.x+range.width; 
 
    range.y1=range.y; 
 
    // 
 
    range.pct=0.50; 
 
    return(range); 
 
} 
 

 
function drawRangeControl(range){ 
 
    // clear the range control area 
 
    
 
    // bar 
 
    ctx.lineWidth=6; 
 
    ctx.lineCap='round'; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(range.x,range.y); 
 
    ctx.lineTo(range.x1,range.y); 
 
    ctx.strokeStyle='black'; 
 
    ctx.stroke(); 
 
    // thumb 
 
    ctx.beginPath(); 
 
    var thumbX=range.x+range.width*range.pct; 
 
    ctx.moveTo(thumbX,range.y-range.height/2); 
 
    ctx.lineTo(thumbX,range.y+range.height/2); 
 
    ctx.strokeStyle='rgba(255,0,0,0.25)'; 
 
    ctx.stroke(); 
 
    // legend 
 
    ctx.fillStyle='blue'; 
 
    ctx.textAlign='center'; 
 
    ctx.textBaseline='top'; 
 
    ctx.font='10px arial'; 
 
    ctx.fillText(parseInt(range.pct*100)+'%',range.x+range.width/2,range.y-range.height/2-2); 
 
} 
 

 
function handleMouseDown(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // get mouse position 
 
    var mx=parseInt(e.clientX-offsetX); 
 
    var my=parseInt(e.clientY-offsetY); 
 
    // test for possible start of dragging 
 
    isDown=(mx>range.x && mx<range.x+range.width && my>range.y-range.height/2 && my<range.y+range.height/2); 
 
} 
 

 
function handleMouseUpOut(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // stop dragging 
 
    isDown=false; 
 
} 
 

 
function handleMouseMove(e){ 
 
    if(!isDown){return;} 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // get mouse position 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    // set new thumb & redraw 
 
    range.pct=Math.max(0,Math.min(1,(mouseX-range.x)/range.width)); 
 
    ctx.clearRect(range.x-12.5,range.y-range.height/2-15,range.width+25,range.height+20); 
 
    drawRangeControl(range); 
 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Drag the thumb on the range control</h4> 
 
<canvas id="canvas" width=512 height=512></canvas>