javascript - 布料模拟+图像上的 Canvas 变换

Question

我正在使用 verlet.js 插件，以便在 Canvas 上使用纹理图像创建布料模拟。

我唯一没有到达的(也是最重要的)部分是我需要倾斜drawImage以使其适合正确的位置。

<强> jsfiddle with the progress

//Drawing the rectangle
ctx.save();
ctx.beginPath();

ctx.moveTo(cloth.particles[i1].pos.x, cloth.particles[i1].pos.y);
ctx.lineTo(cloth.particles[i1+1].pos.x, cloth.particles[i1+1].pos.y);
ctx.lineTo(cloth.particles[i2].pos.x, cloth.particles[i2].pos.y);
ctx.lineTo(cloth.particles[i2-1].pos.x, cloth.particles[i2-1].pos.y);
ctx.lineTo(cloth.particles[i1].pos.x, cloth.particles[i1].pos.y);

ctx.strokeStyle = "#fff";
ctx.stroke();
ctx.restore();

//Wrapping the image
ctx.save();
var off = cloth.particles[i2].pos.x - cloth.particles[i1].pos.x;

//THIS IS WHAT I TRY TO SOLVE TO FIT TO THE RECTANGLES
//ctx.transform(1,0.5,0,1,0,0);
ctx.drawImage(img, cloth.particles[i1].pos.x,cloth.particles[i1].pos.y, off, off, cloth.particles[i1].pos.x,cloth.particles[i1].pos.y, off ,off);
ctx.restore();
}

我尝试过调整其他布料模拟，但没有成功。有什么线索我可以在哪里找到一些信息来完成这个任务吗？

Answer 1

仅当单元格是平行四边形时，使用倾斜(或更确切地说剪切)来填充图 block 才有效，因为 2D 仿射变换仅支持此形状。

这是一种方法:

• 计算上线的 Angular
• 计算左线的 Angular
• 计算单元格的宽度和高度

在平行四边形中，底线将等于上线，当然右线等于左线。

然后将这些 Angular 设置为变换的倾斜参数，并与左上角的平移相结合。

然后对每个单元格重复此操作。

示例

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

  var ctx = document.querySelector("canvas").getContext("2d"),
      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;

    // reference shape (remove this section):
    ctx.setTransform(1,0,0,1,0,0);
    ctx.moveTo(tile[0].x, tile[0].y);
    while(i < 4) ctx.lineTo(tile[i].x, tile[i++].y);
    ctx.closePath();
    ctx.strokeStyle = "#0c0";
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // 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.drawImage(img, 0, 0, w, h);
  }
};

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

<canvas width=500 height=160/>

注意:如果您的布料模拟产生除平行四边形(即四边形)之外的其他形状(这很可能是因为这是物理模拟)，则此方法将无法正常工作。在这种情况下，您需要计算量更大的不同技术。因此，WebGL 更适合。只是我的两分钱..