-2

刷新页面后，我想保留绘制boxes和路径。

我正在使用mxgraph https://jgraph.github.io/mxgraph/docs/manual.html

问题： 一旦绘图完成，如果我进行页面刷新，它应该通过将绘图数据存储到 localStorage来保留相同的绘图。

注意：我想得到json objectdraw ，并在页面刷新canvas时重新构建它。object

下面的视频展示了如何绘制： https ://drive.google.com/file/d/1McTMz3e8I_quOcLGt2CtaQhqif3R31qs/view

https://jgraph.github.io/mxgraph/javascript/examples/editors/images/
<!--
  Copyright (c) 2006-2013, JGraph Ltd
  
  Dynamic toolbar example for mxGraph. This example demonstrates changing the
  state of the toolbar at runtime.
-->
<html>
<head>
	<title>Toolbar example for mxGraph</title>

	<!-- Sets the basepath for the library if not in same directory -->
  <script type="text/javascript">
    mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
  </script>

  <!-- Loads and initializes the library -->
  <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

	<!-- Example code -->
	<script type="text/javascript">
		// Program starts here. Creates a sample graph in the
		// DOM node with the specified ID. This function is invoked
		// from the onLoad event handler of the document (see below).
		function main()
		{
			// Checks if browser is supported
			if (!mxClient.isBrowserSupported())
			{
				// Displays an error message if the browser is
				// not supported.
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// Defines an icon for creating new connections in the connection handler.
				// This will automatically disable the highlighting of the source vertex.
				mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);

				// Creates the div for the toolbar
				var tbContainer = document.createElement('div');
				tbContainer.style.position = 'absolute';
				tbContainer.style.overflow = 'hidden';
				tbContainer.style.padding = '2px';
				tbContainer.style.left = '0px';
				tbContainer.style.top = '0px';
				tbContainer.style.width = '24px';
				tbContainer.style.bottom = '0px';
				
				document.body.appendChild(tbContainer);
			
				// Creates new toolbar without event processing
				var toolbar = new mxToolbar(tbContainer);
				toolbar.enabled = false
				
				// Creates the div for the graph
				var container = document.createElement('div');
				container.style.position = 'absolute';
				container.style.overflow = 'hidden';
				container.style.left = '24px';
				container.style.top = '0px';
				container.style.right = '0px';
				container.style.bottom = '0px';
				container.style.background = 'url("editors/images/grid.gif")';

				document.body.appendChild(container);
				
				// Workaround for Internet Explorer ignoring certain styles
				if (mxClient.IS_QUIRKS)
				{
					document.body.style.overflow = 'hidden';
					new mxDivResizer(tbContainer);
					new mxDivResizer(container);
				}
	
				// Creates the model and the graph inside the container
				// using the fastest rendering available on the browser
				var model = new mxGraphModel();
				var graph = new mxGraph(container, model);

				// Enables new connections in the graph
				graph.setConnectable(true);
				graph.setMultigraph(false);

				// Stops editing on enter or escape keypress
				var keyHandler = new mxKeyHandler(graph);
				var rubberband = new mxRubberband(graph);
				
				var addVertex = function(icon, w, h, style)
				{
					var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
					vertex.setVertex(true);
				
					var img = addToolbarItem(graph, toolbar, vertex, icon);
					img.enabled = true;
					
					graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
					{
						var tmp = graph.isSelectionEmpty();
						mxUtils.setOpacity(img, (tmp) ? 100 : 20);
						img.enabled = tmp;
					});
				};
				
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rectangle.gif', 100, 40, '');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rounded.gif', 100, 40, 'shape=rounded');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/triangle.gif', 40, 40, 'shape=triangle');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/actor.gif', 30, 40, 'shape=actor');
			}
		}

		function addToolbarItem(graph, toolbar, prototype, image)
		{
			// Function that is executed when the image is dropped on
			// the graph. The cell argument points to the cell under
			// the mousepointer if there is one.
			var funct = function(graph, evt, cell, x, y)
			{
				graph.stopEditing(false);

				var vertex = graph.getModel().cloneCell(prototype);
				vertex.geometry.x = x;
				vertex.geometry.y = y;
					
				graph.addCell(vertex);
				graph.setSelectionCell(vertex);
			}
			
			// Creates the image which is used as the drag icon (preview)
			var img = toolbar.addMode(null, image, function(evt, cell)
			{
				var pt = this.graph.getPointForEvent(evt);
				funct(graph, evt, cell, pt.x, pt.y);
			});
			
			// Disables dragging if element is disabled. This is a workaround
			// for wrong event order in IE. Following is a dummy listener that
			// is invoked as the last listener in IE.
			mxEvent.addListener(img, 'mousedown', function(evt)
			{
				// do nothing
			});
			
			// This listener is always called first before any other listener
			// in all browsers.
			mxEvent.addListener(img, 'mousedown', function(evt)
			{
				if (img.enabled == false)
				{
					mxEvent.consume(evt);
				}
			});
						
			mxUtils.makeDraggable(img, graph, funct);
			
			return img;
		}

	</script>
