如何将背景图片添加到平面图？
How to add a background image to a floor planner?
我正在玩 GoJS 库，特别是 Floor Planner。
这是我对Floor Planner稍作修改的代码。我想知道如何在空白绘图区放一张背景图，这样我就可以在这张图上画图了？
如果我使用这个代码：
<textarea id="defaultModel" style="visibility: hidden;">
<img src="https://www.w3schools.com/html/pic_mountain.jpg" style="width:128px;height:128px;"/>
</textarea>
然后图像不出现。
更新：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Floor Planner</title>
<script src="../../release/go.js"></script>
<script src="FloorPlanner-WallBuildingTool.js"></script>
<script src="FloorPlanner-WallReshapingTool.js"></script>
<script src="FloorPlanner-Templates-General.js"></script>
<script src="FloorPlanner-Templates-Furniture.js"></script>
<script src="FloorPlanner-Templates-Walls.js"></script>
<script src="Floorplan.js"></script>
<script src="FloorplanPalette.js"></script>
<script src="FloorplanFilesystem.js"></script>
<script src="FloorplanUI.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="FloorPlanner.css" />
</head>
<body id="body" onload="init()">
<div id="currentFile">(Unsaved File)</div>
<!-- File menus-->
<!-- The Nav Bar / Windows are specific to a certain floorplan and its classes -- unlike most of the Floorplanner code, which is generic -->
<nav>
<ul id="fileMenus">
<li>
<a href="#">File</a>
<ul>
<li><a href="#" onclick="filesystem.newFloorplan()">New <p class="shortcut">(Ctrl + D)</p></a></li>
<li><a href="#" onclick="filesystem.showOpenWindow()">Open... <p class="shortcut">(Ctrl + O)</p></a></li>
<li><a href="#" onclick="filesystem.saveFloorplan()">Save <p class="shortcut">(Ctrl + S)</p></a></li>
<li><a href="#" onclick="filesystem.saveFloorplanAs()">Save As...</a></li>
<li><a href="#" onclick="filesystem.showRemoveWindow()">Remove... <p class="shortcut">(Ctrl + R)</p></a></li>
</ul>
</li>
<li>
<a href="#">Edit</a>
<ul>
<li><a href="#" onclick="myFloorplan.commandHandler.undo()">Undo <p class="shortcut">(Ctrl + Z)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.redo()">Redo <p class="shortcut">(Ctrl + Y)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.copySelection()">Copy <p class="shortcut">(Ctrl + C)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.cutSelection()">Cut <p class="shortcut">(Ctrl + X)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.pasteSelection()">Paste <p class="shortcut">(Ctrl + V)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.deleteSelection()">Delete <p class="shortcut">(Del)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.selectAll()">Select All <p class="shortcut">(Ctrl + A)</p></a></li>
</ul>
</li>
<li>
<a href="#">View</a>
<ul>
<li><a href="#" onclick="ui.hideShow('diagramHelpDiv')" id="diagramHelpDivButton">Hide Diagram Help <p class="shortcut"> (Ctrl + H)</p></a></li>
<li><a href="#" onclick="ui.hideShow('selectionInfoWindow')" id="selectionInfoWindowButton">Show Selection Help <p class="shortcut"> (Ctrl + I)</p></a></li>
<li><a href="#" onclick="ui.hideShow('myPaletteWindow')" id="myPaletteWindowButton">Hide Palettes <p class="shortcut"> (Ctrl + P)</p></a></li>
<li><a href="#" onclick="ui.hideShow('myOverviewWindow')" id="myOverviewWindowButton">Show Overview <p class="shortcut"> (Ctrl + E)</p></a></li>
<li><a href="#" onclick="ui.hideShow('statisticsWindow')" id="statisticsWindowButton">Show Statistics <p class="shortcut"> (Ctrl + G)</p></a></li>
<li>
<a href="#" id="optionsWindowButton" onclick="ui.hideShow('optionsWindow')">Show Options <p class="shortcut"> (Ctrl + B)</p> </a>
</li>
<li>
<a href="#" class="scaleItems" onclick="ui.adjustScale('-')">-</a>
<a href="#" class="scaleItems" id="scaleDisplay">Scale: 100%</a>
<a href="#" class="scaleItems" onclick="ui.adjustScale('+')">+</a>
</li>
</ul>
</li>
<li><button class="setBehavior toolIcons" id="wallBuildingButton" title="Wall Building Tool (Ctrl + 1)" onclick="ui.setBehavior('wallBuilding')"> </button></li>
<li><button class="setBehavior toolIcons" id="draggingButton" title="Select/Move Tool (Ctrl + 2)" onclick="ui.setBehavior('dragging')"> </button></li>
<p id="wallWidthBox">
<label for="wallWidthInput" id="wallWidthInputLabel">Wall Width:</label>
<input id="wallWidthInput" class="unitsInput" placeholder="width" />
<input id="wallWidthUnitsInput" class="unitsBox" value="cm" disabled="disabled" />
</p>
</ul>
</nav>
<!-- Floorplan / Help bar -->
<div id="myFloorplanDiv"></div>
<div id="diagramHelpDiv" style="visibility: visible">
<div id="diagramHelpTextDiv">
<p>Drag a node to the Diagram or select the Wall Drawing Tool (Ctrl + 1) to begin</p>
</div>
</div>
<!-- Floating windows-->
<div id="myPaletteWindow" style="visibility: visible" class="draggable ui-draggable">
<div id="myPaletteWindowHandle" class="handle ui-draggable-handle">Palettes<button id="myPaletteClose" class="windowButtons clickable" onclick="ui.closeElement('myPaletteWindow')">X</button></div>
<div id="palettes">
<!-- jQuery accordion -->
<h3 class="paletteLabel">Furniture</h3>
<div>
<input id="furnitureSearchBar" placeholder="Search Furniture" oninput="ui.searchFurniture()" />
<div id="furniturePaletteDiv" class="paletteClass"></div>
</div>
<h3 class="paletteLabel">Wall Parts</h3>
<div id="wallPartsPaletteDiv" class="paletteClass"></div>
</div>
</div>
<div id="openDocument" style="visibility: hidden;" class="draggable ui-draggable">
<div id="openDocumentHandle" class="handle ui-draggable-handle">Open File<button id="openDocumentClose" class="windowButtons clickable" onclick="ui.closeElement('openDocument')">X</button></div>
<div id="openText" class="elementText">Choose file to open...</div>
<select id="filesToOpen" class="mySavedFiles"></select>
<br />
<button id="openBtn" class="elementBtn" type="button" onclick="filesystem.loadFloorplan()">Open</button>
</div>
<div id="removeDocument" style="visibility: hidden;" class="draggable ui-draggable">
<div id="removeDocumentHandle" class="handle">Delete File <button id="removeDocumentClose" class="windowButtons clickable" onclick="ui.closeElement('removeDocument')">X</button></div>
<div id="removeText" class="elementText">Choose file to remove...</div>
<select id="filesToRemove" class="mySavedFiles"></select>
<br />
<button id="removeBtn" class="elementBtn" type="button" onclick="filesystem.removeFloorplan()" style="margin-left:70px">Remove</button>
</div>
<div id="myOverviewWindow" style="visibility: hidden;" class="draggable ui-draggable">
<div id="myOverviewWindowHandle" class="handle ui-draggable-handle">Overview<button id="myOverviewClose" title="Close" class="windowButtons clickable" onclick="ui.closeElement('myOverviewWindow')">X</button></div>
<div id="myOverviewDiv" style="height:187px; width: 300px;"></div>
</div>
<div id="selectionInfoWindow" style="visibility: hidden" class="draggable ui-draggable">
<div id="selectionInfoWindowHandle" class="handle ui-draggable-handle">Selection Info <button id="selectionInfoClose" class="windowButtons clickable" onclick="ui.closeElement('selectionInfoWindow')">X</button></div>
<div id="selectionInfoTextDiv" class="grid-container">Nothing selected</div>
</div>
<div id="optionsWindow" style="visibility: hidden" class="draggable ui-draggable">
<div id="optionsWindowHandle" class="handle ui-draggable-handle">Options <button id="optionsWindowClose" class="windowButtons clickable" onclick="ui.closeElement('optionsWindow')">X</button></div>
Units
<div id="unitsRow" class="row data">
<form id="unitsForm" onchange="ui.changeUnits()">
<div class="col-4">
<input type="radio" name="units" id="centimeters" checked />cm
</div>
<div class="col-4">
<input type="radio" name="units" id="meters" /> m
</div>
<div class="col-4">
<input type="radio" name="units" id="inches" />in
</div>
<div class="col-4">
<input type="radio" name="units" id="feet" />ft
</div>
</form>
</div>
Grid
<div id="gridRow" class="row">
<div class="col-2">
<input id="gridSizeInput" placeholder="grid size" class="unitsInput" />
<input id="gridSizeUnitsInput" class="unitsBox" value="cm" disabled />
<button id="setGridButton" onclick="ui.changeGridSize()">Set Grid</button>
</div>
<div class="col-2">
<input type="checkbox" id="showGridCheckbox" onchange="ui.checkboxChanged('showGridCheckbox', myFloorplan)" checked />Show Grid
</div>
</div>
Preferences
<div id="miscRow" class="row data">
<div class="col-1">
<input type="checkbox" id="gridSnapCheckbox" onchange="ui.checkboxChanged('gridSnapCheckbox', myFloorplan)" checked />Grid Snap
</div>
<div class="col-1">
<input type="checkbox" id="wallGuidelinesCheckbox" onchange="ui.checkboxChanged('wallGuidelinesCheckbox', myFloorplan)" checked /> Show Wall Guidelines
</div>
<div class="col-1">
<input type="checkbox" id="wallLengthsCheckbox" onchange="ui.checkboxChanged('wallLengthsCheckbox', myFloorplan)" checked /> Show Wall Lengths
</div>
<div class="col-1">
<input type="checkbox" id="wallAnglesCheckbox" onchange="ui.checkboxChanged('wallAnglesCheckbox', myFloorplan)" checked /> Show Wall Angles
</div>
<div class="col-1">
<input type="checkbox" id="smallWallAnglesCheckbox" onchange="ui.checkboxChanged('smallWallAnglesCheckbox', myFloorplan)" unchecked /> Show Only Small Wall Angles
</div>
</div>
</div>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<script>
// enables draggable windows (jQuery), defining their handles and behavior (most recently dragged window stacks over other windows)
$(function () {
$("#palettes").accordion({
activate: function (event, ui) {
furniturePalette.requestUpdate();
wallPartsPalette.requestUpdate();
}
});
$("#openDocument").draggable({ handle: "#openDocumentHandle", stack: ".draggable", containment: 'window', scroll: false });
$('#optionsWindow').draggable({ handle: "#optionsWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#removeDocument").draggable({ handle: "#removeDocumentHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#myOverviewWindow").draggable({ handle: "#myOverviewWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$('#statisticsWindow').draggable({ handle: "#statisticsWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#selectionInfoWindow").draggable({ handle: "#selectionInfoWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#myPaletteWindow").draggable({ handle: "#myPaletteWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#myPaletteWindow").resize(function () {
furniturePalette.requestUpdate();
wallPartsPalette.requestUpdate();
});
});
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.TopLeft,
isReadOnly: true, // allow selection but not moving or copying or deleting
scaleComputation: function(d, newsc) {
// only allow scales that are a multiple of 0.1
var oldsc = Math.round(d.scale * 10);
var sc = oldsc + ((newsc * 10 > oldsc) ? 1 : -1);
if (sc < 1) sc = 1; // but disallow zero or negative!
return sc / 10;
},
"toolManager.hoverDelay": 100 // how quickly tooltips are shown
});
myDiagram.add(
$(go.Part, // this Part is not bound to any model data
{ layerName: "Background", position: new go.Point(0, 0),
selectable: false, pickable: false },
$(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
));
// Floorplan
myFloorplan = new Floorplan("myFloorplanDiv");
// Filesystem state object
var FilesystemUIState = {
openWindowId: "openDocument",
removeWindowId: "removeDocument",
currentFileId: "currentFile",
filesToRemoveListId: "filesToRemove",
filesToOpenListId: "filesToOpen"
};
filesystem = new FloorplanFilesystem(myFloorplan, FilesystemUIState);
myFloorplan.floorplanFilesystem = filesystem;
// UI Interaction state object
var GUIState = {
menuButtons: {
selectionInfoWindowButtonId: "selectionInfoWindowButton",
palettesWindowButtonId: "myPaletteWindowButton",
overviewWindowButtonId: "myOverviewWindowButton",
optionsWindowButtonId: "optionsWindowButton",
statisticsWindowButtonId: "statisticsWindowButton"
},
windows: {
diagramHelpDiv: {
id: "diagramHelpDiv"
},
selectionInfoWindow: {
id: "selectionInfoWindow",
textDivId: "selectionInfoTextDiv",
handleId: "selectionInfoWindowHandle",
colorPickerId: "colorPicker",
heightLabelId: "heightLabel",
heightInputId: "heightInput",
widthInputId: "widthInput",
nodeGroupInfoId: "nodeGroupInfo",
nameInputId: "nameInput",
notesTextareaId: "notesTextarea"
},
palettesWindow:{
id: "myPaletteWindow",
furnitureSearchInputId: "furnitureSearchBar",
furniturePaletteId: "furniturePaletteDiv"
},
overviewWindow: {
id: "myOverviewWindow"
},
optionsWindow: {
id: "optionsWindow",
gridSizeInputId: "gridSizeInput",
unitsFormId: "unitsForm",
unitsFormName: "units",
checkboxes: {
showGridCheckboxId: "showGridCheckbox",
gridSnapCheckboxId: "gridSnapCheckbox",
wallGuidelinesCheckboxId: "wallGuidelinesCheckbox",
wallLengthsCheckboxId: "wallLengthsCheckbox",
wallAnglesCheckboxId: "wallAnglesCheckbox",
smallWallAnglesCheckboxId: "smallWallAnglesCheckbox"
},
},
statisticsWindow: {
id: "statisticsWindow",
textDivId: "statisticsWindowTextDiv",
numsTableId: "numsTable",
totalsTableId: "totalsTable"
}
},
scaleDisplayId: "scaleDisplay",
setBehaviorClass: "setBehavior",
wallWidthInputId: "wallWidthInput",
wallWidthBoxId: "wallWidthBox",
unitsBoxClass: "unitsBox",
unitsInputClass: "unitsInput"
};
ui = new FloorplanUI(myFloorplan, "ui", "myFloorplan", GUIState);
myFloorplan.floorplanUI = ui;
// Overview
myOverview = $(go.Overview, "myOverviewDiv", { observed: myFloorplan, maxScale: 0.5 });
// Palettes
var FURNITURE_NODE_DATA_ARRAY = [
{
category: "MultiPurposeNode",
key: "MultiPurposeNode",
caption: "Multi Purpose Node",
color: "#ffffff",
stroke: '#000000',
name: "Writable Node",
type: "Writable Node",
shape: "Rectangle",
text: "Write here",
width: 60,
height: 60,
notes: ""
},
{
key: "roundTable",
color: "#ffffff",
stroke: '#000000',
caption: "Round Table",
type: "Round Table",
shape: "Ellipse",
width: 61,
height: 61,
notes: ""
},
{
key: "armChair",
color: "#ffffff",
stroke: '#000000',
caption: "Arm Chair",
type: "Arm Chair",
geo: "F1 M0 0 L40 0 40 40 0 40 0 0 M10 30 L10 10 M0 0 Q8 0 10 10 M0 40 Q20 15 40 40 M30 10 Q32 0 40 0 M30 10 L30 30",
width: 45,
height: 45,
notes: ""
},
{
key: "sofaMedium",
color: "#ffffff",
stroke: "#000000",
caption: "Sofa",
type: "Sofa",
geo: "F1 M0 0 L80 0 80 40 0 40 0 0 M10 35 L10 10 M0 0 Q8 0 10 10 M0 40 Q40 15 80 40 M70 10 Q72 0 80 0 M70 10 L70 35",
height: 45,
width: 90,
notes: ""
},
{
key: "sink",
color: "#ffffff",
stroke: '#000000',
caption: "Sink",
type: "Sink",
geo: "F1 M0 0 L40 0 40 40 0 40 0 0z M5 7.5 L18.5 7.5 M 21.5 7.5 L35 7.5 35 35 5 35 5 7.5 M 15 21.25 A 5 5 180 1 0 15 21.24 M23 3.75 A 3 3 180 1 1 23 3.74 M21.5 6.25 L 21.5 12.5 18.5 12.5 18.5 6.25 M15 3.75 A 1 1 180 1 1 15 3.74 M 10 4.25 L 10 3.25 13 3.25 M 13 4.25 L 10 4.25 M27 3.75 A 1 1 180 1 1 27 3.74 M 26.85 3.25 L 30 3.25 30 4.25 M 26.85 4.25 L 30 4.25",
width: 27,
height: 27,
notes: ""
},
{
key: "doubleSink",
color: "#ffffff",
stroke: '#000000',
caption: "Double Sink",
type: "Double Sink",
geo: "F1 M0 0 L75 0 75 40 0 40 0 0 M5 7.5 L35 7.5 35 35 5 35 5 7.5 M44 7.5 L70 7.5 70 35 40 35 40 9 M15 21.25 A5 5 180 1 0 15 21.24 M50 21.25 A 5 5 180 1 0 50 21.24 M40.5 3.75 A3 3 180 1 1 40.5 3.74 M40.5 3.75 L50.5 13.75 47.5 16.5 37.5 6.75 M32.5 3.75 A 1 1 180 1 1 32.5 3.74 M 27.5 4.25 L 27.5 3.25 30.5 3.25 M 30.5 4.25 L 27.5 4.25 M44.5 3.75 A 1 1 180 1 1 44.5 3.74 M 44.35 3.25 L 47.5 3.25 47.5 4.25 M 44.35 4.25 L 47.5 4.25",
height: 27,
width: 52,
notes: ""
},
{
key: "toilet",
color: "#ffffff",
stroke: '#000000',
caption: "Toilet",
type: "Toilet",
geo: "F1 M0 0 L25 0 25 10 0 10 0 0 M20 10 L20 15 5 15 5 10 20 10 M5 15 Q0 15 0 25 Q0 40 12.5 40 Q25 40 25 25 Q25 15 20 15",
width: 25,
height: 35,
notes: ""
},
{
key: "shower",
color: "#ffffff",
stroke: '#000000',
caption: "Shower/Tub",
type: "Shower/Tub",
geo: "F1 M0 0 L40 0 40 60 0 60 0 0 M35 15 L35 55 5 55 5 15 Q5 5 20 5 Q35 5 35 15 M22.5 20 A2.5 2.5 180 1 1 22.5 19.99",
width: 45,
height: 75,
notes: ""
},
{
key: "bed",
color: "#ffffff",
stroke: '#000000',
caption: "Bed",
type: "Bed",
geo: "F1 M0 0 L40 0 40 60 0 60 0 0 M 7.5 2.5 L32.5 2.5 32.5 17.5 7.5 17.5 7.5 2.5 M0 20 L40 20 M0 25 L40 25",
width: 76.2,
height: 101.6,
notes: ""
},
{
key: "staircase",
color: "#ffffff",
stroke: '#000000',
caption: "Staircase",
type: "Staircase",
geo: "F1 M0 0 L 0 100 250 100 250 0 0 0 M25 100 L 25 0 M 50 100 L 50 0 M 75 100 L 75 0 M 100 100 L 100 0 M 125 100 L 125 0 M 150 100 L 150 0 M 175 100 L 175 0 M 200 100 L 200 0 M 225 100 L 225 0",
width: 125,
height: 50,
notes: ""
},
{
key: "stove",
color: "#ffffff",
stroke: '#000000',
caption: "Stove",
type: "Stove",
geo: "F1 M 0 0 L 0 100 100 100 100 0 0 0 M 30 15 A 15 15 180 1 0 30.01 15 M 70 15 A 15 15 180 1 0 70.01 15"
+ "M 30 55 A 15 15 180 1 0 30.01 55 M 70 55 A 15 15 180 1 0 70.01 55",
width: 75,
height: 75,
notes: ""
},
{
key: "diningTable",
color: "#ffffff",
stroke: '#000000',
caption: "Dining Table",
type: "Dining Table",
geo: "F1 M 0 0 L 0 100 200 100 200 0 0 0 M 25 0 L 25 -10 75 -10 75 0 M 125 0 L 125 -10 175 -10 175 0 M 200 25 L 210 25 210 75 200 75 M 125 100 L 125 110 L 175 110 L 175 100 M 25 100 L 25 110 75 110 75 100 M 0 75 -10 75 -10 25 0 25",
width: 125,
height: 62.5,
notes: ""
}
];
var WALLPARTS_NODE_DATA_ARRAY = [
{
category: "PaletteWallNode",
key: "wall",
caption: "Wall",
type: "Wall",
color: "#000000",
shape: "Rectangle",
height: 10,
width: 60,
notes: "",
},
{
category: "WindowNode",
key: "window",
color: "white",
caption: "Window",
type: "Window",
shape: "Rectangle",
height: 10,
width: 60,
notes: ""
},
{
key: "door",
category: "DoorNode",
color: "rgba(0, 0, 0, 0)",
caption: "Door",
type: "Door",
width: 40,
doorOpeningHeight: 5,
swing: "left",
notes: ""
}
];
furniturePalette = new FloorplanPalette("furniturePaletteDiv", myFloorplan, FURNITURE_NODE_DATA_ARRAY);
wallPartsPalette = new FloorplanPalette("wallPartsPaletteDiv", myFloorplan, WALLPARTS_NODE_DATA_ARRAY);
ui.setBehavior("dragging");
// enable hotkeys
var body = document.getElementById('body');
body.addEventListener("keydown", function (e) {
var keynum = e.which;
if (e.ctrlKey) {
e.preventDefault();
switch (keynum) {
case 83: filesystem.saveFloorplan(); break; // ctrl + s
case 79: filesystem.showOpenWindow(); break; // ctrl + o
case 68: e.preventDefault(); filesystem.newFloorplan(); break; // ctrl + d
case 82: filesystem.showRemoveWindow(); break; // ctrl + r
case 49: ui.setBehavior('wallBuilding', myFloorplan); break; // ctrl + 1
case 50: ui.setBehavior('dragging', myFloorplan); break; // ctrl + 2
case 72: ui.hideShow('diagramHelpDiv'); break; // ctrl + h
case 73: ui.hideShow('selectionInfoWindow'); break; // ctrl + i
case 80: ui.hideShow('myPaletteWindow'); break; // ctrl + p
case 69: ui.hideShow('myOverviewWindow'); break; // ctrl + e
case 66: ui.hideShow('optionsWindow'); break; // ctrl + b
case 71: ui.hideShow('statisticsWindow'); break; // ctrl + g
}
}
});
//var model = document.getElementById("defaultModel").value;
//myFloorplan.floorplanFilesystem.loadFloorplanFromModel(model);
}
</script>
</body>
</html>
我建议您按照 Kitten Monitor 样本的做法进行操作，http://gojs.net/latest/samples/kittenMonitor.html。这是相关代码：
// the background image, a floor plan
myDiagram.add(
$(go.Part, // this Part is not bound to any model data
{ layerName: "Background", position: new go.Point(0, 0),
selectable: false, pickable: false },
$(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
));
我正在玩 GoJS 库，特别是 Floor Planner。
这是我对Floor Planner稍作修改的代码。我想知道如何在空白绘图区放一张背景图，这样我就可以在这张图上画图了？
如果我使用这个代码：
<textarea id="defaultModel" style="visibility: hidden;">
<img src="https://www.w3schools.com/html/pic_mountain.jpg" style="width:128px;height:128px;"/>
</textarea>
然后图像不出现。
更新：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Floor Planner</title>
<script src="../../release/go.js"></script>
<script src="FloorPlanner-WallBuildingTool.js"></script>
<script src="FloorPlanner-WallReshapingTool.js"></script>
<script src="FloorPlanner-Templates-General.js"></script>
<script src="FloorPlanner-Templates-Furniture.js"></script>
<script src="FloorPlanner-Templates-Walls.js"></script>
<script src="Floorplan.js"></script>
<script src="FloorplanPalette.js"></script>
<script src="FloorplanFilesystem.js"></script>
<script src="FloorplanUI.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="FloorPlanner.css" />
</head>
<body id="body" onload="init()">
<div id="currentFile">(Unsaved File)</div>
<!-- File menus-->
<!-- The Nav Bar / Windows are specific to a certain floorplan and its classes -- unlike most of the Floorplanner code, which is generic -->
<nav>
<ul id="fileMenus">
<li>
<a href="#">File</a>
<ul>
<li><a href="#" onclick="filesystem.newFloorplan()">New <p class="shortcut">(Ctrl + D)</p></a></li>
<li><a href="#" onclick="filesystem.showOpenWindow()">Open... <p class="shortcut">(Ctrl + O)</p></a></li>
<li><a href="#" onclick="filesystem.saveFloorplan()">Save <p class="shortcut">(Ctrl + S)</p></a></li>
<li><a href="#" onclick="filesystem.saveFloorplanAs()">Save As...</a></li>
<li><a href="#" onclick="filesystem.showRemoveWindow()">Remove... <p class="shortcut">(Ctrl + R)</p></a></li>
</ul>
</li>
<li>
<a href="#">Edit</a>
<ul>
<li><a href="#" onclick="myFloorplan.commandHandler.undo()">Undo <p class="shortcut">(Ctrl + Z)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.redo()">Redo <p class="shortcut">(Ctrl + Y)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.copySelection()">Copy <p class="shortcut">(Ctrl + C)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.cutSelection()">Cut <p class="shortcut">(Ctrl + X)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.pasteSelection()">Paste <p class="shortcut">(Ctrl + V)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.deleteSelection()">Delete <p class="shortcut">(Del)</p></a></li>
<li><a href="#" onclick="myFloorplan.commandHandler.selectAll()">Select All <p class="shortcut">(Ctrl + A)</p></a></li>
</ul>
</li>
<li>
<a href="#">View</a>
<ul>
<li><a href="#" onclick="ui.hideShow('diagramHelpDiv')" id="diagramHelpDivButton">Hide Diagram Help <p class="shortcut"> (Ctrl + H)</p></a></li>
<li><a href="#" onclick="ui.hideShow('selectionInfoWindow')" id="selectionInfoWindowButton">Show Selection Help <p class="shortcut"> (Ctrl + I)</p></a></li>
<li><a href="#" onclick="ui.hideShow('myPaletteWindow')" id="myPaletteWindowButton">Hide Palettes <p class="shortcut"> (Ctrl + P)</p></a></li>
<li><a href="#" onclick="ui.hideShow('myOverviewWindow')" id="myOverviewWindowButton">Show Overview <p class="shortcut"> (Ctrl + E)</p></a></li>
<li><a href="#" onclick="ui.hideShow('statisticsWindow')" id="statisticsWindowButton">Show Statistics <p class="shortcut"> (Ctrl + G)</p></a></li>
<li>
<a href="#" id="optionsWindowButton" onclick="ui.hideShow('optionsWindow')">Show Options <p class="shortcut"> (Ctrl + B)</p> </a>
</li>
<li>
<a href="#" class="scaleItems" onclick="ui.adjustScale('-')">-</a>
<a href="#" class="scaleItems" id="scaleDisplay">Scale: 100%</a>
<a href="#" class="scaleItems" onclick="ui.adjustScale('+')">+</a>
</li>
</ul>
</li>
<li><button class="setBehavior toolIcons" id="wallBuildingButton" title="Wall Building Tool (Ctrl + 1)" onclick="ui.setBehavior('wallBuilding')"> </button></li>
<li><button class="setBehavior toolIcons" id="draggingButton" title="Select/Move Tool (Ctrl + 2)" onclick="ui.setBehavior('dragging')"> </button></li>
<p id="wallWidthBox">
<label for="wallWidthInput" id="wallWidthInputLabel">Wall Width:</label>
<input id="wallWidthInput" class="unitsInput" placeholder="width" />
<input id="wallWidthUnitsInput" class="unitsBox" value="cm" disabled="disabled" />
</p>
</ul>
</nav>
<!-- Floorplan / Help bar -->
<div id="myFloorplanDiv"></div>
<div id="diagramHelpDiv" style="visibility: visible">
<div id="diagramHelpTextDiv">
<p>Drag a node to the Diagram or select the Wall Drawing Tool (Ctrl + 1) to begin</p>
</div>
</div>
<!-- Floating windows-->
<div id="myPaletteWindow" style="visibility: visible" class="draggable ui-draggable">
<div id="myPaletteWindowHandle" class="handle ui-draggable-handle">Palettes<button id="myPaletteClose" class="windowButtons clickable" onclick="ui.closeElement('myPaletteWindow')">X</button></div>
<div id="palettes">
<!-- jQuery accordion -->
<h3 class="paletteLabel">Furniture</h3>
<div>
<input id="furnitureSearchBar" placeholder="Search Furniture" oninput="ui.searchFurniture()" />
<div id="furniturePaletteDiv" class="paletteClass"></div>
</div>
<h3 class="paletteLabel">Wall Parts</h3>
<div id="wallPartsPaletteDiv" class="paletteClass"></div>
</div>
</div>
<div id="openDocument" style="visibility: hidden;" class="draggable ui-draggable">
<div id="openDocumentHandle" class="handle ui-draggable-handle">Open File<button id="openDocumentClose" class="windowButtons clickable" onclick="ui.closeElement('openDocument')">X</button></div>
<div id="openText" class="elementText">Choose file to open...</div>
<select id="filesToOpen" class="mySavedFiles"></select>
<br />
<button id="openBtn" class="elementBtn" type="button" onclick="filesystem.loadFloorplan()">Open</button>
</div>
<div id="removeDocument" style="visibility: hidden;" class="draggable ui-draggable">
<div id="removeDocumentHandle" class="handle">Delete File <button id="removeDocumentClose" class="windowButtons clickable" onclick="ui.closeElement('removeDocument')">X</button></div>
<div id="removeText" class="elementText">Choose file to remove...</div>
<select id="filesToRemove" class="mySavedFiles"></select>
<br />
<button id="removeBtn" class="elementBtn" type="button" onclick="filesystem.removeFloorplan()" style="margin-left:70px">Remove</button>
</div>
<div id="myOverviewWindow" style="visibility: hidden;" class="draggable ui-draggable">
<div id="myOverviewWindowHandle" class="handle ui-draggable-handle">Overview<button id="myOverviewClose" title="Close" class="windowButtons clickable" onclick="ui.closeElement('myOverviewWindow')">X</button></div>
<div id="myOverviewDiv" style="height:187px; width: 300px;"></div>
</div>
<div id="selectionInfoWindow" style="visibility: hidden" class="draggable ui-draggable">
<div id="selectionInfoWindowHandle" class="handle ui-draggable-handle">Selection Info <button id="selectionInfoClose" class="windowButtons clickable" onclick="ui.closeElement('selectionInfoWindow')">X</button></div>
<div id="selectionInfoTextDiv" class="grid-container">Nothing selected</div>
</div>
<div id="optionsWindow" style="visibility: hidden" class="draggable ui-draggable">
<div id="optionsWindowHandle" class="handle ui-draggable-handle">Options <button id="optionsWindowClose" class="windowButtons clickable" onclick="ui.closeElement('optionsWindow')">X</button></div>
Units
<div id="unitsRow" class="row data">
<form id="unitsForm" onchange="ui.changeUnits()">
<div class="col-4">
<input type="radio" name="units" id="centimeters" checked />cm
</div>
<div class="col-4">
<input type="radio" name="units" id="meters" /> m
</div>
<div class="col-4">
<input type="radio" name="units" id="inches" />in
</div>
<div class="col-4">
<input type="radio" name="units" id="feet" />ft
</div>
</form>
</div>
Grid
<div id="gridRow" class="row">
<div class="col-2">
<input id="gridSizeInput" placeholder="grid size" class="unitsInput" />
<input id="gridSizeUnitsInput" class="unitsBox" value="cm" disabled />
<button id="setGridButton" onclick="ui.changeGridSize()">Set Grid</button>
</div>
<div class="col-2">
<input type="checkbox" id="showGridCheckbox" onchange="ui.checkboxChanged('showGridCheckbox', myFloorplan)" checked />Show Grid
</div>
</div>
Preferences
<div id="miscRow" class="row data">
<div class="col-1">
<input type="checkbox" id="gridSnapCheckbox" onchange="ui.checkboxChanged('gridSnapCheckbox', myFloorplan)" checked />Grid Snap
</div>
<div class="col-1">
<input type="checkbox" id="wallGuidelinesCheckbox" onchange="ui.checkboxChanged('wallGuidelinesCheckbox', myFloorplan)" checked /> Show Wall Guidelines
</div>
<div class="col-1">
<input type="checkbox" id="wallLengthsCheckbox" onchange="ui.checkboxChanged('wallLengthsCheckbox', myFloorplan)" checked /> Show Wall Lengths
</div>
<div class="col-1">
<input type="checkbox" id="wallAnglesCheckbox" onchange="ui.checkboxChanged('wallAnglesCheckbox', myFloorplan)" checked /> Show Wall Angles
</div>
<div class="col-1">
<input type="checkbox" id="smallWallAnglesCheckbox" onchange="ui.checkboxChanged('smallWallAnglesCheckbox', myFloorplan)" unchecked /> Show Only Small Wall Angles
</div>
</div>
</div>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<script>
// enables draggable windows (jQuery), defining their handles and behavior (most recently dragged window stacks over other windows)
$(function () {
$("#palettes").accordion({
activate: function (event, ui) {
furniturePalette.requestUpdate();
wallPartsPalette.requestUpdate();
}
});
$("#openDocument").draggable({ handle: "#openDocumentHandle", stack: ".draggable", containment: 'window', scroll: false });
$('#optionsWindow').draggable({ handle: "#optionsWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#removeDocument").draggable({ handle: "#removeDocumentHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#myOverviewWindow").draggable({ handle: "#myOverviewWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$('#statisticsWindow').draggable({ handle: "#statisticsWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#selectionInfoWindow").draggable({ handle: "#selectionInfoWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#myPaletteWindow").draggable({ handle: "#myPaletteWindowHandle", stack: ".draggable", containment: 'window', scroll: false });
$("#myPaletteWindow").resize(function () {
furniturePalette.requestUpdate();
wallPartsPalette.requestUpdate();
});
});
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.TopLeft,
isReadOnly: true, // allow selection but not moving or copying or deleting
scaleComputation: function(d, newsc) {
// only allow scales that are a multiple of 0.1
var oldsc = Math.round(d.scale * 10);
var sc = oldsc + ((newsc * 10 > oldsc) ? 1 : -1);
if (sc < 1) sc = 1; // but disallow zero or negative!
return sc / 10;
},
"toolManager.hoverDelay": 100 // how quickly tooltips are shown
});
myDiagram.add(
$(go.Part, // this Part is not bound to any model data
{ layerName: "Background", position: new go.Point(0, 0),
selectable: false, pickable: false },
$(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
));
// Floorplan
myFloorplan = new Floorplan("myFloorplanDiv");
// Filesystem state object
var FilesystemUIState = {
openWindowId: "openDocument",
removeWindowId: "removeDocument",
currentFileId: "currentFile",
filesToRemoveListId: "filesToRemove",
filesToOpenListId: "filesToOpen"
};
filesystem = new FloorplanFilesystem(myFloorplan, FilesystemUIState);
myFloorplan.floorplanFilesystem = filesystem;
// UI Interaction state object
var GUIState = {
menuButtons: {
selectionInfoWindowButtonId: "selectionInfoWindowButton",
palettesWindowButtonId: "myPaletteWindowButton",
overviewWindowButtonId: "myOverviewWindowButton",
optionsWindowButtonId: "optionsWindowButton",
statisticsWindowButtonId: "statisticsWindowButton"
},
windows: {
diagramHelpDiv: {
id: "diagramHelpDiv"
},
selectionInfoWindow: {
id: "selectionInfoWindow",
textDivId: "selectionInfoTextDiv",
handleId: "selectionInfoWindowHandle",
colorPickerId: "colorPicker",
heightLabelId: "heightLabel",
heightInputId: "heightInput",
widthInputId: "widthInput",
nodeGroupInfoId: "nodeGroupInfo",
nameInputId: "nameInput",
notesTextareaId: "notesTextarea"
},
palettesWindow:{
id: "myPaletteWindow",
furnitureSearchInputId: "furnitureSearchBar",
furniturePaletteId: "furniturePaletteDiv"
},
overviewWindow: {
id: "myOverviewWindow"
},
optionsWindow: {
id: "optionsWindow",
gridSizeInputId: "gridSizeInput",
unitsFormId: "unitsForm",
unitsFormName: "units",
checkboxes: {
showGridCheckboxId: "showGridCheckbox",
gridSnapCheckboxId: "gridSnapCheckbox",
wallGuidelinesCheckboxId: "wallGuidelinesCheckbox",
wallLengthsCheckboxId: "wallLengthsCheckbox",
wallAnglesCheckboxId: "wallAnglesCheckbox",
smallWallAnglesCheckboxId: "smallWallAnglesCheckbox"
},
},
statisticsWindow: {
id: "statisticsWindow",
textDivId: "statisticsWindowTextDiv",
numsTableId: "numsTable",
totalsTableId: "totalsTable"
}
},
scaleDisplayId: "scaleDisplay",
setBehaviorClass: "setBehavior",
wallWidthInputId: "wallWidthInput",
wallWidthBoxId: "wallWidthBox",
unitsBoxClass: "unitsBox",
unitsInputClass: "unitsInput"
};
ui = new FloorplanUI(myFloorplan, "ui", "myFloorplan", GUIState);
myFloorplan.floorplanUI = ui;
// Overview
myOverview = $(go.Overview, "myOverviewDiv", { observed: myFloorplan, maxScale: 0.5 });
// Palettes
var FURNITURE_NODE_DATA_ARRAY = [
{
category: "MultiPurposeNode",
key: "MultiPurposeNode",
caption: "Multi Purpose Node",
color: "#ffffff",
stroke: '#000000',
name: "Writable Node",
type: "Writable Node",
shape: "Rectangle",
text: "Write here",
width: 60,
height: 60,
notes: ""
},
{
key: "roundTable",
color: "#ffffff",
stroke: '#000000',
caption: "Round Table",
type: "Round Table",
shape: "Ellipse",
width: 61,
height: 61,
notes: ""
},
{
key: "armChair",
color: "#ffffff",
stroke: '#000000',
caption: "Arm Chair",
type: "Arm Chair",
geo: "F1 M0 0 L40 0 40 40 0 40 0 0 M10 30 L10 10 M0 0 Q8 0 10 10 M0 40 Q20 15 40 40 M30 10 Q32 0 40 0 M30 10 L30 30",
width: 45,
height: 45,
notes: ""
},
{
key: "sofaMedium",
color: "#ffffff",
stroke: "#000000",
caption: "Sofa",
type: "Sofa",
geo: "F1 M0 0 L80 0 80 40 0 40 0 0 M10 35 L10 10 M0 0 Q8 0 10 10 M0 40 Q40 15 80 40 M70 10 Q72 0 80 0 M70 10 L70 35",
height: 45,
width: 90,
notes: ""
},
{
key: "sink",
color: "#ffffff",
stroke: '#000000',
caption: "Sink",
type: "Sink",
geo: "F1 M0 0 L40 0 40 40 0 40 0 0z M5 7.5 L18.5 7.5 M 21.5 7.5 L35 7.5 35 35 5 35 5 7.5 M 15 21.25 A 5 5 180 1 0 15 21.24 M23 3.75 A 3 3 180 1 1 23 3.74 M21.5 6.25 L 21.5 12.5 18.5 12.5 18.5 6.25 M15 3.75 A 1 1 180 1 1 15 3.74 M 10 4.25 L 10 3.25 13 3.25 M 13 4.25 L 10 4.25 M27 3.75 A 1 1 180 1 1 27 3.74 M 26.85 3.25 L 30 3.25 30 4.25 M 26.85 4.25 L 30 4.25",
width: 27,
height: 27,
notes: ""
},
{
key: "doubleSink",
color: "#ffffff",
stroke: '#000000',
caption: "Double Sink",
type: "Double Sink",
geo: "F1 M0 0 L75 0 75 40 0 40 0 0 M5 7.5 L35 7.5 35 35 5 35 5 7.5 M44 7.5 L70 7.5 70 35 40 35 40 9 M15 21.25 A5 5 180 1 0 15 21.24 M50 21.25 A 5 5 180 1 0 50 21.24 M40.5 3.75 A3 3 180 1 1 40.5 3.74 M40.5 3.75 L50.5 13.75 47.5 16.5 37.5 6.75 M32.5 3.75 A 1 1 180 1 1 32.5 3.74 M 27.5 4.25 L 27.5 3.25 30.5 3.25 M 30.5 4.25 L 27.5 4.25 M44.5 3.75 A 1 1 180 1 1 44.5 3.74 M 44.35 3.25 L 47.5 3.25 47.5 4.25 M 44.35 4.25 L 47.5 4.25",
height: 27,
width: 52,
notes: ""
},
{
key: "toilet",
color: "#ffffff",
stroke: '#000000',
caption: "Toilet",
type: "Toilet",
geo: "F1 M0 0 L25 0 25 10 0 10 0 0 M20 10 L20 15 5 15 5 10 20 10 M5 15 Q0 15 0 25 Q0 40 12.5 40 Q25 40 25 25 Q25 15 20 15",
width: 25,
height: 35,
notes: ""
},
{
key: "shower",
color: "#ffffff",
stroke: '#000000',
caption: "Shower/Tub",
type: "Shower/Tub",
geo: "F1 M0 0 L40 0 40 60 0 60 0 0 M35 15 L35 55 5 55 5 15 Q5 5 20 5 Q35 5 35 15 M22.5 20 A2.5 2.5 180 1 1 22.5 19.99",
width: 45,
height: 75,
notes: ""
},
{
key: "bed",
color: "#ffffff",
stroke: '#000000',
caption: "Bed",
type: "Bed",
geo: "F1 M0 0 L40 0 40 60 0 60 0 0 M 7.5 2.5 L32.5 2.5 32.5 17.5 7.5 17.5 7.5 2.5 M0 20 L40 20 M0 25 L40 25",
width: 76.2,
height: 101.6,
notes: ""
},
{
key: "staircase",
color: "#ffffff",
stroke: '#000000',
caption: "Staircase",
type: "Staircase",
geo: "F1 M0 0 L 0 100 250 100 250 0 0 0 M25 100 L 25 0 M 50 100 L 50 0 M 75 100 L 75 0 M 100 100 L 100 0 M 125 100 L 125 0 M 150 100 L 150 0 M 175 100 L 175 0 M 200 100 L 200 0 M 225 100 L 225 0",
width: 125,
height: 50,
notes: ""
},
{
key: "stove",
color: "#ffffff",
stroke: '#000000',
caption: "Stove",
type: "Stove",
geo: "F1 M 0 0 L 0 100 100 100 100 0 0 0 M 30 15 A 15 15 180 1 0 30.01 15 M 70 15 A 15 15 180 1 0 70.01 15"
+ "M 30 55 A 15 15 180 1 0 30.01 55 M 70 55 A 15 15 180 1 0 70.01 55",
width: 75,
height: 75,
notes: ""
},
{
key: "diningTable",
color: "#ffffff",
stroke: '#000000',
caption: "Dining Table",
type: "Dining Table",
geo: "F1 M 0 0 L 0 100 200 100 200 0 0 0 M 25 0 L 25 -10 75 -10 75 0 M 125 0 L 125 -10 175 -10 175 0 M 200 25 L 210 25 210 75 200 75 M 125 100 L 125 110 L 175 110 L 175 100 M 25 100 L 25 110 75 110 75 100 M 0 75 -10 75 -10 25 0 25",
width: 125,
height: 62.5,
notes: ""
}
];
var WALLPARTS_NODE_DATA_ARRAY = [
{
category: "PaletteWallNode",
key: "wall",
caption: "Wall",
type: "Wall",
color: "#000000",
shape: "Rectangle",
height: 10,
width: 60,
notes: "",
},
{
category: "WindowNode",
key: "window",
color: "white",
caption: "Window",
type: "Window",
shape: "Rectangle",
height: 10,
width: 60,
notes: ""
},
{
key: "door",
category: "DoorNode",
color: "rgba(0, 0, 0, 0)",
caption: "Door",
type: "Door",
width: 40,
doorOpeningHeight: 5,
swing: "left",
notes: ""
}
];
furniturePalette = new FloorplanPalette("furniturePaletteDiv", myFloorplan, FURNITURE_NODE_DATA_ARRAY);
wallPartsPalette = new FloorplanPalette("wallPartsPaletteDiv", myFloorplan, WALLPARTS_NODE_DATA_ARRAY);
ui.setBehavior("dragging");
// enable hotkeys
var body = document.getElementById('body');
body.addEventListener("keydown", function (e) {
var keynum = e.which;
if (e.ctrlKey) {
e.preventDefault();
switch (keynum) {
case 83: filesystem.saveFloorplan(); break; // ctrl + s
case 79: filesystem.showOpenWindow(); break; // ctrl + o
case 68: e.preventDefault(); filesystem.newFloorplan(); break; // ctrl + d
case 82: filesystem.showRemoveWindow(); break; // ctrl + r
case 49: ui.setBehavior('wallBuilding', myFloorplan); break; // ctrl + 1
case 50: ui.setBehavior('dragging', myFloorplan); break; // ctrl + 2
case 72: ui.hideShow('diagramHelpDiv'); break; // ctrl + h
case 73: ui.hideShow('selectionInfoWindow'); break; // ctrl + i
case 80: ui.hideShow('myPaletteWindow'); break; // ctrl + p
case 69: ui.hideShow('myOverviewWindow'); break; // ctrl + e
case 66: ui.hideShow('optionsWindow'); break; // ctrl + b
case 71: ui.hideShow('statisticsWindow'); break; // ctrl + g
}
}
});
//var model = document.getElementById("defaultModel").value;
//myFloorplan.floorplanFilesystem.loadFloorplanFromModel(model);
}
</script>
</body>
</html>
我建议您按照 Kitten Monitor 样本的做法进行操作，http://gojs.net/latest/samples/kittenMonitor.html。这是相关代码：
// the background image, a floor plan
myDiagram.add(
$(go.Part, // this Part is not bound to any model data
{ layerName: "Background", position: new go.Point(0, 0),
selectable: false, pickable: false },
$(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
));