html5 canvas strokeStyle？

Question

我试图将图像映射到使用strokeStyle和canvas模拟布料的"3d"网格,我有包含的图像,但它目前充当背景图像而不是实际上流动的"布",因为是涟漪,IE当网格流动时,图像是静态的.这里是自我解释的jsfiddle(仅适用于Chrome).任何帮助深表感谢.这里是将图像渲染到背景中的javascript,如何停止渲染为背景图像并仅使其填充网格？:

function update() {

    var img = new Image();
    img.src = 'http://free-textures.got3d.com/architectural/free-stone-wall-   textures/images/free-stone-wall-texture-002.jpg';
    img.onload = function() {

        // create pattern
        var ptrn = ctx.createPattern(img, 'repeat');

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        physics.update();

        ctx.strokeStyle = ptrn;
        ctx.beginPath();
        var i = points.length;
        while (i--) points[i].draw();
        ctx.stroke();

        requestAnimFrame(update);
    }
}

她是我工作的原始代码.`更新小提琴与图像外侧的功能更新():目前,它似乎确实填补细胞以及把它当成一个背景图像.有没有办法阻止它成为背景图像,只应用它来填充网格？我试过这个:
ctx.fillStyle = ptrn; 并删除第260行:
ctx.strokeStyle = ptrn; 但它似乎删除了背景图像只是将其显示为黑色网格...再次感谢您的耐心

Answer 1

天啊!好问题!

那么让我们看看我们得到了什么.一个有一堆"约束"的系统,它是2个点的集合.Contraints本身成对出现,它们形成两条线,形成一个?形状(盒子的右下角).

如果我们要单独绘制每个约束线,我们会看到:

这是所有水平红线和垂直蓝线.绘制一个单一的,我们只看到那个?形状,每条长红线实际上是数百条小线条,每个?形状的底部,端到端.这里有几百个?,它们一起使它看起来像一个粘性网格.事实上,每个人都已经是个人,这对我们来说很容易.

这种形状是我们确定一种边界框所需要的.它看起来像每Point一个Constraint带有原始值,所以我们会保存这些为sx和sy.

如果我们知道新位置的方框的边界,并且我们知道原始边界因为我们已经保存了所有Point的Contraints值,那么我们应该是金色的.

一旦我们有了Constraint的原始边界框及其当前的边界框,为什么,我们所要做的就是用两个框调用drawImage: ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

我写了一个新Constraint.prototype.draw例程,它看起来像这样:

等等.

有几种方法可以"修补"这些洞,它真的取决于你,否则你将不得不通过转换来完成任务.

看看代码.我的变化不大.!!!在代码(我的编辑)和代码中查找DEBUG:(如果图像没有加载或者你想看到线框,则调试代码).

http://jsfiddle.net/simonsarris/Kuw6P/

代码很长,所以我不想把它全部粘贴在这里,但这里有一个备份以防jsfiddle下降:https://gist.github.com/simonsarris/5405304

这是最相关的部分:

// !!! new super awesome draw routine! So cool we skipped naming it draw2!
Constraint.prototype.draw3 = function(otherP2) {

  // NOW dear friends consider what we have. Each box is made out of two lines,
  // the bottom and rightmost ones.
  // From these lines we can deduce the topleft and bottom-right points
  // From these points we can deduce rectangles
  // From the skewed rectangle vs the original rectangle we can "stretch"
  // an image, using drawImage's overloaded goodness.

  // AND WE'RE OFF:

  // destination rect has 2 points:
  //top left: Math.min(this.p2.x, otherP2.x), Math.min(this.p2.y, otherP2.y)
  //bottom right: (this.p1.x, this.p1.y)

  // image destination rectangle, a rect made from the two points
  var dx = Math.min(this.p1.x,  Math.min(this.p2.x, otherP2.x));
  var dy = Math.min(this.p1.y,  Math.min(this.p2.y, otherP2.y));
  var dw = Math.abs(this.p1.x - Math.min(this.p2.x, otherP2.x));
  var dh = Math.abs(this.p1.y - Math.min(this.p2.y, otherP2.y));
  // DEBUG: IF THERE IS NO IMAGE TURN THIS ON:
  //ctx.strokeStyle = 'lime';
  //ctx.strokeRect(dx, dy, dw, dh);

  // source rect 2 points:
  //top left: Math.min(this.p2.sx, otherP2.sx), Math.min(this.p2.sy, otherP2.sy)
  //bottom right: (this.p1.sx, this.p1.sy)

  // these do NOT need to be caluclated every time,
  // they never change for a given constraint
  // calculate them the first time only. I could do this earlier but I'm lazy
  // and its past midnight. See also: http://www.youtube.com/watch?v=FwaQxDkpcHY#t=64s
  if (this.sx === undefined) {
    this.sx = Math.min(this.p1.sx,  Math.min(this.p2.sx, otherP2.sx));
    this.sy = Math.min(this.p1.sy,  Math.min(this.p2.sy, otherP2.sy));
    this.sw = Math.abs(this.p1.sx - Math.min(this.p2.sx, otherP2.sx));
    this.sh = Math.abs(this.p1.sy - Math.min(this.p2.sy, otherP2.sy));
  }
  var sx = this.sx;
  var sy = this.sy;
  var sw = this.sw;
  var sh = this.sh;
  // DEBUG: IF THERE IS NO IMAGE TURN THIS ON:
  //ctx.strokeStyle = 'red';
  //ctx.strokeRect(sx, sy, sw, sh);


  // IF we have a source and destination rectangle, then we can map an image
  // piece using drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
  // Only problem, we're not exactly dealing with rectangles....
  // But we'll deal. Transformations have kooties anyways.
  ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
};