Question

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

这个想法是用户可以选择要编辑的图像（各种形式的标牌的模板），画布渲染到图像的大小，并在加载页面时将所述图像添加为子图像。目前我使用400 x 650px占位符进行测试。问题是在初始加载或硬刷新页面时，画布大小默认为Pixi的800 x 600px。软刷新页面会根据图片的尺寸调整画布大小，但我想解决这个问题...我确定它可能很容易解决，但我和＃39;在这里未知的水域。任何帮助表示赞赏。提前谢谢。

如果有些代码看起来很糟糕，我很抱歉，我现在完全清楚这是一个巨大的混乱。

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 我已经尝试使用Pixi的内置加载程序，如Hachi所建议的加载图像的评论，但它似乎根本没有加载它。在日志中，它是未定义的。我不明白这个装载机......

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

Answer 1

我明白了。我发现使用加载器的所有示例都让我感到困惑，主要是输入基本JavaScript的语法。无论这是否是解决问题的最简洁方式，我都不确定，但这似乎有效，至少在本地。如果有人提出更好的解决方案，我的感受不会受到伤害。

Kotlin

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

1 个答案: