为什么图像无法显示

作者: abhisunny2610创建于 2025年1月9日更新于 2025年3月27日

export function setupCanvas(graph, backgroundImageUrl) { const canvas = new LGraphCanvas("#graph-canvas", graph);

// 如果提供了背景图像,则加载背景图像 if (backgroundImageUrl) { const img = new Image(); img.src = backgroundImageUrl; console.log("正在从", img.src, "加载图像");

img.onload = () => {
  console.log("图像加载成功:", img.src);

  // 手动绘制背景图像
  const ctx = canvas.canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, canvas.canvas.width, canvas.canvas.height);

  console.log("背景图像已手动绘制");
};

img.onerror = () => {
  console.error("无法加载背景图像:", img.src);
};

}

// 缩放控件 document.getElementById("zoom-in").onclick = () => { if (canvas.ds.scale < 2) { // 限制最大缩放 canvas.ds.scale *= 1.2; canvas.setDirty(true, true); } };

document.getElementById("zoom-out").onclick = () => { if (canvas.ds.scale > 0.2) { // 限制最小缩放 canvas.ds.scale *= 0.8; canvas.setDirty(true, true); } };

/**

  • 将画布调整到适合其容器的大小 */ function resizeCanvas() { const canvasElement = document.getElementById("graph-canvas"); const container = document.getElementById("graph-container"); canvasElement.width = container.offsetWidth; canvasElement.height = container.offsetHeight; canvas.setDirty(true, true); }

// 处理窗口大小变化 window.addEventListener("resize", resizeCanvas); resizeCanvas();

return canvas; }

内容来源: jagenjo/litegraph.js