为什么图像无法显示
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