JavaScript Canvas ポリゴン図形を線を繋げて作りたい

Question

現在、Canvas APIを使用して
Google Map上にポリゴン図形を書きたいのですが
方法が分からなくて困っています。

ぜひ、教えていただけるとありがたいです。

今後、ポリゴン図形以外も
Canvas APIを使用して制作していくので
Canvas APIを使用した解決策を頂けたらと思います。

宜しくお願いします。

該当のソースコード

    $('#' + this.shapeButtons.pori).click(function() { //ポリゴンの中身
        self.createLayer().done(function(newLayer) {
            self.layers.push(newLayer);

            //フラグ設定(下記のisMouseDownの表記の部分)
            var isMouseDown = false;

            //配列
            var Points = new Array();

            //クリック判定
            var clickCount = 0;

            if (clickCount = 1) {

                /*----------------------------------------------------------------------*/

                newLayer.canvas.addEventListener('mousedown', e => { //マウスダウン

                    isMouseDown = false;

                    self.map.setOptions({ draggable: false });
                    var rect = e.target.getBoundingClientRect();
                    x = e.clientX - rect.left;
                    y = e.clientY - rect.top;

                    console.log('mousedown x:' + x + '  y:' + y);

                }, { once: false });

                /*----------------------------------------------------------------------*/

                //マウスのカーソルを移動させているときの動作
                newLayer.canvas.addEventListener('mousemove', e => { //マウスムーブ
                    //フラグがtrueの時にmousemoveが動作する

                    if (isMouseDown) {
                        var rect = e.target.getBoundingClientRect()
                        var ux = e.clientX - rect.left;
                        var uy = e.clientY - rect.top;

                        console.log('mouseup x:' + x + ' y:' + y + ' ux:' + (ux - x) + '  uy:' + (uy - y));

                        newLayer.context.clearRect(x, y, newLayer.canvas.width, newLayer.canvas.height)

                        newLayer.context.beginPath();

                        newLayer.context.lineTo(ux, uy);

                        newLayer.context.strokeStyle = "red";

                        newLayer.context.lineWidth = 5;

                        newLayer.context.stroke();
                    }
                }, { once: false });

                /*----------------------------------------------------------------------*/

                //マウスを離した時の座標を取得
                newLayer.canvas.addEventListener('mouseup', e => { //マウスアップ

                    //フラグがfalseの時は動作しない
                    isMouseDown = false;


                    var rect = e.target.getBoundingClientRect();
                    var ux = e.clientX - rect.left;
                    var uy = e.clientY - rect.top;
                    console.log('mouseup x:' + x + ' y:' + y + ' ux:' + (ux - x) + '  uy:' + (uy - y));


                    newLayer.context.moveTo(x, y);

                    newLayer.context.lineTo(ux, uy);

                    newLayer.context.closePath();

                    newLayer.context.strokeStyle = "red";

                    newLayer.context.lineWidth = 5;

                    newLayer.context.stroke();


                    newLayer.context.fillStyle = "rgba(50,0,0,0.8)";

                    newLayer.context.fill();

                    self.map.setOptions({ draggable: true });
                    /**falseにすると同じレイヤーに何度も描画ができて
                     *once:trueだと一度しかレイヤーに描画出来なくなる
                     */
                }, { once: false });

                /*----------------------------------------------------------------------*/

                newLayer.canvas.addEventListener('mousedown', e => { //マウスダウン

                    isMouseDown = false;

                    self.map.setOptions({ draggable: false });
                    var rect = e.target.getBoundingClientRect();
                    x = e.clientX - rect.left;
                    y = e.clientY - rect.top;

                    console.log('mousedown x:' + x + '  y:' + y);

                    Points.add(x, y);

                }, { once: false });


            }

            newLayer.context.fillStyle = "rgba(50,0,0,0.8)";

            newLayer.context.fill();

        });

    });

試したこと

現在
直線,短形、円などの描画は出来ています。

Comments

[m.ts10806]

（大至急）
などと書くと回答者の多くはそっと画面を閉じます。誰がいつ見るとも答える保証もない質問サイトに投げるのは間違いですしね。
それにそのように書く人のほとんどは大して急いでいないことを分かっています。
煽り文句は逆効果です。
(本当に急ぎなら業者へGo)

[bwrs1]

指摘ありがとうございます

[BluOxy]

協力を仰ぐ立場に関わらず、大至急と記載するのは失礼ですね。不必要に協力者を遠ざけてしまうので、タイトルは修正しましょう。（と思ったら既に同じことが書かれていました）

[BluOxy]

Google Map APIの描画ツールではなく、Canvas APIについての質問でよろしいでしょうか。

また、「ポリゴン図形が書けず困っている」ではどのように困っているのかが分からず回答が難しいので、どのように困っているのかを記述頂けるとお答えできるかもしれません。
①CanvasAPIの使い方が分からない
②線の描画方法が分からない
③線の描画方法は分かるが、構文が分からない
④線をつなげて多角形を表現する方法が分からない
⑤多角形を表現する方法は分かるが、構文が分からない

[BluOxy]

> Google Map API のPolyline class などは使えません
使えない背景が記載されていると、別の提案も出来るかもしれません。

[bwrs1]

Canvas API についてです。

④の
線をつなげて多角形を表現する方法が分からない

で困っています。

Answer 1

canvas に図形を描く に Canvas API の基本的な使い方が記載されています。

パスを描く-三角形の描画 に単純な図形 (三角形) を描くコードが紹介されています。

これ等を参考にすると、canvas オブジェクトから描画コンテキストを取得(getContext)して、下記のメソッドを利用すれば、線を繋ぎ多角形を表現できます。

• beginPath 新しいパスを作成する
• moveTo (x, y) 座標へ作成済みのサブパスの始点を移動する
• lineTo 現在のサブパスの終点を指定した (x, y) 座標へ直線で接続する
• stroke 輪郭をなぞる方式で、図形を描く
• closePath 直線をパスに追加し、現在のサブパスの開始地点につなぐ

sample

const draw = () => {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75, 20);
    ctx.lineTo(30, 130);
    ctx.lineTo(160, 190);
    ctx.lineTo(270, 100);
    ctx.lineTo(220, 60);
    ctx.lineTo(100, 25);
    ctx.closePath();
    ctx.stroke();
  }
}

類似の質問

Canvas point to point user line

Comments

[bwrs1]

ご丁寧な回答ありがとうございます。

もう一つ質問があるのですが

lineTo() に数値を記入している状態ではなく
マウスのクリック操作なので
座標を取得してポリゴン図形を書く場合は
どのようにすれば宜しいでしょうか？

ご回答いただければ幸いです。

[BluOxy]

mousedown や mouseup, mousemoveは MouseEvent( https://developer.mozilla.org/ja/docs/Web/API/MouseEvent ) を実装しているので、イベントが発火したときのパラメータから座標(clientX,clientY)が取得できます。それをlineToの引数に渡してあげることでうまくいくと思います。

[BluOxy]

bwrs1 さんが掲示したコードでマウス座標を取得できていると思います。
> console.log('mousedown x:' + x + ' y:' + y);

[bwrs1]

ご指摘頂いたおかげで解決しました

ありがとうございました。