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

在背景缩放的HTML5帆布图画

1 个答案: