Question

我有一个脚本，可以通过画布创建一个3D立方体。 3D立方体工作正常。但是，为了保持透视，我在使用正确的变换对图像进行应用时遇到了一些困难。

3D立方体由4点帆布线构成。由于这些要点，我尝试将转换应用于图像。

这是一个小提琴示例：https://fiddle.jshell.net/d749ndLL/

这里是构建立方体和图像的主要代码：

canvas.ctx.beginPath();
canvas.ctx.moveTo( this.p0.X, this.p0.Y );
canvas.ctx.lineTo( this.p1.X, this.p1.Y );
canvas.ctx.lineTo( this.p2.X, this.p2.Y );
canvas.ctx.lineTo( this.p3.X, this.p3.Y );
canvas.ctx.closePath();

this.normal.projection();

var r = Math.sqrt( this.normal.z ) * 300,
    g = r,
    b = r;

canvas.ctx.fillStyle = "rgba(" +
    Math.round( r ) + "," +
    Math.round( g ) + "," +
    Math.round( b ) + "," + this.cube.alpha + ")";
canvas.ctx.fill();

if (this.top) {

    canvas.ctx.save();
    var img = new Image();
    img.src = 'http://www.w3schools.com/css/img_fjords.jpg';

    canvas.ctx.setTransform(
        (this.p0.X - this.p1.X) / fl,
        (this.p0.Y - this.p1.Y) / fl,
        (this.p2.X - this.p1.X) / fl,
        (this.p2.Y - this.p1.Y) / fl,
        this.p1.X,
        this.p1.Y
    );

    canvas.ctx.drawImage(img, 0, 0, fl, fl);
    canvas.ctx.restore();

}

我非常接近，但我坚持使用drawImage（）的settransform（）计算。目前的观点不正确：https://fiddle.jshell.net/d749ndLL/

Javascript - 画布setTransform在drawImage上的透视图

0 个答案: