缩放旋转图像以使用JavaScript三角函数填充HTML5画布？ [英] Scale rotated image to fill HTML5 Canvas using JavaScript trigonometry?

问题描述

以下是我目前使用的代码。使用 0 旋转，图像会正确缩放以填充画布。 （类似于 background-size：cover ，除非在Canvas中使用JavaScript）

Below is the code I am currently using. With 0 rotation, the image is correctly scaled to fill the canvas. (similar to background-size: cover, except using JavaScript on a Canvas)

1. 旋转时保持图像居中。我尝试使用 width / 2 在 translate ，然后在 drawImage ，但是你可以看到图像没有保持中心。我不知道这是否与我之前的 x 和 y 中心代码冲突，或者如果需要三角学

1. Keep image centered while rotating. I tried using width / 2 in translate, and then the opposite in drawImage, but as you can see the image did not stay centered. I'm not sure if this is a conflict with my earlier x and y centering code, or if trigonometry is required here?

自动缩放图片以覆盖画布。这些是任意旋转，而不是90度增量。我不想裁剪任何更多的图像，不必要的填充画布的角落。这是比我用来处理更复杂的三角学。

Automatically scale the image further to cover the canvas. These are arbitrary rotations, not 90 degree increments. I don't want to crop any more of the image than necessary to fill the canvas corners. This is much more complex trigonometry than I am used to dealing with.

我认为这可以用 Math.sin 和 Math.cos ，但是从我使用它以来已经很长时间了。我特别不确定如何实现＃2。任何帮助将不胜感激。

I think this can be done with Math.sin and Math.cos, but it's been a very long time since I've used them. I'm especially uncertain about how to achieve #2. Any help would be appreciated.

var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d')
var image = new Image()
image.src = 'http://i.stack.imgur.com/7FsbT.jpg'

image.onload = function () {
  
  var maxScaleX = canvas.width / image.width
  var maxScaleY = canvas.height / image.height
  scale = maxScaleX > maxScaleY ? maxScaleX : maxScaleY
  
  var width = image.width * scale
  var height = image.height * scale
  var x = (width - canvas.width) / -2
  var y = (height - canvas.height) / -2
  
  var degrees = 30
  
  context.setTransform(1, 0, 0, 1, 0, 0) // reset previous translate and/or rotate
  context.translate(width / 2, height / 2)
  context.rotate(degrees * Math.PI / 180)
  
  context.drawImage(image, x - width / 2, y - height / 2, width, height)

}

<canvas width="350" height="150" style="border: solid 1px black"></canvas>

推荐答案

+ 1给Blindman67的回答，以便工作。

我缩短了代码并简化了我的用例。您应该能够将 function drawBestFit（）包含到您的应用程序中，并使用它来填充任何已加载图片的画布。

I shortened the code and simplified for my use case. You should be able to just include function drawBestFit() into your app and use it to fill any canvas with any loaded image.

要更好地了解其工作原理，请查看

For a better understanding of how this works, view Blindman67's original answer - especially the demonstration snippet at the bottom.

- 特别是底部的演示片段。 false>

var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d')
var image = new Image()
image.src = 'http://i.stack.imgur.com/7FsbT.jpg'

image.onload = function() {

  var degrees = 0

  loop()

  function loop() {
    degrees += .5
    drawBestFit(context, degrees * Math.PI / 180, image)
    requestAnimationFrame(loop)
  }

  function drawBestFit(ctx, angle, image) {
    
    var dist = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2))
    var diagAngle = Math.asin(canvas.height / dist)

    var 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))
    
    var ang1 = Math.PI / 2 - diagAngle - Math.abs(a1)
    var ang2 = Math.abs(diagAngle - Math.abs(a1))
    
    var scale1 = Math.cos(ang1) * dist / image.height
    var scale2 = Math.cos(ang2) * dist / image.width
    
    var scale = Math.max(scale1, scale2)
    
    var dx = Math.cos(angle) * scale
    var dy = Math.sin(angle) * scale
    ctx.setTransform(dx, dy, -dy, dx, canvas.width / 2, canvas.height / 2)
    
    ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height)
    
    ctx.setTransform(1, 0, 0, 1, 0, 0) // reset transformations when done

  }

}

<canvas width="350" height="200" style="border: solid 1px black"></canvas>

这篇关于缩放旋转图像以使用JavaScript三角函数填充HTML5画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！