konva.js で地図を描く (2)

前回の続き
次はkonvaのいろんな図形を使って、簡易的な地図を描いていきます

グループの生成

画像や図形たちをグループ化します

sample.js

var group = new Konva.Group({
    x: 10,
    y: 10
});

作った要素をこのグループに追加していく

軌跡の描画

line のオブジェクトを使って描画
lineは[x0, y0, x1, y1, x2, y2 .....] という座標を指定して、そのポイントを結ぶ線を描きます

convasの座標は
左上が(0,0)右下が(200, 200) (例:canvasのサイズが200pxの時)
なので、左上を始点にして

• x(正の方向)→ 右側にlineが描かれる (負の時は逆)
• y(正の方向)→ 下側にlineが描かれる (負の時は逆)

lineを描く例
今回は各lineのポイントごとにクリックイベントなど拾えるように、各区間ごとに線を描いていきます

sample.js

// [x,y]の座標が詰まった配列
var table = [[3,10],[5,20],[10,50],[30,60],[50,80],[80,100],[100,100],[110,120],[120,150],[150,170]];

for (let i = 1; i < table.length; i++) {
    var prevX = table[i-1][0];
    var prevY = table[i-1][1];
    var currentX = table[i][0];
    var currentY = table[i][1];
    console.log(i, px, py, cx, cy);

    var line = new Konva.Line({
        points: [prevX, prevY, currentX, currentY],
        stroke: '#696969',
        strokeWidth: 3,
        lineCap: 'round',
        lineJoin: 'round',
        id: `line_${i}`  //lineごとにidをふれる
    })
    line.on('mouseup', (e) => {
        console.log(e.currentTarget.attrs.id); //クリックした時にid取得できる
    });
        group.add(line);
    }

スタート地点とゴール地点を用意

今回はスタート地点を○、ゴール地点を☆で生成

sample.js

let start = new Konva.Circle({
    x: table[0][0], //配置場所
    y: table[0][1], //配置場所
    radius: 10,
    fill: 'red',
    stroke: 'black'
});
group.add(start) //作った要素はgroupに追加


let goal = new Konva.Star({
    x: table[table.length-1][0], //配置場所
    y: table[table.length-1][1], //配置場所
    numPoints: 5,
    innerRadius: 7,
    outerRadius: 15,
    fill: 'yellow',
    stroke: 'black'
});
group.add(goal) //作った要素はgroupに追加

最後描画する

sample.js

  layer.add(group); // 最後groupをlayerにaddする
  stage.add(layer); // layerをstageにaddする
  layer.draw();     // 描画

結果

こんな感じのmapができる
さらにアニメーションをつけたり、各要素にクリックイベントつけたりなど、簡単にできるので便利でした！

注意点

groupにaddする時は、addする順番で描画されるため、順番が重要(後から追加されたものが上にくる)
layerを分けて、zIndexを設定することで上にくる要素を変更できる