HTML5 画布绘制背景缩放

Question

我有问题，我有背景图像并使用鼠标滚轮更改它的比例和位置，并且可以使用 mousedown 和 mousemove 事件进行绘图。 me example: http://jsfiddle.net/74MCQ/ 现在看到第一个绘图和第二个缩放，我们看不到画线。如果在我选择位置并且如果缩放我需要看到相同的位置和相同的缩放比例，我需要像油漆一样。

Answer 1

您需要一种方法来存储用户的绘图，无论是在另一个画布中，还是通过存储坐标。

我建议您存储坐标，下面是一些将行存储在数组中的代码，每行都是一个坐标数组，例如：[x0, y0, x1, y1, x2, y2, ... ]。

编辑：现在我简化了事情，坐标是相对于画布中心存储的。 看看小提琴，它大部分都在工作。

小提琴： http://jsfiddle.net/gamealchemist/74MCQ/4/

     function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        var x = evt.clientX - rect.left;
        var y = evt.clientY - rect.top;
        var sx = (x-cw/2)/scale;
        var sy = (y-ch/2)/scale;
        return {
            x: x,
            y: y,            
            sx : sx,
            sy:sy
        };
    }

    /****** PAINT ******/
    var isDrawing = false;
    var color = "#000000";
    var brushWidth = 10;
    //var previousEvent = false;
    ctx.strokeStyle = '#000000';

    var currentLine = null;
    var allLines = [];


    $("#canvas").mousedown(function (e) {
        var mousePos = getMousePos(canvas, e);
        ctx.moveTo(mousePos.x, mousePos.y);
        isDrawing = true;
        if (currentLine) allLines.push(currentLine);
        currentLine = [];
        currentLine.push(mousePos.sx, mousePos.sy);
    });

    $("#canvas").mouseup(function () {
        isDrawing = false;
        if (currentLine) allLines.push(currentLine);
        currentLine = null;
    });

    $("#canvas").mouseout(function () {
        isDrawing = false;
        if (currentLine) allLines.push(currentLine);
        currentLine = null;
    });

    $("#canvas").mousemove(function (e) {

        if (isDrawing === true) {
            var mousePos = getMousePos(canvas, e);
            currentLine.push(mousePos.sx, mousePos.sy);

            //paint tools, effects
            ctx.lineWidth = 10;
            ctx.strokeStyle = color;
            ctx.shadowBlur = 1;
            ctx.shadowColor = 'rgb(0, 0, 0)';
            ctx.lineTo(mousePos.x, mousePos.y);
            ctx.stroke();
        }
    });

    function drawStoredLines() {
        var thisLine;
        for (var i = 0; i < allLines.length; i++) {
            thisLine = allLines[i];
            drawLine(thisLine);
        }
    }

    function drawLine(ptArray) {
        if (ptArray.length <= 2) return;
        ctx.beginPath();
        ctx.moveTo(ptArray[0], ptArray[1]);
        for (var p = 2; p < ptArray.length; p += 2) {
            ctx.lineTo(ptArray[p], ptArray[p + 1]);
        }
        ctx.lineWidth = 10;
        ctx.strokeStyle = color;
        ctx.shadowBlur = 1;
        ctx.shadowColor = 'rgb(0, 0, 0)';
        ctx.stroke();
    }

请注意，我无法抗拒减少您的 175 行代码以将比例选择为 25 行 :-)

    var zoomSteps = [0.1, 0.2, 0.4, 0.6, 0.8, 1.0, 1.5, 2.0, 3.0, 4.0];
    var zoomIndex = zoomSteps.indexOf(1);

    function doScroll(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        zoomIndex = zoomIndex + delta;
        if (zoomIndex < 0) zoomIndex = 0;
        if (zoomIndex >= zoomSteps.length) zoomIndex = zoomSteps.length - 1;
        scale = zoomSteps[zoomIndex];
        imageWidthZoomed = imageWidth * scale;
        imageHeightZoomed = imageHeight * scale;

        var mousePos = getMousePos(canvas, e);

        draw(mousePos.x, mousePos.y, scale);
    }