使用Pixi.js将画布大小调整为图像尺寸

Question

我正在使用真正的基本图像编辑器（主要是为了将文本放在图像上），使用Pixijs ...尽管这可能更像是一个帆布问题，但我是我不确定如何将其分类为绿色的画布，而全新的Pixi。不幸的是，我无法在JSFIDDLE中复制行为。截至目前，我只有在Localhost上运行的，但是如果有人对如何共享此代码有任何建议，我将为任何反馈开放。

想法是，用户将能够选择要编辑的映像（用于各种标牌的模板），画布渲染到图像的大小，并在加载页面时添加该图像。目前，我正在使用400 x 650px占位符进行测试。问题在于，在页面的初始加载或硬刷子上，画布大小默认为Pixi的800 x 600px。柔软的刷新页面将使画布大小为图像的尺寸，但是我想解决这个问题……而且我敢肯定这可能是一个简单的修复程序，但是我在这里未知的水域。任何帮助都将受到赞赏。预先感谢。

我深表歉意，如果某些代码看起来很奇怪，我完全知道这是一个巨大的混乱。

JavaScript （这实际上在AngularJS控制器中）

）

var img = new Image();
var signagetemplate = "placeholderSIGN.png";
img.src = signagetemplate;
var canwidth = img.width;
var canheight = img.height;
var renderer = PIXI.autoDetectRenderer(canwidth, canheight, {
    transparent: true,
    resolution: 1
});
document.getElementById('display').appendChild(renderer.view);
var stage = new PIXI.Container();
PIXI.loader
.add("signitem", signagetemplate)
.load(setup);
function setup() {
    signitem = new PIXI.Sprite(
    PIXI.loader.resources["signitem"].texture
    );
    stage.addChild(signitem);
    renderer.render(stage);
}

编辑9/21/17 我已经尝试使用Hachi在评论中建议使用Pixi的内置加载器来加载图像，但似乎根本没有加载它。在日志中，它是未定义的。我不明白这个装载机...

loader.add('signitem', signagetemplate);
loader.load((loader, resources) => {
    console.log(resources.name, 'loaded.', 'progress:',resources.progressChunk, '%');
});
loader.load(setup);

Answer 1

我弄清楚了。我发现的所有示例与加载者合作，使我有些困惑，主要是用于输入基本JavaScript的语法。我不确定这是否是解决问题的最干净的方法，但这似乎至少在本地起作用。如果某人带来更好的解决方案，我的感觉就不会受到伤害。

var container = new PIXI.Container();
var signagetemplate = //Image to be loaded
var loader = PIXI.loader;
var canwidth;
var canheight;
var renderer = PIXI.autoDetectRenderer({
    transparent: true,
    resolution: 1
});
loader.add("signtemp", signagetemplate)
loader.on('complete', function(loader, resources, IMAGE) {
    var signitem = new PIXI.Sprite(loader.resources.signtemp.texture);
    canwidth = signitem.width;
    canheight = signitem.height;
    container.addChild(signitem);
})
loader.load(setup);
function setup() {
    renderer.resize(canwidth, canheight);
    renderer.render(container);     
}
document.getElementById('display').appendChild(renderer.view);