jcrop - 怎样用javascript在一张图片里面绘制并且随时修改多个矩形的大小和位置？

Question

刚学javascript。我想用javascript做一个给一张图片里面的每一个物体添加矩形框标注的app。所以想在一张图片里面绘制多个矩形（每个矩形对应javascript里面的一个对象）。我希望能有一个按钮，用来创建新的矩形。然后，用一个下拉列表记录并显示当前已有的矩形。同时，在需要的时候，我可以随时选择一个矩形，对这个矩形做修改大小（通过鼠标拉伸矩形的边框实现）、移动位置以及删除当前矩形的操作。

请问各位，如上功能我可以怎么实现？我找到了一个画矩形（可以实现修改大小和移动位置）的库，叫做Jcrop。但是我不知道如何用这个Jcrop去在同一张图片里面添加多个矩形对象。

先感谢了！

Answer 1

说实话没太看懂你到底想做什么（难不成是照片圈人？）。 但是 jcrop是做图片裁剪的时候用的吧？ 一张图片上面应该是有且仅有一个矩形框。

可否考虑这样实现，图片做为层背景。 写一个按钮，每点击一次就往#container里面append一个

，然后append方法里面记录一下新增的p的index、位置等等，然后给p.child做拉伸、拖拽之类的效果。