如何在画布中旋转图像答案

【问题标题】：How to rotate image in Canvas如何在画布中旋转图像
【发布时间】：2016-01-12 11:37:24
【问题描述】：

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

    <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 中获得任何帮助。

【问题讨论】：

我会在指令中创建你的卡瓦斯。那么我可以使用：w3schools.com/tags/canvas_rotate.asp。在控制器中操作 DOM 是错误的做法，这就是我建议创建指令并在链接函数中操作画布的原因

标签： javascript angularjs html canvas

【解决方案1】：

恭喜this页面！一旦您可以掌握画布上下文：

// save the context's co-ordinate system before 
// we screw with it
context.save(); 

// move the origin to 50, 35 (for example)  
context.translate(50, 35); 

// now move across and down half the 
// width and height of the image (which is 128 x 128)
context.translate(64, 64); 

// rotate around this point
context.rotate(0.5); 

// then draw the image back and up
context.drawImage(logoImage, -64, -64); 

// and restore the co-ordinate system to its default
// top left origin with no rotation
context.restore();

【讨论】：

【解决方案2】：

在单个状态更改中执行此操作。 ctx 变换矩阵有 6 个部分。 ctx.setTransform(a,b,c,d,e,f); (a,b) 代表 x,y 方向并缩放图像的顶部。 (c,d) 表示 x,y 方向和缩放图像的一侧将沿着。 (e,f) 表示图像将被绘制的 x,y 位置。

默认矩阵（恒等矩阵）是ctx.setTransform(1,0,0,1,0,0)在方向（1,0）上画上边，在方向（0,1）上画边，在x = 0, y = 0处画一切。

减少状态变化可以提高渲染速度。当它只是绘制几张图像时，这并不重要，但是如果您想以每秒 60 帧的速度为游戏绘制 1000 多张图像，则需要最小化状态更改。如果可以，您还应该避免使用保存和恢复。

该函数绘制一个围绕其中心点旋转和缩放的图像，该中心点位于 x,y 处。比例小于 1 会使图像更小，大于 1 会使图像更大。 ang 以弧度表示，0 没有旋转，Math.PI 为 180 度，Math.PI*0.5 Math.PI*1.5 分别为 90 和 270 度。

function drawImage(ctx, img, x, y, scale, ang){
    var vx = Math.cos(ang) * scale; // create the vector along the image top
    var vy = Math.sin(ang) * scale; // 
    // this provides us with a,b,c,d parts of the transform
    // a = vx, b = vy, c = -vy, and d = vx. 
    // The vector (c,d) is perpendicular (90deg) to (a,b)

    // now work out e and f                                       
    var imH = -(img.Height / 2);    // get half the image height and width
    var imW = -(img.Width / 2);
    x += imW * vx + imH * -vy;        // add the rotated offset by mutliplying
    y += imW * vy + imH * vx;         // width by the top vector (vx,vy) and height by
                                  // the side vector (-vy,vx)
    // set the transform 
    ctx.setTransform(vx, vy, -vy, vx, x, y);
    // draw the image.
    ctx.drawImage(img, 0, 0);
    // if needed to restore the ctx state to default but should only
    // do this if you don't repeatably call this function.
    ctx.setTransform(1, 0, 0, 1, 0, 0); // restores the ctx state back to default
}

【讨论】：

【解决方案3】：

您可以使用 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>

【讨论】：