지난번 이후
다음은 konva의 각종 도형을 사용하여 간단한 지도를 그린다

그룹 생성

그림과 도형을 조합하다
sample.js

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

생성된 요소를 그룹에 추가

트랙 그리기

line 객체를 사용하여 그리기
라인은 [x0, y0, x1, y1, x2, y2...]사용자 정의 모양새 정의
convas의 좌표는
왼쪽 위쪽 (0,0) 오른쪽 아래쪽 (200200) (예를 들어 canvas의 사이즈가 200px일 때)
그래서 왼쪽 위를 기점으로

x(정방향) → 오른쪽으로 라인 그리기(마이너스 시 반대)

y(정방향)→아래쪽에 선을 그어(음의 경우 반대)

도면 선 예
이번에는 각 라인의 점마다 클릭 이벤트 등을 주울 수 있도록 각 구간에 선을 그었다
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();     // 描画

결과

이런 느낌을 줄 수 있는 맵.
게다가 애니메이션, 각 요소에 클릭 이벤트 등을 더하면 간단하기 때문에 편리합니다!

주의사항

그룹에서add를 할 때add의 순서에 따라 묘사하기 때문에 순서가 중요하다(뒤에 추가된 것은 위에 있다)
레이어를 분리하여 설정zIndex하여 상향 요소를 변경할 수 있습니다