如何将背景图片添加到平面规划师?

时间:2017-05-27 11:49:04

标签: javascript gojs

我正在使用GoJS库,特别是Floor Planner

这是我稍加修改的Floor Planner代码。我想知道如何在空白绘图区域放置背景图像,以便我可以在此图像上绘制?

enter image description here

如果我使用此代码:

<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')">&nbsp;</button></li>
            <li><button class="setBehavior toolIcons" id="draggingButton" title="Select/Move Tool (Ctrl + 2)" onclick="ui.setBehavior('dragging')">&nbsp;</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>

1 个答案:

答案 0 :(得分:1)

我建议您执行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")
    ));