All geek questions in one place

After rotation, display the image in the correct position

As you can see, I'm trying to rotate the image in the canvas: https://jsfiddle.net/1a7wpsp8/4/enter image description here

As I turned the image around [0, image_height], Image-Information was lost. Parts of the head are missing , and the height of the canvas is now small to display the entire rotated image.

To solve this problem , it seems to me that I need to move the start of rotation more to the right and increase the height of the canvas.

I added a method to get a rotating point around the origin at a certain angle:

function rotate(x, y, a) {
 var cos = Math.cos,
    sin = Math.sin,

    a = a * Math.PI / 180, 
    xr =  x * cos(a) - y * sin(a);
    yr =  x * sin(a) + y * cos(a);

 return [xr, yr];
}

With this, I tried to figure out a new spinning origin, but could not.

? , ? https://jsfiddle.net/1a7wpsp8/4/

+3
5

:) http://jsfiddle.net/6ZsCz/1911/

HTML:

canvas id="canvas" width=300 height=300></canvas><br>
<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>

JS:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=0;
var height=0;
var diagonal = 0;
var angleInDegrees=0;
var image=document.createElement("img");
image.onload=function(){
    width = image.naturalWidth;
  height = image.naturalHeight;
 diagonal=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
   ctx.canvas.height = diagonal;
  ctx.canvas.width = diagonal;
  ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(0);
    ctx.drawImage(image,-width/2,-height/2);
    ctx.restore();
}
image.src="http://i.imgur.com/gwlPu.jpg";

$("#clockwise").click(function(){ 
    angleInDegrees+=45;
    drawRotated(angleInDegrees);
});

$("#counterclockwise").click(function(){ 
    angleInDegrees-=45;
    drawRotated(angleInDegrees);
});

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

CSS ( ):

canvas{border:1px solid red;
background:red;border-radius:50%} // to see exectly centered :)
+4

, , .

// assuming canvas is the canvas and image is the image.
var dist = Math.sqrt(Math.pow(canvas.width/2,2)+Math.pow(canvas.height/2,2));

;

var imgDist = Math.min(image.width,image.height)/2

, , , , .

var minScale = dist / imgDist;

, ,

( X)

// ang is the rotation in radians
var dx = Math.cos(ang) * minScale;
var dy = Math.sin(ang) * minScale;

, X, - Y, 90 X, .

// ctx is the canvas 2D context
ctx.setTransform(dx, dy, -dy, dx, canvas.width / 2, canvas.height / 2);

.

ctx.drawImage(image,-image.width / 2, - image.height / 2);

,

ctx.setTransform(1,0,0,1,0,0);

.

// ctx is canvas 2D context
// angle is rotation in radians
// image is the image to draw
function drawToFitRotated(ctx, angle, image){
    var dist = Math.sqrt(Math.pow(ctx.canvas.width /2, 2 ) + Math.pow(ctx.canvas.height / 2, 2));
    var imgDist = Math.min(image.width, image.height) / 2;
    var minScale = dist / imgDist;
    var dx = Math.cos(angle) * minScale;
    var dy = Math.sin(angle) * minScale; 
    ctx.setTransform(dx, dy, -dy, dx, ctx.canvas.width / 2, ctx.canvas.height / 2);
    ctx.drawImage(image, -image.width / 2, - image.height / 2);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
}

UPDATE , , , , , , , . , , , , , 4 , . , , .

enter image description here , . - R. C-E C-F. Ih Iw .

C-B, (ch) (cw).

A, acos (ch)/ C-B

, A, A1 A2. C-B A1, A2, C-E-B C-F-B C-E C-F. C-E = C-B * cos (A1) C-F = C-B * cos (A2)

, C-E Ih C-E Iw. , , .

, , .

. 0 -90 , . , . > 180 180, > 90 °, 180 90 . . , 0 - 360 ( 0 Math.PI * 2).

.

. - , - . , , , .

, .

- .

