我怎么能动态地存储平面图？ [英] how can i store floor plan dynamically?
问题描述
我有一个大学项目创建平面图设计软件..为此，我试图创建平面布局与HTML画布和网格的帮助。我想保存交互式平面图创建到数据库，但不能够当平面图保存在数据库中，它被转换为图像文件..我想知道如何保存交互式地图在数据库中创建地图后，还获取它做修改。
I have a college project to create floor plan designing software.. For that I am trying to create floorplan with help of HTML Canvas and grids. I want to save the interactive floor plan created into database but not able to as when floor plan is saved in database, it is converted to image file.. I want to know how to save an interactive map in database after creation of map and also fetch it to do alteration.
简单画布地图的代码如下：
The code of simple canvas map is as follows..
<!doctype>
<html>
<head>
</head>
<body style=" background: lightblue;">
<canvas id="canvas" width="500px" height="500px"style="background: #fff; magrin:20px;">
Browser does not support canvas </canvas>
<img id="canvasImg" alt="Right click to save me!">
<script type="text/javascript" language="javascript">
var bw = 400;
var bh = 400;
var p = 10;
var cw = bw + (p*2) + 1;
var ch = bh + (p*2) + 1;
var grid = 50;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawBoard(){
context.beginPath();
for (var x = 0; x <= bw; x += grid){
context.moveTo(0.5 + x + p, p);
context.lineTo(0.5 + x + p, bh + p);
}
for (var x = 0; x <= bh; x += grid) {
context.moveTo(p, 0.5 + x + p);
context.lineTo(bw + p, 0.5 + x + p);
}
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
}
drawBoard();
function drawRect() {
context.beginPath();
context.rect(0.5+p+5*grid, 0.5+p+3*grid, 2*grid, 3*grid);
context.rect(0.0+p+0*grid, 0.0+p+0*grid, 0*grid, 0*grid);
context.rect(0.5+p+3*grid, 0.5+p+3*grid, 2*grid, 3*grid);
context.rect(0.5+p+0*grid, 0.5+p+0*grid, 2*grid, 3*grid);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();
}
drawRect();
////new
var el = document.getElementById('canvas');
var ctx = el.getContext('2d');
var isDrawing;
el.onmousedown = function(e) {
isDrawing = true;
ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
};
el.onmouseup = function() {
isDrawing = false;
};
}
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
</script>
</body>
</html>
这里是输出::
这是静态计划，
我想动态创建并将完整的计划存储在我的数据库（MySQL）上吗？给定足够的答案。
And i want to create dynamically and store the complete plan on my database(MySQL) it is possible? give sufficient answer.
推荐答案
经典的方法称为 MVC-Pattern （ModelViewController-Pattern ）在那里你分离绘画逻辑从模型，保持描述应该被绘的数据。
它还从绘画逻辑中分离控制逻辑。
The classic approach todo this is called MVC-Pattern (ModelViewController-Pattern) where you seperate the painting-logic from the model which keeps the data that describes what should be painted. It also seperates the controlling-logic from the painting-logic.
尝试找到一种面向对象的方式来描述你的布局图，忽略如何计划被绘。你可以这样做 - 例如 - 创建一个地板对象和一个房间对象。 Floor-Object将包含Room-Objects。
每个Room-Object都知道它在地板上的位置以及它是如何形成的或它有什么大小。
Try to find an object-oriented way to describe your floorplan by ignoring how the plan will be painted. You could do that by -for instance- creating a Floor-Object and a Room-Object. A Floor-Object would contain Room-Objects. Each Room-Object would know where it is on the Floor and how it is formed or what size it has.
这个模型可以很容易地保存在DB。
That model can easy be saved in a DB.
然后，您将以一种逻辑知道如何在画布上绘制模型的方式编写绘画逻辑。
You would then write the painting-logic in a way that the logic knows how to paint the model on the canvas.
有关MVC的更多信息，请参阅此处： http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
For more Informations on MVC see here: http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
这篇关于我怎么能动态地存储平面图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
