Help us understand the problem. What is going on with this article?

SVG で遊ぶのに Vue.js を利用する

More than 1 year has passed since last update.

この記事は Vue.js Advent Calendar 2018 の 1 日目の記事です。

SVG 初心者が SVG で遊んでいる記録です。
Vue を使うことで状態管理が簡単にでき、SVG を書くことに集中できました。

vue-svg.gif

背景

アドベントカレンダー初日の枠を確保し、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 画像としてダウンロード可能なところまでコードを書く

ライセンスについて

まだ、どのライセンスにするか決めていませんが、これから素材サービスを利用してテクスチャを追加しようと考えているので、それにあわせたライセンスになると思います。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away