天啊! 问得好!
让我们看看我们有什么。 具有一串“约束”,这是一组2个点的系统。 约束上本身成对出现,并且它们使两条线,形成┘形状(箱的右下角)。
如果我们绘制每个约束线分别,我们会看到这一点:
这是所有水平的红色线和垂直蓝线。 绘制单一一个我们刚刚看到┘形状,每个长红线实际上是成百上千个的小线,每一个底部┘形状,首尾相接。 有几百┘这儿,和他们一起使它看起来像一个有凝聚力的网格。 每一个已经是个人的事实使这个容易做到的。
这形状我们需要确定排序的边框。 它看起来像每个Point的Constraint自带的原始值,所以我们会保存这些作为sx和sy 。
如果我们知道盒子的界限在他们新的位置,我们知道原来的界限beecause我们已经保存了约束上所有点的值,那么我们就应该是金色的。
一旦我们有一个约束和当前边框的原边框,为什么,我们所要做的就是调用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);
};