markerPen

JavaScript

Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

markerPenはWebページにマーカーで描ける機能を実装することができるシンプルなjQueryプラグインです。マウスをドラッグすることで、それに連動して自由にマーカーで描けます。とてもスムーズに操作できるのがいいですね。

オプションでカラーや不透明度なども設定できる

デモ

Webページ内でマウスをドラッグすると、それに合わせてマーカーが引かれていきます。画面の下には、Hide Markings、Disable markerPen、Clear、Marker、Eraserというメニューが用意されています。

ここから、マーカーの有効/無効を切り替えたりクリアにしたりといった機能を行えます。複雑な機能などは特にないので、シンプルでとても操作しやすいですね。

また、オプションにはcolor、stroke、opacityといった項目が用意されています。好きなカラーを設定したり、ストロークや不透明度を調節したりと、ちょっとしたカスタマイズが可能です。

使いどころは限られるかもしれませんが、Web上で手軽にマーカー機能を実装したいという人は、ぜひ活用してみてはいかがでしょうか?

markerPen

formToWizardステップごとに入力可能なフォームを実装できる「formToWizard」前のページ

シンプルなコンテキストメニューを実装できる「justContext.js」次のページjustContext.js

関連記事

  1. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  2. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  3. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  4. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  5. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

  6. jQuery Seat Charts

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020

アーカイブ

PAGE TOP