javascript - 如何在 Canvas 中旋转图像

Question

我用 https://github.com/petalvlad/angular-canvas-ext 构建了一个 Canvas 项目

    <canvas width="640" height="480" ng-show="activeateCanvas" ap-canvas src="src" image="image" zoomable="true" frame="frame" scale="scale" offset="offset"></canvas>

我能够使用以下代码成功缩放和平移图像

        scope.zoomIn = function() {
          scope.scale *= 1.2;
        }

        scope.zoomOut = function() {
          scope.scale /= 1.2;
        }

另外我想旋转图像。我可以使用哪个库来获得任何帮助以及如何在 angularjs 中做到这一点。

Answer 1

您可以使用 JavaScript 中的 context.rotate 函数旋转图像。 以下是如何执行此操作的示例:

var canvas = null;
var ctx = null;
var angleInDegrees = 0;
var image;
var timerid;

function imageLoaded() {
    image = document.createElement("img");
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');
    image.onload = function() {
        ctx.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.height / 2);
    };
    image.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7vR66BWT_HdVJpwxGJoGBJl5HYfiSKDrsYrzw7kqf2yP6sNyJtHdaAQ";
}

function drawRotated(degrees) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
    ctx.restore();
}

<button onclick="imageLoaded();">Load Image</button>
<div>
    <canvas id="canvas" width=360 height=360></canvas><br>

    <button onclick="javascript:clearInterval(timerid);
            timerid = setInterval(function() {
                angleInDegrees += 2;
                drawRotated(angleInDegrees);
            }, 100);">
        Rotate Left
    </button>

    <button onclick="javascript:clearInterval(timerid);
            timerid = setInterval(function() {
                angleInDegrees -= 2;
                drawRotated(angleInDegrees);
            }, 100);">
        Rotate Right
    </button>
</div>