Canvas는 MouseMove를 통해 사각형을 그립니다.

Question

MouseMove-Event로 사각형을 그리려하고 있습니다. 나는 그것을 위해 튜토리얼을 사용하고 내 코드는 다음과 같다 :

FIDDLE

var canvasID = $('therm').data("thermid"); 
$('therm').after('<canvas id="' + canvasID + 
       '" width="500" height="500"></canvas>'); 

var canvas = $('#thermometer')[0]; 
var context = canvas.getContext("2d"); 
var xcoord = $("#thermometer").width()/2; 
var ycoord = $("#thermometer").height() - 25; 
var radius = 20; 

context.beginPath(); 
arc(xcoord, ycoord - 20, radius, 0, 2 * Math.PI, false); 
context.fillStyle = 'red'; 
context.fill(); 
context.closePath(); 

rect(xcoord - 4.5, canvas.height - 90, 9, 35); 
context.lineWidth = 2; 
context.strokeStyle = '#0000'; 

init(); 

function line(x_new, y_new, x_target, y_target) 
{ 
    context.moveTo(x_new, y_new); 
    context.lineTo(x_target, y_target); 
} 
function arc(x, y, radius, startAngle, endAngle, anticlockwise) 
{ 
    context.arc(x, y, radius, startAngle, endAngle, anticlockwise); 
} 
function rect(x, y, width, height) 
{ 
    context.fillRect(x, y, width, height); 
} 
function text(string, x, y) 
{ 
    context.fillText(string, x, y); 
} 
function getMousePos(canvas, evt) 
{ 
    var rect = canvas.getBoundingClientRect(); 
    return {x: evt.clientX - rect.left, 
      y: evt.clientY - rect.top}; 
} 
var drag = false; 
var rectv = {}; 
function init() 
{ 
    canvas.addEventListener('mousedown', mouseDown, false); 
    canvas.addEventListener('mouseup', mouseUp, false); 
    canvas.addEventListener('mousemove', mouseMove, false); 
} 
function mouseDown(evt) 
{ 
    var mousePos = getMousePos(canvas, evt); 
    rectv.startY = evt.pageY - this.offsetTop; 

    context.beginPath(); 
    rect(xcoord - 4.5, 410, 9, -410 + mousePos.y); 
    context.fillStyle = 'red'; 
    context.fill();   
    drag = true; 
} 
function mouseUp() 
{ 
    context.closePath(); 
    drag = false; 
} 
function mouseMove(evt) 
{ 
    if(drag) 
    { 
     rectv.h = (evt.pageY - this.offsetTop) - rectv.startY; 
     context.clearRect(xcoord - 5.5, 85, 11, rectv.startY - 85); 
     drawRec(); 
    } 
} 
function drawRec() 
{ 
    rect(xcoord - 4.5, rectv.startY, 9, rectv.h); 
    context.fillStyle = 'red'; 
    context.fill(); 
} 

당신이 바로 위를 클릭하고 위 아래로 마우스를 이동하는 데 필요한 줄을 이동합니다. ;)

내 문제는 다음과 같습니다. 가운데에서 마우스를 위아래로 움직여도 괜찮습니다. 그러나 내가 포인트를 잡으려고 할 때 나는 처음에 클릭 한 바가 삭제되지 않고 변경 사항을 보여주지 않을 것입니다. 여러분들이 저를 도울 수 있기를 바랍니다. 더 이상 좋은 생각이 없습니다./

Answer 1

변경된 부분 만 지우거나 다시 그려야합니다. 곧 너무 복잡해 지므로 모든 것을 지우는 것이 좋습니다. 각 변경 사항을 모두 다시 그립니다.

아래에는 약간의 코드가 리팩터링되어 더 나은 관심과 더 많은 매직 넘버가 있습니다. 그 시점부터 원하는 행동을 쉽게 정의 할 수 있어야합니다.

http://jsfiddle.net/gamealchemist/oohfvqa7/1/

var canvasID = $('therm').data("thermid"); 
$('therm').after('<canvas id="' + canvasID + '" width="500" height="500"></canvas>'); 

var canvas = $('#thermometer')[0]; 
var context = canvas.getContext("2d"); 
var xcoord = $("#thermometer").width()/2; 
var ycoord = $("#thermometer").height() - 25; 
var radius = 20; 
var barWidth = 9; 
var zeroMargin = 35; 

// -------------------------------------------------- 

function drawScene() { 
    context.fillStyle = 'red'; 
    arc(xcoord, ycoord - radius, radius, 0, 2 * Math.PI, false); 
    context.lineWidth = 2; 
    var barStartY = ycoord - radius - zeroMargin; 
    rect(xcoord - 0.5 * barWidth, barStartY, barWidth, zeroMargin); 

    context.strokeStyle = '#0000'; 
    context.fillRect(xcoord - 0.5 * barWidth,mousePos.y, barWidth, barStartY-mousePos.y); 
} 

init(); 

// -------------------------------------------------- 
// __ drag handling 

var rectv; 

function onDragStart() { 
    rectv.startY = mousePos.y; 
    clearCanvas(); 
    drawScene(); 
} 

function onDragUpdated() { 
    rectv.h = mousePos.y - rectv.startY; 
    clearCanvas(); 
    drawScene(); 
} 

function onDragEnded() {} 

function onDragCancelled() {} 

// -------------------------------------------------- 
// __ Graphics 

function clearCanvas() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
} 

function line(x_new, y_new, x_target, y_target) { 
    context.moveTo(x_new, y_new); 
    context.lineTo(x_target, y_target); 
} 

function arc(x, y, radius, startAngle, endAngle, anticlockwise) { 
    context.beginPath(); 
    context.arc(x, y, radius, startAngle, endAngle, anticlockwise); 
    context.closePath(); 
    context.fill(); 
} 

function rect(x, y, width, height) { 
    context.fillRect(x, y, width, height); 
} 

function text(string, x, y) { 
    context.fillText(string, x, y); 
} 

// -------------------------------------------------- 
// __ mouse 

var drag = false; 
var canvasRect; 

var mousePos; 

function init() { 
    mousePos = { 
     x: 0, 
     y: 0 
    }; 
    rectv = { 
     startY: 0, 
     h: 0 
    }; 
    updateCanvasRect(); 
    canvas.addEventListener('mousedown', mouseDown, false); 
    canvas.addEventListener('mouseup', mouseUp, false); 
    canvas.addEventListener('mousemove', mouseMove, false); 
    canvas.addEventListener('mouseleave', mouseLeave, false); 
    window.addEventListener('scroll', updateCanvasRect, false); 
    drawScene(); 
} 

function getMousePos(evt) { 
    mousePos.x = evt.clientX - canvasRect.left; 
    mousePos.y = evt.clientY - canvasRect.top; 
} 

function updateCanvasRect() { 
    canvasRect = canvas.getBoundingClientRect(); 
} 

function mouseDown(evt) { 
    getMousePos(evt); 
    drag = true; 
    onDragStart(); 
} 

function mouseUp(evt) { 
    getMousePos(evt); 
    if (drag) { 
     onDragEnded(); 
    } 
    drag = false; 
} 

function mouseMove(evt) { 
    getMousePos(evt); 
    if (drag) { 
     onDragUpdated(); 
    } 
} 

function mouseLeave(evt) { 
    getMousePos(evt); 
    if (drag) { 
     onDragCancelled(); 
     drag = false; 
    } 
}