如何在畫布

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

以curtesy登錄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 2

做到在一個單一的狀態變化。 ctx變換矩陣有6個部分。 （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度和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 
} 

Answer 3

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