vuejs의 도표 샘플로 레이더를 읽는 좌표 계산

vue.js의 공식 샘플 레이더의 구조를 살펴보자.
sample
Edit fiddle - JSFiddle
이것은 각 정점의 좌표를svg 다각형 polygon 을 그릴 요소에 건네주어 그린 것입니다.정점은 정다각형이 아니라 각 상태값에 따라 변동한다.중요한 것은 정점 좌표를 얻는 방법이다.이 문장에서 이곳을 해설하다.

전제 지식

함수valueToPoint (value, index, total)를 이해하기 위해서는 다음과 같은 두 가지 지식을 미리 습득하세요.이 함수는 A~F 상태 값의 좌표를 얻을 수 있는 함수입니다.

Aray#map이란?

맵 함수부터 파악해.이것은 호출 함수를 매개 변수에 전달하는 Aray 객체의 방법입니다.이 리셋 함수는 하나의 그룹 요소를 받아들인다.그리고 호출의 반환 값은 새 그룹의 요소입니다.호출 함수는 원소의 수량만 호출합니다.MDN의 예 알기 쉬우니까 붙여주세요.

// 配列内の単語 (文字列) を複数形にする
function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');  
  if( single === 'kangaroo'){
    result += 'se';
  }
  return result; 
}

var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));

// 変換前 : ["foot", "goose", "moose", "kangaroo"]
// 変換後 : ["feet", "geese", "meese", "kangareese"]

// 数値の配列を平方根の配列にマッピングする
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots   の内容は [1, 2, 3] となる
// numbers の内容は [1, 4, 9] のまま

삼각함수

이것은 도표를 각종 입력 값에 대응하는 관건이다.이것은 다음 블로그를 이해하기 쉽다.
'삼각함수 강좌'를 주제로 한 블로그 글 일람 직물 장인 모집시나닷컴 블로그
이걸 읽고 Qita의 총결산을 보는 게 좋을 것 같아요.이번에는 필요 없어. 어차피 잘라.회전 이동의 일차 변환.
게임을 만들기 위해 삼각 함수를 배우다

svg 요소와 원의 중심 좌표 편차

변수x, y는 원의 중심에서 온 좌표다.x = 0, y = 0면 엔화의 중심이다.이렇게 6시의 x, y의 좌표를 연결하면 상태를 나타내는 다각형이 완성되죠.그러나svg 요소를 그릴 것입니다.svg의 좌표는 계산이 다릅니다.x = 0, y = 0면 맨 왼쪽 위쪽입니다.이 두 좌표는 시작 위치가 다르므로 원 중심의 좌표에서 왼쪽 위 중심의 좌표로 변환해야 합니다.
참고로 변수y의 계산 방법에 대해 0.8은 좌표로value = 1를 표시하면 얼마입니까?value 1개가 증가할 때마다 y 좌표는 0.8 증가합니다.이 반경은 80엔,value는 100인 경우 y 좌표가 그렇게 100으로 결정되면 반경을 초과한다.따라서 눈금마다의value값을 80(반경)/100(value의 최대값)으로 계산합니다.참고로,value값을 마이너스로 설정하는 것은 y 좌표의 증가 방향이svg 요소와 같도록 하기 위해서입니다.

좌표의 회전 이동

이제 좌표 변환을 시작합니다.위의 그림을 보십시오.SVG 요소는 상하좌우가 뒤바뀐다.보라색 점은 원의 중심이 (0,0)일 때의 좌표입니다.이번 x값은 항상 0이어서 변동이 없다.변동하는 건 y뿐이야.이 y는 상태값,value의 양을 나타낸다.먼저 A의 지점에서value의 양을 표시하여 특정한 항목으로 회전시킨다.x * cos - y * sin와 x * sin + y * cos는 회전 후 좌표를 계산하는 공식이다.자세한 내용은 아래의 설명 1을 보십시오.
회전 이동의 일차 변환
그리고 회전된 좌표는 원의 중심(0,0)인 경우입니다.svg의 오른쪽 하단이 (0,0)의 기준에 부합하도록 100을 추가합니다.이 100svg 요소는 200*200의 정사각형 중심의 좌표(1000100)를 나타낸다.이미 x, y의 증가 방향은 2개의 기준과 일치한 다음에 중심 좌표의 편차(100100)를 더하여 좌표의 변환을 진행한다.
출력 값을 자세히 보려면 다음과 같이 고쳐 쓰십시오.

function valueToPoint (value, index, total) {
  var x     = 0
  var y     = -value * 0.8
  var angle = Math.PI * 2 / total * index
  var cos   = Math.cos(angle)
  var sin   = Math.sin(angle)
  var tx    = x * cos - y * sin + 100
  var ty    = x * sin + y * cos + 100
  console.log("value="+value+", index="+index+", total="+total);
  console.log("x="+x+", y="+y);
  console.log("angle="+angle+", cos="+cos+", sin="+sin);
  console.log("x * cos = "+(x * cos)+ " y * sin ="+(y*sin));
  console.log("tx="+tx+", ty="+ty);
  console.log("---");
  return {
    x: tx,
    y: ty
  }
}