SVG에서 플레이하기 위해 Vue.js 사용

이 문서는 Vue.js Advent Calendar 2018의 첫날 기사입니다.

SVG 초보자가 SVG에서 놀고있는 기록입니다.
Vue를 사용하면 상태 관리가 간단하고 SVG를 작성하는 데 집중할 수있었습니다.

여기에서 실제로 터치 https://akifo.github.io/vue-svg-text/

GitHub 리포지토리 (이동하지 않으면 미안해..) https://github.com/akifo/vue-svg-text

배경

어드벤트 캘린더 첫날의 테두리를 확보해, SVG로 2018년 Vue 캘린더를 북돋울 것이다! 라고 생각하고 있습니다만, 미완성 때문에, Vue 에 관한 정보는 서서히 가볍게 기재하겠습니다.

다음은 GitHub의 코드와는 다르지만 원래의 생각을 조금 기록해 둡니다.

<polygon>의 points를 배열에서 문자열로

<polygon> 에서 사각형을 지정하려면 다음과 같이 "0,0 100,0 100,100 0,100" 를 씁니다.

<polygon points="0,0 100,0 100,100 0,100"></polygon>

points 를 Vue 로 조작할 수 있도록(듯이) 하기 위해서, 다음과 같이 재기록합니다.

<polygon :points="points"></polygon>

이 points를 JavaScript에서 문자열로 유지하지만 원래 데이터 (pointsArray)는 배열로 유지됩니다. 앞으로 포인트를 늘리거나 변경할 수 있도록 하는 것이 목적으로 배열로 하고 있습니다.

배열의 pointsArray에서 문자열의 points로 좋은 느낌으로 변환하고 있습니다.

  data() {
    return {
      pointsArray: [[0, 0], [100, 0], [100, 100], [0, 100]],
    }
  },
  computed: {
    points() {
      return this.pointsArray.join(' ') // "0,0 100,0 100,100 0,100"
    }
  }

이제 포인트를 늘릴 때는 pointsArray를 조작하면 자동으로 points도 변경되어 좋은 느낌이 들었습니다.

SVG의 <text>를 다시 그리지 못하는 문제

msg 라고 하는 데이터가 존재해, 다음과 같이 SVG 로 렌더링 하려고 하고 있는 경우, msg 의 변경시에 다시 렌더링 되지 않는 문제가 있었습니다.

<text>{{ msg }}</text>

이 문제를 해결하기 위해 watch를 사용하여 msg 변경시 빈 문자열을 한 번 할당합니다.

<text>{{ text }}</text>

  watch: {
    msg(val) {
      this.text = ''
      this.$nextTick(() => {
        this.text = val
      })
    }
  }

향후 업데이트 예정

리팩터하고 GitHub Qiita로 업

$emit 및 Vuex 사용

Vuex : getters를 사용할 때 state에있는 데이터를 다시 쓰지 않는 쓰기

SVG 지식 정리 <linearGradient> <pattern> <mask> <clipPath> etc

로고를 만들고 PNG 이미지로 다운로드 할 수있는 곳까지 코드를 작성하십시오

라이센스 정보

아직 어떤 라이선스로 할지 결정하고 있지 않습니다만, 앞으로 소재 서비스를 이용해 텍스처를 추가하려고 생각하고 있으므로, 거기에 맞춘 라이선스가 된다고 생각합니다.