javascript - 選択可能なドットで設計されたテキストエリアまたは div を作成する

Question

textarea または div をこのようにするにはどうすればよいですか?

円はカーソルで検出できます (クリック、移動など)。

テキストエリアのサイズを変更し、Pickmonkey のようにフォント サイズを大きくできる jquery プラグインはありますか?

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 は、側面に配置される 2 本の垂直線の 10px x 0px の透明な png です。
• topcirclewithline.png は 10px x 20px の透明な png の円で、そこから線が伸びており、ボックスの上に配置されます。