demo = function(){
    /** fullScreenCanvas.js begin **/
    var canvas = (function(){
        var canvas = document.getElementById("canv");
        if(canvas !== null){
            document.body.removeChild(canvas);
        }
        // creates a blank image with 2d context
        canvas = document.createElement("canvas"); 
        canvas.id = "canv";    
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight; 
        canvas.style.position = "absolute";
        canvas.style.top = "0px";
        canvas.style.left = "0px";
        canvas.style.zIndex = 1000;
        canvas.ctx = canvas.getContext("2d"); 
        document.body.appendChild(canvas);
        return canvas;
    })();
    var ctx = canvas.ctx;
    var image = new Image();
    image.src = "http://i.imgur.com/gwlPu.jpg";

    var w = canvas.width;
    var h = canvas.height;
    var cw = w / 2;  // half canvas width and height
    var ch = h / 2;
    // Refer to diagram in answer 
    function drawBestFit(ctx, angle, image){
        var iw = image.width / 2;  // half image width and height
        var ih = image.height / 2;
        // get the length C-B
        var dist = Math.sqrt(Math.pow(cw,2) + Math.pow(ch,2));
        // get the angle A
        var diagAngle = Math.asin(ch/dist);

        // Do the symmetry on the angle
        a1 = ((angle % (Math.PI *2))+ Math.PI*4) % (Math.PI * 2);
        if(a1 > Math.PI){
            a1 -= Math.PI;
        }
        if(a1 > Math.PI/2 && a1 <= Math.PI){
            a1 = (Math.PI/2) - (a1-(Math.PI/2));
        }
        // get angles A1, A2
        var ang1 = Math.PI/2 - diagAngle - Math.abs(a1);
        var ang2 = Math.abs(diagAngle - Math.abs(a1));
        // get lenghts C-E and C-F
        var dist1 = Math.cos(ang1) * dist;
        var dist2 = Math.cos(ang2) * dist;
        // get the max scale
        var scale = Math.max(dist2/(iw),dist1/(ih));
        // create the transform
        var dx = Math.cos(angle) * scale;
        var dy = Math.sin(angle) * scale; 
        ctx.setTransform(dx, dy, -dy, dx, cw, ch);
        ctx.drawImage(image, -iw, - ih);


        // draw outline of image half size
        ctx.strokeStyle = "red";
        ctx.lineWidth = 2 * (1/scale);
        ctx.strokeRect(-iw / 2, -ih / 2, iw, ih) 

        // reset the transform
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        // draw outline of canvas half size
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 2;
        ctx.strokeRect(cw - cw / 2, ch - ch / 2, cw, ch) 

    }

    // Old function
    function drawToFitRotated(ctx, angle, image){
        var dist = Math.sqrt(Math.pow(cw,2) + Math.pow(ch,2));
        var imgDist = Math.min(image.width, image.height) / 2;
        var minScale = dist / imgDist;

        var dx = Math.cos(angle) * minScale;
        var dy = Math.sin(angle) * minScale; 
        ctx.setTransform(dx, dy, -dy, dx, cw, ch);
        ctx.drawImage(image, -image.width / 2, - image.height / 2);
        ctx.setTransform(1, 0, 0, 1, 0, 0);
    }      

    var angle = 0;
    function update(){  // animate the image
        if(image.complete){
            angle += 0.01;
            drawBestFit(ctx,angle,image);
        }
        
        // animate until resize then stop remove canvas and flag that it has stopped
        if(!STOP){
            requestAnimationFrame(update);
        }else{
           STOP = false;
           var canv = document.getElementById("canv");
           if(canv !== null){
              document.body.removeChild(canv);
           }
            
        }
        
    }
    update();
}
/** FrameUpdate.js end **/
var STOP = false;  // flag to tell demo app to stop 
// resize Tell demo to stop then wait for it to stop and start it again
function resizeEvent(){
    var waitForStopped = function(){
        if(!STOP){  // wait for stop to return to false
            demo();
            return;
        }
        setTimeout(waitForStopped,200);
    }
    STOP = true;
    setTimeout(waitForStopped,100);
}
// if resize stop demo and restart
window.addEventListener("resize",resizeEvent);
 // start demo
demo();
Hide result
+11

?

, , ,

ctx.save();
ctx.translate(width/2, height/2);
ctx.rotate(-40*Math.PI/180);
ctx.drawImage(img, -width/2, -height/2);
ctx.restore();

?

, , ( ) C C=sqrt(width^2 + height^2). C/2 .

+1

, , , . - :

ctx.translate(width/2, height/2);
ctx.rotate(-40*Math.PI/180);
ctx.translate(-width/2, -height/2);


// Grab the Canvas and Drawing Context
var canvas = $('#c');
var ctx = canvas.get(0).getContext('2d');

//rotate point x,y around origin with angle a, get back new point 
function rotate(x, y, a) {
  var cos = Math.cos,
    sin = Math.sin,

    a = a * Math.PI / 180,
    xr = x * cos(a) - y * sin(a);
  yr = x * sin(a) + y * cos(a);

  return [xr, yr];
}

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function() {
  var width = img.naturalWidth;
  var height = img.naturalHeight;

  canvas.attr('width', width);
  canvas.attr('height', height);

  //only to show that borders of canvas
  ctx.rect(0, 0, width, height);
  ctx.fillStyle = "red";
  ctx.fill();

  ctx.save();
  ctx.translate(width / 2, height / 2);
  ctx.rotate(-40 * Math.PI / 180); //comment this line out to see orign image
  ctx.translate(-width / 2, -height / 2);
  ctx.drawImage(img, 0, 0);
  ctx.restore();

}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";
body {
  background: #CEF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<canvas id="c"></canvas>
Run codeHide result
0
source

Move the rotation center to the canvas approximation center: See Source Code for http://wisephoenix.org/html5/Rotation.htm What is written in html5 and javascript.

-2
source

Source: https://habr.com/ru/post/1627839/

More articles:


All Articles