Question

从ipcMain触发事件到窗口后，我试图在easyljs中动态生成Sprite-sheet。

我遇到的问题是preloadjs / easeljs在控制台中触发了此错误：

无法读取未定义的属性“ getContext”

这只会在我打包应用程序之后发生，而不是在开发人员模式下发生，按预期工作。

这是我在窗口中的代码

select 
  t.salesyear,
  t.sales,
  100.0 * t.sales / t.yearlygrandtotal percentage
from (
  select 
    year(orderdate) salesyear,
    sum(case when salespersonid = 275 then subtotal + taxamt else 0 end) sales,
    sum(subtotal + taxamt) yearlygrandtotal
  from [AdventureWorks2017].[Sales].[SalesOrderHeader]
  group by year(orderdate) 
) t

这是我的electron.js代码。

import { ipcRenderer } from "electron";
let canvasEl, stage, queue;

ipcRenderer.on("render-spritesheets", (_, data) => {
  const files = data.previewFiles;
  const info = data.info;

  canvasEl = document.getElementById("stage");
  canvasEl.width = info.width;
  canvasEl.height = info.height;
  canvasEl.style.backgroundColor = "black";

  stage = new createjs.Stage("stage");

  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  createjs.Ticker.framerate = info.framerate;

  function handleTick() {
    stage.update();
  }
  createjs.Ticker.addEventListener("tick", handleTick);

  function onError(err) {
    console.log(err);
  }

  function onComplete(event) {
    const spritesheets = files
      .map(f => f.path)
      .map((_, i) => queue.getResult(`spr_${i}`));
    console.log(spritesheets);
    const spritesheetData = {
      images: spritesheets,
      frames: {
        width: +info.width,
        height: +info.height,
        count: +info.frames,
        regX: 0,
        regY: 0
      }
    };

    const spriteSheet = new createjs.SpriteSheet(spritesheetData);
    const animation = new createjs.Sprite(spriteSheet);
    stage.addChild(animation);
    animation.play();
  }

  function loadSpritesheets() {
    const manifest = [];
    files.forEach((file, index) => {
      manifest.push({ src: file.path, id: `spr_${index}` });
    });

    queue = new createjs.LoadQueue(false);
    queue.addEventListener("complete", onComplete);
    queue.addEventListener("error", onError);
    queue.loadManifest(manifest, true);
  }

  loadSpritesheets();
});

谢谢！

Answer 1

这个问题几乎总是由canvas元素尚未在DOM中引起的。使用时：

 stage = new createjs.Stage("stage");

将使用document.getElementById("stage");查找舞台。如果它不在DOM中，则您对上下文的任何访问都将失败。

这行有效吗？它做同样的事情。

canvasEl = document.getElementById("stage");

通常，框架会创建一个文档片段，而您必须查询该片段以获得阶段参考。

希望有帮助。

无法读取未定义的属性“ getContext”-电子

1 个答案: