如何缩放用来在画布上绘制线条/曲线的所有点？ [英] How scale all the points used to make lines/curves on a canvas?

问题描述

我通过 mousedown 和 mousemove 事件记录画布上绘制的所有点。当画布调整大小（例如，如果它是100w x 200h，用户使其为200w x 400h）我想重绘所有这些点/线，但在新的比例。这是什么正确的方法？

I am recording all the points drawn on a canvas via the mousedown and mousemove events. When the canvas is resized (for example, if it was 100w x 200h, and the user makes it 200w x 400h) I want to redraw all those points/lines but at the new scale. What's the proper way to do this?

我目前正在使用如下代码，但它不能正确绘制。

I am currently using code like below but it does not draw properly. It draws weird extra lines.

为了保存积分，我记录 mousedown 和 mousemove 并在 mouseup 中标记一行。

To save the points, I record the point in mousedown and mousemove and mark a line as done in mouseup.

调用调整大小事件：

//The new ratios
var wRatio = canvas.width / oldWidth;
var hRatio = canvas.height / oldHeight;

//We need to scale and draw all our points
for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) {
    var start = savedPoints[ i ];
    var end = savedPoints[ i + 1 ];

    //We're at a new line
    if ( start === "stopline" ) continue;

    //We're finishing a previous line
    else if ( end === "stopline" ) {
        i++;
        continue;
    }

    //Resize them
    start.x = start.x * wRatio;
    start.y = start.y * hRatio;
    end.x = end.x * wRatio;
    end.y = end.y * hRatio;

    //These lines don't make a difference
    //savedPoints[ i ] = start;
    //savedPoints[ i + 1 ] = end;

    //Start recording
    context.beginPath();

    //Move the "pen" to the point
    context.moveTo( start.x, start.y );

    //Make the connection of the "line" with our data (I draw the lines originally this way to make more "natural")
    context.quadraticCurveTo( start.x, start.y, end.x, end.y );

    //This doesn't work either
    //context.lineTo( start.x, start.y, end.x, end.y );

    //Draw the line
    context.stroke();
}

推荐答案

通过修改 savedPoints [i] AND savedPoints [i + 1] code> start 和 end 对象。下一次迭代，其中 i = i + 1 ， savedPoints [i] 将已经修改一次。

I think your problem is you are applying the ratio twice to each point by modifying savedPoints[i] AND savedPoints[i+1] through the start and end objects. The next iteration, where i = i+1, savedPoints[i] will have already been modified once.

    //The new ratios
    var wRatio = canvas.width / oldWidth;
    var hRatio = canvas.height / oldHeight;

    //We need to scale and draw all our points
    for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) {
        var start = savedPoints[ i ];
        var end = savedPoints[ i + 1 ];
        var endx, endy, startx, starty;

        //We're at a new line
        if ( start === "stopline" ) continue;

        //We're finishing a previous line
        else if ( end === "stopline" ) {
            i++;
            continue;
        }

        //Resize them
        startx = start.x * wRatio;
        starty = start.y * hRatio;
        endx = end.x * wRatio;
        endy = end.y * hRatio;

        //Start recording
        context.beginPath();

        //Move the "pen" to the point
        context.moveTo( startx, starty );

        //Make the connection of the "line" with our data (I draw the lines originally this way to make more "natural")
        context.quadraticCurveTo( startx, starty, endx, endy );

        //This doesn't work either
        //context.lineTo( startx, starty, end.x, end.y );

        //Draw the line
        context.stroke();
    }

    for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) {
        if (savedPoints[i] !== 'stopline') {
            savedPoints[i].x *= wRatio;
            savedPoints[i].y *= hRatio;
        }
    }

这篇关于如何缩放用来在画布上绘制线条/曲线的所有点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！