Question

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

我想我会使用HTML5的Canvas并为客户端编写基本绘图工具的代码（我无法看到任何图书馆专门为此提供帮助）但{ {3}}很有帮助。

我将通过jquery将数据传回php（可能使用一些localstorage来加速）。

我的问题：我应该存储＆＃39;说明＆＃39;为了重新绘制平面图作为画布绘图说明，或者我最好采用大网格的想法，网格的每个单元被分配不同的角色（走廊，展台，消防出口）？

或者我的整个方法是错的？

Answer 1

IMO -

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

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);

如果您的对象很简单（即不嵌入方法/函数），您可以将它们序列化并将它们作为JSON发送到服务器并返回而不更改它们（或者例如使用LocalStorage作为会话之间的临时存储）。使用矢量可以将图形缩放到任意大小，以及稍后将数据导出/导入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

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

2 个答案: