Question

有什么方法可以在画布上的几个给定点之间拉伸图像（类似于“变换”）。当我使用Transform时，我肯定可以拉伸它，但是它并没有提供我所需要的所有选项。例如，如果我要制作一个会产生物体（例如盒子）的游戏，我想确保根据玩家所在的位置，将图像翻转到盒子的侧面并像将它们放在盒子中一样进行变换。在他们周围移动。在transform中，我可以这样做，但是它将始终在图像的两侧（左右）保持相同的高度，而我需要更多控制权以仅减小图像右侧的高度（可以说）。如果您可以在不使用任何库的情况下给出如何执行操作的提示，将不胜感激。

这里是我目前为止的一个示例（尽管再次，右边的第二个图像在最右边的高度仍然与左边的高度相同）：

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reshape images</title>
</head>
<body style="margin:10px;">

<canvas id="canvas" style="background:#000;"></canvas>
<script type="text/javascript">

// INITIAL SETUP
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
var innerWidth = 1000,
    innerHeight = 650;
    canvas.width = innerWidth;
    canvas.height = innerHeight;




var img = new Image;
img.onload = function() {

  var tile1 = [
        {x: 10, y: 10},    // upper left corner
        {x: 210, y: 50},   // upper right
        {x: 230, y: 150},  // bottom right
        {x: 30, y: 110}    // bottom left
      ],
      tile2 = [
        {x: 210, y: 50},
        {x: 410, y: 5},
        {x: 430, y: 105},
        {x: 230, y: 150}
      ];

  renderTile(this, tile1);
  renderTile(this, tile2);

  function renderTile(img, tile) {
    var dx, dy, a1, a2, w, h, i = 1;


    // calc horizontal angle 
    dx = tile[1].x - tile[0].x;     // horizontal diff.
    dy = tile[1].y - tile[0].y;     // vertical diff.
    a1 = Math.atan2(dy, dx);        // angle, note dy,dx order here
    w = dx|0;                       // width based on diff for x

    // calc vertical angle 
    dx = tile[3].x - tile[0].x;
    dy = tile[3].y - tile[0].y;
    a2 = Math.atan2(dx, dy);        // note dx,dy order here
    h = dy|0;

    // draw image to fit parallelogram
    // ctx.setTransform(1, a1, a2, 1, tile[0].x, tile[0].y);
    ctx.setTransform(1, a1, a2, 1, tile[0].x, tile[0].y);
    ctx.drawImage(img, 0, 0, w, h);
  }
};

img.src = "http://i.imgur.com/rUeQDjE.png";



</script>
<script src="src.js"></script>
</body>
</html>

使用无库的Javascript在几点之间进行画布绘制，绘制（拉伸）图像

0 个答案: