0
je joue avec la bibliothèque GoJS, en particulier, Floor Planner.Comment ajouter une image de fond à un planificateur d'étage?
Ceci est mon code légèrement modifié de Floor Planner. Je me demande comment mettre une image de fond dans la zone de dessin vide, afin que je puisse dessiner sur cette image?
Si j'utilise ce code:
<textarea id="defaultModel" style="visibility: hidden;">
<img src="https://www.w3schools.com/html/pic_mountain.jpg" style="width:128px;height:128px;"/>
</textarea>
alors l'image ne semble pas.
MISE À JOUR:
<!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>