Question

我试图使用MouseMove-Event绘制一个矩形并且没问题。我使用了一个教程，我的代码是这样的：

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;
    }
}

Canvas通过MouseMove绘制矩形

1 个答案: