使用可选择的点创建设计的textarea或div

Question

如何让textarea或div看起来像这样？

可以通过光标检测圆圈（用于点击，移动等）。

是否有任何jquery插件允许我调整textarea的大小并增加像Pickmonkey一样的字体大小？

Answer 1

您可以使用HTML构造轻松地绘制此内容，如下所示：

    <div id="mytextbox" style="position: absolute; width: 200px; height: 30px; border: solid 1px #fff">
        <div style="top: -20px; left: 50%;cursor: move;" class="move"  onmousedown="beginResize('top',event)">&nbsp;</div>
        <div style="position: absolute; top: -5px; left: -5px;cursor: nw-resize;" class="corner" onmousedown="beginResize('topleft',event)">&nbsp;</div>
        <div style="top: -5px; right: -5px;cursor: ne-resize;" class="corner"  onmousedown="beginResize('topright',event)">&nbsp;</div>
        <div style="bottom: -5px; left: -5px;cursor: sw-resize;" class="corner"  onmousedown="beginResize('bottomleft',event)">&nbsp;</div>
        <div style="bottom: -5px; right: -5px;cursor: se-resize;" class="corner"  onmousedown="beginResize('bottomright',event)">&nbsp;</div>
        <div style="top: 50%; left: -5px;cursor: w-resize;" class="side"  onmousedown="beginResize('left',event)">&nbsp;</div>
        <div style="top: 50%; right: -5px;cursor: e-resize;" class="side"  onmousedown="beginResize('right',event)">&nbsp;</div>
        <textarea style="border: 0px; background: transparent; width: 200px; height: 30px; padding: 0px;">Some Text</textarea>
    </div>

并在样式表中包含这些CSS类：

.corner{
position: absolute;
background: url('cornercircle.png') top left no-repeat;
width: 10px;
height: 10px;
}
.side{
position: absolute;
background: url('sidelines.png') top left no-repeat;
width: 10px;
height: 10px;
margin-top: -5px;
}
.move{
position: absolute;
background: url('topcirclewithline.png') top left no-repeat;
width: 10px;
height: 20px;
margin-left: -5px;
}

使角落和侧面实际调整文本框的大小是一个稍大的任务，所以我会留给你...

更新：图片如下：

• cornercircle.png是一个10px x 10px的圆形透明PNG，放在角落里
• sidelines.png是两条垂直线的10px x 0px透明png，放在两侧
• topcirclewithline.png是一个10px x 20px的圆形透明png，有一条从它延伸的线，放在盒子上方。