畫布上的範圍輸入

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。
2. 使用當前鼠標的位置來計算鼠標的範圍內的酒吧開始&端之間的百分比：其中mouseX是x & x+width之間夾緊pct=(mouseX-x)/width。
3. 使用新計算的縮略圖百分比重新顯示範圍。

使用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>