如何在 EaselJs 中用文本覆盖位图图像

Question

我希望将文本覆盖在 EaselJs 画布内的位图之上。

在我的代码中，首先使用 PreloadJS 加载图像。然后在此之后添加了文本。它们都从 x = 0, y = 0 开始，具有不同的宽度和高度。因此，为了显示文本，我需要将它放在图像之上。

我有一种方法可以根据参数显示文本或图像，即 DisplayObj。所以基本上，我必须先调用 DisplayObj(img)，然后再调用 DisplayObj(text)。但是，这会导致文本显示在图像的后面。如果我更改我的代码，而不是执行 2 次函数调用，我只是将显示文本的逻辑放在显示图像之后，只调用 1 次就可以了。但是，这不是我想要的，因为有时文本和图像不需要相互叠加，因此这种方法似乎不太好。

关于如何使用 Easel 和 jQuery 来做这件事有什么建议吗？

下面是我用 Typescript 编写的函数：

function DisplayContentObject(c_xml: any): JQueryPromise<any> {
//var deferred: JQueryDeferred<any> = $.Deferred();
//var promise: JQueryPromise<any> = deferred.promise();

if (c_xml.attributes.is_visible.value === "1") {
    if (c_xml.attributes.type.value.toLowerCase().indexOf("text") > -1) {
        let x: number = +c_xml.attributes.content_pos.value.split(",")[0];
        let y: number = +c_xml.attributes.content_pos.value.split(",")[1];
        let width: number = +c_xml.attributes.content_size.value.split(",")[0];
        let height: number = +c_xml.attributes.content_size.value.split(",")[1];
        var text = c_xml.attributes.data.value;
        var textElement = new createjs.Text(text, "16px Times New Roman", "#00F");
        textElement.x = x + 10;
        textElement.y = y + 10;

        textElement.lineWidth = width;
        textElement.maxWidth = width;
        textElement.lineHeight = 20;

        stage.addChild(textElement);
        stage.update();
        displayContentDeffered.resolve();
    }
    if (c_xml.attributes.type.value.toLowerCase().indexOf("audio") > -1) {
        var fe: string = c_xml.attributes.filename.value.split(".")[1].toLowerCase();
        if (fe === "swf") {
        } else if (fe === "mp3") {
            createjs.Sound.stop();
            createjs.Sound.addEventListener("fileload", SoundFileLoaded);
            createjs.Sound.alternateExtensions = ["mp3"];
            createjs.Sound.registerSound({ id: "audio", src: media_path + c_xml.attributes.filename.value });
        }
        displayContentDeffered.resolve();
    }
    if (c_xml.attributes.type.value.toLowerCase().indexOf("visual") > -1) {
        var file: string = c_xml.attributes.filename.value;
        if (file.indexOf("swf") === -1) {
            let _x: number = +c_xml.attributes.content_pos.value.split(",")[0];
            let _y: number = +c_xml.attributes.content_pos.value.split(",")[1];
            let _w: number = +c_xml.attributes.content_size.value.split(",")[0];
            let _h: number = +c_xml.attributes.content_size.value.split(",")[1];
            var manifest = [
                {
                    src: media_path + file,
                    id: "img", x: _x, y: _y, w: _w, h: _h
                }
            ];
            preload = new createjs.LoadQueue(true);
            preload.on("complete", ImageFileLoaded, this);
            preload.loadManifest(manifest);
        } else
            displayContentDeffered.resolve();
    }
} else {
    if (c_xml.attributes.type.value.toLowerCase().indexOf("audio") > -1) {
        var fe: string = c_xml.attributes.filename.value.split(".")[1].toLowerCase();
        if (fe === "swf") {
        } else if (fe === "mp3") {
            createjs.Sound.stop();
            createjs.Sound.addEventListener("fileload", SoundFileLoaded);
            createjs.Sound.alternateExtensions = ["mp3"];
            createjs.Sound.registerSound({ id: "audio", src: media_path + c_xml.attributes.filename.value });
        }
    }
    displayContentDeffered.resolve();
}   

return displayContentPromise;
}

该函数采用一个 XMLObject，其中包含应显示的信息。此 XMLObject 可以包含文本信息或图像 url。该函数在循环中调用。

一般来说：

• 我有一个要显示的对象列表。假设 contents = [a, b, c]。 a 是声音，b 是图像，c 是文本。
• 在循环中，迭代内容对象并使用 DisplayObj 函数显示每个对象。

问题发生在我使用 PreloadJS 加载图像并在 OnComplete 事件中处理加载逻辑的 b 处。当我发现这一点时，在我们完成 c 之前，OnComplete 不会完成。因此在这种情况下，加载顺序将是 a - c - b，因此文本位于图像下方。我仍在尝试使用 jQuery Defered，但到目前为止还没有成功。

Answer 1

您似乎已经确定了您的比赛条件。您可以做几件事。

1. 创建一个占位符Container 并立即将其添加到舞台。然后，当预加载器完成后，将图像添加到该容器而不是舞台，您将获得适当的分层。

2. 在解析 XML 之前预加载所有图像，以便它们已经在内存中可供添加。