개요

Nuxt (와 vuetify)로 만든 페이지의 배경에 Trianglify를 사용하려고했지만 문서를 찾을 수 없습니다.
어떻게 든 구현할 수 있었기 때문에 메모로 남겨 둡니다.

Trianglify

Trianglify는 아름다운 다각형 같은 이미지를 생성하는 라이브러리입니다.
CDN과 npm 모두 제공됩니다.


htp // q로 hlf. 코 m/t 리안 gぃfy/

CDN

CDN에서 호출 할 때 nuxt.config.js의 head에 씁니다.

nuxt.config.js

head: {
  script: [{ src: 'https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js' }]
},

배경에 맞추고 싶기 때문에, layout/default.vue 로 이용합니다.

layout/default.vue

<template>
  <v-app id="background">
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  mounted() {
    this.addTriangleTo(document.getElementById('background'))
  },
  methods: {
    addTriangleTo(target) {
      const dimensions = target.getClientRects()[0]
      const pattern = Trianglify({
        width: dimensions.width,
        height: dimensions.height
      })
      target.style['background-image'] = 'url(' + pattern.png() + ')'
    }
  }
}
</script>

이것으로도 할 수 있었습니다만, Trianglify is not defined 라고 화내는 것이 가끔 있거나,,,.
어쩌면 좋지 않은 쓰기 방법이라고 생각합니다.

npm

npm으로 떨어뜨린 것을 이용할 때는 한 번 plugin으로 합니다.

npm install trianglify --save

plugins/trianglify.js

import Vue from 'vue'
import Trianglify from '../node_modules/trianglify/dist/trianglify.min.js'

Vue.prototype.$addTriangleTo = (target) => {
  const dimensions = target.getClientRects()[0]
  const pattern = Trianglify({
    width: dimensions.width,
    height: dimensions.height
  })
  target.style['background-image'] = 'url(' + pattern.png() + ')'
}

플러그인을 활성화합니다.

nuxt.config.js

plugins: ['~/plugins/trianglify.js'],

똑같이 layout/default.vue 에 해당합니다.

layouts/default.vue

<template>
  <v-app id="background">
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  mounted() {
    this.$addTriangleTo(document.getElementById('background'))
  }
}
</script>

이제 좋은 느낌의 배경을 설정할 수있었습니다.

Trianglify를 배경으로 만든 서비스

h tps : / / ゔ ぃ mc 게네라와 r. 음 b. 아 p/
(작성 중)

참고

htps : // 기주 b. 코 m / q로 hlf / t 리안 g ぃ fy
htps : // 기주 b. 이 m/q로 hlf/t리안 gぃfy/bぉb/마s r/에ぁmpぇs/바시c우우b-에에mpぇ. HTML
htps : //는 ck에서. jp/아 r ゔぇ s/26679/