使用 Pixi.js 将 Canvas 大小调整为图像大小

Question

我正在使用 PixiJS 开发一个非常基本的图像编辑器（主要设计用于在图像上放置文本）...虽然这可能更像是一个 Canvas 问题，但我不确定如何对其进行分类，因为我是 Canvas 的绿色，对 Pixi 是全新的。不幸的是，我无法复制 JSFiddle 中的行为。截至目前，我在本地主机上只有这个运行，但如果有人对如何共享此代码有任何建议，我愿意接受任何反馈。

这个想法是用户可以 select 编辑图像（各种形式标牌的模板），canvas 渲染图像大小并添加所述图像作为加载页面时的 child。现在我使用 400 x 650px 占位符进行测试。问题是在初始加载或硬刷新页面时，canvas 大小默认为 Pixi 的 800 x 600 像素。软刷新页面会将 canvas 的大小调整为图像的尺寸，但我想解决这个问题......我相信这可能是一个简单的解决方法，但我在这里处于未知领域。任何帮助表示赞赏。提前致谢。

如果此代码中的某些部分看起来不稳定，我深表歉意，我完全知道现在这是一团糟。

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);
}

编辑 2017 年 9 月 21 日 我试过按照 Hachi 在评论中的建议使用 Pixi 的 built-in 加载程序来加载图像，但它似乎根本没有加载它。在日志中，它是未定义的。我不明白这个装载机...

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);

使用 Pixi.js 将 Canvas 大小调整为图像大小

Adjusting Canvas size to image size with Pixi.js

html

javascript

canvas

javascript-objects

pixi.js