HTML5画布-从左上方绘制圆圈

Question

我将如何更改以下代码，以强制HTML5画布从弧的左上角而不是从中心绘制。

我目前有：

function drawCircle(e) {
    var oe = e.originalEvent || e;

    ctx.beginPath();
    ctx.arc(start.x, start.y + 10, oe.pageX - start.x - offset.left, 0, 2 * Math.PI, false);
    ctx.stroke();
    ctx.closePath();
}

我有以下小提琴（为方便起见，下面的代码）-如果您开始在其上画图，则该圆画得很好，但是它是从您放置鼠标的中心向外绘制的： http : //jsfiddle.net/g4zxp/

我想从左上角向下拖动圆，但是我不知道要怎么做！ 我知道我需要计算并不断更改中心点。

有任何想法吗？

谢谢

代码如下：

HTML ：

<canvas width="200" height="200"></canvas>

JavaScript / jQuery ：

$(function () {
    var $canvas = $('canvas'),
        canvas = $canvas.get(0),
        offset = $canvas.offset(),
        ctx,
        drawing = false,
        start = {
            x: null,
            y: null
        };

    function init() {
        if (canvas.getContext) {
            ctx = canvas.getContext('2d');

            ctx.lineJoin = 'round';
            ctx.lineCap = 'round';
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 5;
        }
    }

    function startDrawing(e) {
        var oe = e.originalEvent || e;

        e.preventDefault();

        drawing = true;

        start.x = Math.floor(oe.pageX - offset.left);
        start.y = Math.floor(oe.pageX - offset.left);
    }

    function continueDrawing(e) {
        e.preventDefault();

        if (!drawing) {
            return;
        }

        clearCanvas();
        drawCircle(e);
    }

    function endDrawing(e) {
        e.preventDefault();
        drawing = false;
    }

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

    function drawCircle(e) {
        var oe = e.originalEvent || e;

        ctx.beginPath();
        ctx.arc(start.x, start.y + 10, oe.pageX - start.x - offset.left, 0, 2 * Math.PI, false);
        ctx.stroke();
        ctx.closePath();
    }

    $canvas.on('touchstart mousedown', function (e) {
        startDrawing(e);
    });

    $canvas.on('touchmove mousemove', function (e) {
        continueDrawing(e);
    });

    $canvas.on('touchend mouseup', function (e) {
        endDrawing(e);
    });

    init();
});

Answer 1

我假设“圆弧的左上角”是下图中线的交点。 在这种情况下，距圆心的距离为距“左上角”的距离为sqrt(2 * r^2)

但是，由于画布中的圆圈无论如何都使用x和y定位，因此我们可以改用它。 从中心到垂直线上最近点的距离为r，从中心到水平线上最近点的距离也为r

这意味着（因为（0,0）在左上角），“左上角”的x位置是center's x position - r ，“左上角”的y位置是center's y position - r或(cX - r, cY - r)简称

您可以使用代码（因为oe.pageX - start.x - offset.left = r ）在画布中手动计算此值，因此：

var r = oe.pageX - start.x - offset.left;
ctx.arc(start.x + r, start.y + 10 + r, r, 0, 2 * Math.PI, false);

演示 这样很好。

但是，如果您想在前端使用相同的格式，则可以创建函数。 看起来像这样

function arcTopLeft(x, y, r, a1, a2) {
    ctx.arc(x + r, y + r, r, a1, a2, false);
}
// Called using the same inputs as your original call
arcTopLeft(start.x, start.y + 10, oe.pageX - start.x - offset.left, 0, 2 * Math.PI, false);

希望能有所帮助！

Answer 2

好的，所以有一种非常简单的方法来执行此操作，并且您在ctx.arc()调用中仅出现错误，仅此而已：

ctx.arc(oe.layerX, oe.layerY, Math.abs(oe.pageX - start.x - offset.left), 0, 2 * Math.PI, false);

我还将您的半径设置为绝对值，以便您可以沿负方向绘制圆，而不会导致应用崩溃。 希望我早点找到您，我想您以前会想要这个非常简单的答案。

顺便说一句， 这是您的小提琴全部都固定好了，并按照您想要的去做。 抱歉，我没早联系您！