根据用户定义的角度旋转和图像画布

Rotate and image canvas by user defined angle

本文关键字：旋转 图像 用户 定义      更新时间：2023-09-26

我想按用户定义的角度旋转图像，该角度将由输入滑块确定，范围从-90度到90度。基本要求是将画布上的图像拉直。

这是我尝试使用angularjs

my input slider and HTML: 

Straighten: <input type="range" id="rotateImage" value="0" min="-90" max="90" step="1" ng-model="rotateAngle"/>
<div id="imageCanvas">
    <canvas id="canvas"></canvas>
</div>

my controller: 

$scope.$watch('rotateAngle', function(newVal, oldVal) {
if (newVal) {
    rotate(newVal)
}
})
function rotate(rotAngle) {
console.log('rotate angle>> ', rotAngle);
var imageCanvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");
var gridWidth = imageCanvas.width,
    gridHeight = imageCanvas.height;
var deg = Math.PI / 180;
context.translate(gridWidth / 2, gridHeight / 2);
context.rotate(rotAngle * deg);
}

我还在画布的顶部画了一个网格供参考

$scope.Straighten = function() {
var imageCanvas = document.getElementById("canvas"),
    gridWidth = imageCanvas.width,
    canvasWidth = gridWidth,
    gridHeight = imageCanvas.height,
    canvasHeight = gridHeight,
    gridPadding = 1;
var gridCanvas = $('<canvas id=gridLayer></canvas>').attr({
    width: canvasWidth,
    height: canvasHeight
}).appendTo('#imageCanvas');
var context = gridCanvas.get(0).getContext("2d");
drawGridBoard(gridWidth, gridHeight, gridPadding, context);
}
function drawGridBoard(gridWidth, gridHeight, gridPadding, context) {
for (var x = 0; x <= gridWidth; x += 40) {
    context.moveTo(0.5 + x + gridPadding, gridPadding);
    context.lineTo(0.5 + x + gridPadding, gridHeight + gridPadding);
}

for (var x = 0; x <= gridHeight; x += 40) {
    context.moveTo(gridPadding, 0.5 + x + gridPadding);
    context.lineTo(gridWidth + gridPadding, 0.5 + x + gridPadding);
}
context.strokeStyle = "blue";
context.setLineDash([15, 5]);
context.stroke();

}

我能够获得图像必须旋转的角度，但图像没有旋转。请帮忙

我已经在画布上工作了几个星期了。我在更新旋转函数。也许你应该等到图像被加载后再绘制它。请在代码下面发帖

function rotate(rotAngle) {
    console.log('rotate angle>> ', rotAngle);
    var canvas= document.getElementById("canvas"),
    context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height); //Clear the canvas first
    var logoImg = new Image(); // Create instance of the Image class
    logoImg.src = item.image; // Tell the Image's relative url
    var gridWidth = canvas.width,
    var gridHeight = canvas.height;
    var deg = Math.PI / 180;

    logoImg.onload = function () {
                context.save();
                context.translate(gridWidth / 2, gridHeight / 2);
                context.rotate(rotAngle * Math.PI / 180);
                context.drawImage(logoImg, -(gridWidth / 2), -(gridHeight / 2));
                context.restore();
            };
}

上面的代码为我工作。

相关文章：