我正在尝试在我的画布上绘制透视网格,我从另一个网站更改了函数,得到了以下结果:
function keystoneAndDisplayImage(ctx, img, x, y, pixelHeight, scalingFactor) {
var h = img.height,
w = img.width,
numSlices = Math.abs(pixelHeight),
sliceHeight = h / numSlices,
polarity = (pixelHeight > 0) ? 1 : -1,
heightScale = Math.abs(pixelHeight) / h,
widthScale = (1 - scalingFactor) / numSlices;
for(var n = 0; n < numSlices; n++) {
var sy = sliceHeight * n,
sx = 0,
sHeight = sliceHeight,
sWidth = w;
var dy = y + (sliceHeight * n * heightScale * polarity),
dx = x + ((w * widthScale * n) / 2),
dHeight = sliceHeight * heightScale,
dWidth = w * (1 - (widthScale * n));
ctx.drawImage(img, sx, sy, sWidth, sHeight,
dx, dy, dWidth, dHeight);
}
}
它创建了一个几乎好的透视网格,但它没有按比例缩放高度,所以每个正方形都有相同的高度。这里是一个工作的jsFiddle和它应该看起来像什么,就在画布下面。我想不出任何数学公式来使高度按比例扭曲到“透视距离”(顶部)。希望你能理解。对于语言错误,我很抱歉。任何帮助将不胜感激。问候。