请教关于旋转图片的原理。 about welcropper

[tomfriwel]

你可以单独建一个canvas来试一下这个函数，传入canvas的context，图片路径，长宽，和旋转角度。

function drawImageWithDegree(ctx, path, width, height, degree) {
    let isVertical = degree % 180 > 0

    let drawWidth = isVertical ? height : width
    let drawHeight = isVertical ? width : height

    let centerX = width / 2
    let cneterY = height / 2

    let drawCenterX = drawWidth / 2
    let drawCneterY = drawHeight / 2

    let d = Math.abs(width - height) / 2

    // ctx.translate(drawCenterX, drawCneterY)
    // ctx.rotate(degree * Math.PI / 180)
    // ctx.translate(-drawCenterX, -drawCneterY)

    ctx.translate(centerX, cneterY)
    ctx.rotate(degree * Math.PI / 180)
    ctx.translate(-centerX, -cneterY)

    // ctx.translate(-d, d)
    if (isVertical) {
        if (drawHeight > drawWidth) {
            ctx.drawImage(path, d, -d, drawWidth, drawHeight)
        }
        else {
            ctx.drawImage(path, -d, d, drawWidth, drawHeight)
        }
    }
    else {
        ctx.drawImage(path, 0, 0, drawWidth, drawHeight)
    }

    ctx.draw(false, function (e) {
        console.log('draw callback')
    })
}

因为默认是以(0, 0)为旋转中心的，我将其转换到图片中心位置，然后进行绘制图片。

ctx.translate(centerX, cneterY)
ctx.rotate(degree * Math.PI / 180)
ctx.translate(-centerX, -cneterY)

[jimmyrogue]

好的 非常感谢