キャンバス上の範囲入力

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>