Javascript 移相器自定义精灵梯形形状

我想使用Phaser Javascript框架创建类似的东西

下面是使用画布创建梯形图像变换的参考示例

下面是我当前使用Phaser.js的代码示例 它使用画布作为渲染器

// custom sprite class
    SkewSpriteSheet = function (game, x, y, image, atlas) {

        this.skew = new Phaser.Point(0, 0);

        if (typeof atlas != 'undefined') {
            Phaser.Sprite.call(this, game, x, y, image, atlas);
        } else {
            Phaser.Sprite.call(this, game, x, y, image);
        }

        game.add.existing(this);
    };


    SkewSpriteSheet.prototype = Object.create(Phaser.Sprite.prototype);

    SkewSpriteSheet.prototype.constructor = SkewSpriteSheet;

    SkewSpriteSheet.prototype.convertToTrapezoid = function() {


        function interpolate(x1, y1, x2, y2, t) {
            return x1 + (x2 - x1) * t;
        }

        var w = this.width;
        var h = this.height - 20;
        var y = this.y;
        var x = this.x;
        var factor = 50;

        // get canvas context
        var ctx = this.game.context;

        var startPoint = x + w * 0.5 * (factor*0.01),
               xi, yi, scale = this.height / h,
               startLine = y,
               endLine = y + h;

           for(; y < endLine; y++) {

               xi = interpolate(startPoint, y, x, endLine, (y - startLine) / h);
               yi = (y * scale + 0.5) | 0;

               // used to redraw the image using the context
               ctx.drawImage(this.texture.baseTexture.source, 0, yi, this.width, 1,
                                  xi, y, w - xi * 2, 1);
           }

    }



    function Game(game) {
        // phaser game
        this._GAME = game;
    };

    Game.prototype = {


        create : function () {


            // add a new sprite
            this._BACKCARD = new SkewSpriteSheet(this._GAME, 400, 100, 'back');
            // convert image to trapezoid
            this._BACKCARD.convertToTrapezoid();


        }
    }

//自定义精灵类
SkewSpriteSheet=函数（游戏、x、y、图像、图集）{
this.skew=新相量点（0,0）；
如果（图集类型！=“未定义”）{
Phaser.Sprite.call（这个，游戏，x，y，图像，地图）；
}否则{
Phaser.Sprite.call（这个，游戏，x，y，图像）；
}
game.add.existing（这个）；
};
SkewSpriteSheet.prototype=Object.create（Phaser.Sprite.prototype）；
SkewSpriteSheet.prototype.constructor=SkewSpriteSheet；
SkewSpriteSheet.prototype.convertToTrapezoid=函数（）{
函数插值（x1，y1，x2，y2，t）{
返回x1+（x2-x1）*t；
}
var w=此宽度；
var h=该高度-20；
var y=这个.y；
var x=这个.x；
var系数=50；
//获取画布上下文
var ctx=this.game.context；
var起始点=x+w*0.5*（系数*0.01），
席，彝，比例尺=身高/小时，
斯达林=y，
终点线=y+h；
对于（；y

是否有人可以帮助或建议使用phaser.js创建与上面链接相同的输出

---

提前感谢

首先：请记住为您复制的代码添加属性。存储x、y、宽度和高度的代码在哪里（当您在调用中引用它们时，即

this.x

等）？。您是否检查了图像是否已加载？控制台（F12）中有错误吗？首先：请记住为您复制的代码添加属性。存储x、y、宽度和高度的代码在哪里（当您在调用中引用它们时，即

this.x

等）？。您是否检查了图像是否已加载？控制台（F12）中有错误吗？