（绘制和）存储平面图的最佳方法？

Question

我有一个即将进行的项目，需要将展览的基本平面图存储在数据库中。

我想我会使用 HTML5 的 Canvas 并为客户端的基本绘图工具编写代码（我看不到任何库专门提供帮助）但 this thread 很有帮助。

我将通过 jquery 将数据传回 php（可能使用一些本地存储来加快速度）。

我的问题：我是否应该将 'instructions' 用于重新创建平面布置图存储为 canvas 绘图说明，或者我最好采用大网格的想法，网格的每个单元格都是分配不同的角色（走廊、展台、安全出口）？

还是我整个方法都错了？

Answer 1

海事组织-

存储形状定义，而不是说明。根据您的需要定义形状，也许您需要圆形、矩形、多边形等。将它们定义为对象。为每个形状准备一个工具。为对象添加属性，例如颜色、线条粗细等

function Rectangle(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

（文字也可以）。

将形状存储在数组中。如果要支持图层，请为此使用子数组（或二维数组）。

var r1 = new Rectangle(x, y, w, h);
var r2 = new Rectangle(x, y, w, h);
var shapes = [r1, r2]; // shapes.push(r1, r2);

如果您的对象很简单（即不嵌入 methods/functions），您可以将它们序列化并将它们作为 JSON 发送到服务器并返回而不更改它们（或者例如使用 LocalStorage 作为临时会话之间的存储）。使用矢量可以让您将绘图缩放到任意大小，以及稍后将数据 export/import 导入 CAD 软件。

// to server
var json = JSON.stringify(shapes);

// from server
shapes = JSON.parse(dataFromServer);
redrawShapes();  // something to render the shapes

Answer 2

您也可以做一些类似于我们为 TelerikNEXT 会议所做的事情 - https://www.nativescript.org/blog/add-floor-plans-in-your-nativescript-application-with-officernd-api

（绘制和）存储平面图的最佳方法？

Best approach for (drawing and) storing a floorplan?

html

canvas