Question

我用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内做。

Answer 1

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

var canvas = null;
            var ctx = null;
            var angleInDegrees = 0;
            var image;

            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();
            }
            var timerid;

<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>

Answer 2

谦虚到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();

Answer 3

在单个状态更改中执行此操作。 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为180deg，Math.PI * 0.5 Math.PI * 1.5分别为90和270deg。

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
}

如何在Canvas中旋转图像

3 个答案: