HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5 Canvasでドラッグ＆ドロップを実装！Raphael.jsライブラリの使い方

HTML5 Canvasの課題とRaphael.jsの利点

HTML5の<canvas>要素を使えば、図形・テキスト・曲線などを自由に描画できます。しかし、canvasは基本的に1枚のビットマップとして扱われるため、描画した個々の図形に対してonClickのような従来のDOMイベントや、ドラッグ＆ドロップ機能を直接紐付けることはできません。

こうした課題を解決してくれるのが、JavaScriptベクターグラフィックライブラリのRaphael.jsです。RaphaelはSVGを用いて図形を描画するため、各要素を独立したオブジェクトとして操作でき、ドラッグ＆ドロップやタッチイベントといったインタラクションを簡単に実装できます。さらに、旧バージョンのInternet Explorerでは自動的にVML（Vector Markup Language）へフォールバックされるため、クロスブラウザ対応にも優れています。

実装例：ドラッグ＆ドロップできるカラフルな円

以下のコードは、画面いっぱいに4つの半透明の円を描画し、それぞれをマウスや指でドラッグできるようにしたデモです。円をつかむと一時的に拡大し、離すと元のサイズへ滑らかに戻ります。

<!DOCTYPE html>
<html lang = "ja">
    <head>
        <meta charset = "utf-8">
        <title>Raphaël · Drag-n-drop</title>
        <link rel = "stylesheet" href = "demo.css" type = "text/css" media = "screen">
        <meta name = "apple-mobile-web-app-capable" content = "yes">
        <link rel = "apple-touch-icon-precomposed" href = "/Raphael.png">
        <link rel = "stylesheet" href = "demo-print.css" type = "text/css" media = "print">
        <script src = "raphael.js"></script>
        <script>
            window.onload = function () {
                var R = Raphael(0, 0, "100%", "100%"),
                r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}),
                g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}),
                b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "none", opacity: .5}),
                p = R.circle(430, 100, 50).attr({fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5});
            var start = function () {
                this.ox = this.attr("cx");
                this.oy = this.attr("cy");
                this.animate({r: 70, opacity: .25}, 500, ">");
            },
            move = function (dx, dy) {
                this.attr({cx: this.ox + dx, cy: this.oy + dy});
            },
            up = function () {
                this.animate({r: 50, opacity: .5}, 500, ">");
            };
            R.set(r, g, b, p).drag(move, start, up);
        };
    </script>
    </head>
    <body>
        <div id = "holder"></div>
        <p id = "copy">Demo of <a href = "https://raphaeljs.com/">Raphaël</a>— JavaScript Vector Library</p>
    </body>
</html>

コードのポイント

  • Raphael(0, 0, "100%", "100%")：画面全体を覆う描画領域（キャンバス）を作成します。
  • R.circle(x, y, 半径)：指定した位置に円を生成し、attr()でHSB形式の色と透明度を設定しています。
  • start関数：ドラッグ開始時に元の座標（ox, oy）を記録し、半径70・透明度0.25へアニメーションさせます。
  • move関数：ドラッグ中の移動量（dx, dy）をもとに、円の中心座標（cx, cy）をリアルタイムに更新します。
  • up関数：ドラッグ終了時に半径50・透明度0.5へ戻すアニメーションを実行します。
  • R.set(r, g, b, p).drag(move, start, up)：複数の要素をひとつのセットにまとめ、一括でドラッグハンドラを登録しています。

このようにRaphael.jsを活用すれば、素のcanvasでは難しい「図形ごとのイベント処理」や「滑らかなアニメーション」を少ないコード量で実現できます。SVGベースで描画されるため拡大しても画質が劣化せず、レスポンシブなUIやタッチデバイス対応のインターフェース構築にも適しています。

  1. HTML5のCanvasにSVGファイルを描画する方法

    Canvas（キャンバス）にSVGを描画するには、SVGを画像として扱う必要があります。まず、HTMLコンテンツを含めるための<foreignObject>要素を使ってSVGデータを構築し、その後、生成したSVG画像をCanvas上に描画します。 具体的な流れは以下の通りです。 処理の手順 SVG文字列を作成する：<svg>要素の中に<foreignObject>要素を配置し、その中にXHTML名前空間（xmlns=https://www.w3.org/1999/xhtml）を指定したHTMLを記述します。 Blobオブジェクトに変換する：作成したSVG文

  2. GoJS（HTML5 Canvasライブラリ）を使ってダイアグラムやグラフを描画する方法

    GoJSは、インタラクティブなダイアグラムを実装するためのJavaScriptライブラリです。オープンソースとして提供されており、Webアプリケーションに図やグラフを追加したい場合に活用できます。このページでは、GoJSを使い始めるための基本ポイントを解説します。GoJSはモデル・ビュー（Model-View）アーキテクチャを採用しています。モデルには、ノードやリンクを記述するJavaScriptオブジェクトの配列が格納され、これらのデータを実際のNodeオブジェクトやLinkオブジェクトとして可視化する役割を、Diagram（ダイアグラム）がビューとして担います。GoJSでDiagramを構