</head>

<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();" >
</body>
</html>

4

1 回答 1

4

这使用了 mxgraph 的 XML 编码。您可以在mxGraph的示例之一中看到此代码。虽然不是json，但是很容易转成json，可以随意编辑或保存。现在它按照您的要求存储在 localStorage 中。

在 main 函数的末尾添加以下行（在最后一次调用 addVertex 之后）：

// read state on load 
if(window.localStorage.graphState){
    var doc = mxUtils.parseXml(window.localStorage.graphState);
    var dec = new mxCodec(doc);
    dec.decode(doc.documentElement, graph.getModel());
}

// save state on change
graph.getModel().addListener('change',function(){
    var codec = new mxCodec();
    window.localStorage.graphState = codec.encode(
            graph.getModel()
        ).outerHTML;
});

使用 JSON 更新

更新 2：切换到我自己的自定义 html2json 和 json2html 实现以使答案完全独立

如果确实需要适当的 JSON 对象，则可以从 xml 转换为 json 并返回。您可以在下面看到我对 json 对象进行字符串化和解析，但这仅需要将其保存在 localStorage 中。

首先添加这两个函数来实现从html/xml到json和从json到html/xml的转换：

function html2json(html){
    if(html.nodeType==3){
        return {
            "tagName":"#text",
            "content":html.textContent
        }
    }
    var element = {
        "tagName":html.tagName
    };

    if(html.getAttributeNames().length>0){
        element.attributes = html.getAttributeNames().reduce(
            function(acc,at){acc[at]=html.getAttribute(at); return acc;},
            {}
        );
    }

    if(html.childNodes.length>0){
        element.children = Array.from(html.childNodes)
            .filter(
                function(el){
                    return el.nodeType!=3
                    ||el.textContent.trim().length>0
                })
            .map(function(el){return html2json(el);});
    }
    return element;
}

function json2html(json){
    var xmlDoc = document.implementation.createDocument(null, json.tagName);

    var addAttributes = function(jsonNode, node){
        if(jsonNode.attributes){
            Object.keys(jsonNode.attributes).map(
                function(name){
                    node.setAttribute(name,jsonNode.attributes[name]);
                }
            );
        }
    }

    var addChildren = function(jsonNode,node){
        if(jsonNode.children){
            jsonNode.children.map(
                function(jsonChildNode){
                    json2htmlNode(jsonChildNode,node);
                }
            );
        }
    }

    var json2htmlNode = function(jsonNode,parent){
        if(jsonNode.tagName=="#text"){
            return xmlDoc.createTextNode(jsonNode.content);
        }

        var node = xmlDoc.createElement(jsonNode.tagName);

        addAttributes(jsonNode,node);
        addChildren(jsonNode,node);

        parent.appendChild(node);
    }

    addAttributes(json,xmlDoc.firstElementChild);
    addChildren(json,xmlDoc.firstElementChild);

    return xmlDoc;
}

然后像这样从上面更改我的 JavaScript 片段，将 xml 转换为 json 并返回：

// read state on load 
if(window.localStorage.graphState){ 
    var doc = json2html(JSON.parse(localStorage.graphState));   
  var dec = new mxCodec(doc);
  dec.decode(doc.documentElement, graph.getModel());
}

// save state on change
graph.getModel().addListener('change',function(){
        var codec = new mxCodec();      
    window.localStorage.graphState = JSON.stringify(html2json(codec.encode(
      graph.getModel()
    )));
});
于 2019-04-27T15:01:17.870 回答