javascript - 创建带有可选点的设计文本区域或 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 是一个 10 像素 x 20 像素的透明圆的 png，带有一条从圆延伸的线，放置在盒子上方。