用鼠标画出div布局如何显示小图？

Question

页面分成两个部分，上面部分是用鼠标绘制矩形（已实现），当点击确定的时候，根据上面的图形下面出现成比例的布局图，具体效果如图（图略丑= =），请问要怎么实现？有没有大神帮帮我~感激不尽