プラグインの作成

まず、カスタムディレクティブとしてウォーターマーク機能を実装します。以下のコードを directives.js などのファイルに保存します。

import Vue from 'vue'

/**
 * Vue ウォーターマークディレクティブ
 * @param {HTMLElement} el - ディレクティブが適用される要素
 * @param {Object} binding - ディレクティブのバインディングオブジェクト
 * @param {string} binding.value.text - ウォーターマークのテキスト
 * @param {string} [binding.value.fontFamily="16px Microsoft JhengHei"] - フォントスタイル
 * @param {string} [binding.value.color="rgba(215, 215, 215, 0.2)"] - テキストの色
 * @param {number} [binding.value.canvasWidth=400] - キャンバスの幅
 * @param {number} [binding.value.canvasHeight=200] - キャンバスの高さ
 * @param {number} [binding.value.rotation=-20] - テキストの回転角度（-90から0度、-90度は含まない）
 */
Vue.directive('watermark', (el, binding) => {
  // バインディングから値を取得
  const watermarkText = binding.value.text
  const fontFamily = binding.value.fontFamily || '16px Microsoft JhengHei'
  const textColor = binding.value.color || 'rgba(215, 215, 215, 0.2)'
  const canvasWidth = binding.value.canvasWidth || 400
  const canvasHeight = binding.value.canvasHeight || 200
  const rotationAngle = binding.value.rotation || -20

  // ウォーターマークを適用する関数
  function applyWatermark(parentNode) {
    // キャンバス要素を作成
    const canvas = document.createElement('canvas')
    parentNode.appendChild(canvas)
    canvas.width = canvasWidth
    canvas.height = canvasHeight
    canvas.style.display = 'none'

    // 2Dコンテキストを取得
    const ctx = canvas.getContext('2d')
    
    // テキストの回転を設定
    ctx.rotate((rotationAngle * Math.PI) / 180)
    
    // フォントと色を設定
    ctx.font = fontFamily
    ctx.fillStyle = textColor
    
    // テキストの配置を設定
    ctx.textAlign = 'left'
    ctx.textBaseline = 'middle'
    
    // キャンバスにテキストを描画
    ctx.fillText(watermarkText, 0, canvasHeight / 2)
    
    // 親要素の背景にキャンバスを設定
    parentNode.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`
  }

  // ウォーターマークを適用
  applyWatermark(el)
})

プラグインの使用方法

作成したディレクティブを Vue プロジェクトで使用する方法を説明します。

1. インポート

プラグインファイルを main.js または任意のコンポーネントでインポートします。

import '@/utils/directives.js'

2. 設定オブジェクトの準備

ウォーターマークの設定を保持するオブジェクトをコンポーネントの data に定義します。

data() {
  return {
    watermarkSettings: {
      text: 'サンプルウォーターマーク', // ウォーターマークのテキスト
      fontFamily: '20px 微软雅黑', // フォントスタイル
      color: '#bcbcbc', // テキストの色
      canvasWidth: 150, // ウォーターマークの水平間隔
      canvasHeight: 100, // ウォーターマークの垂直間隔（文字の高さより小さい場合、文字の高さが適用される）
      rotation: -30 // 回転角度（-90から0度、-90度は含まない）
    }
  }
}

3. テンプレートでの使用

設定したオブジェクトを v-watermark ディレクティブにバインドします。

<div v-watermark="watermarkSettings">
  <!-- この要素にウォーターマークが適用されます -->
</div>

完全なデモコード

以下は、上記のすべてを組み合わせた完全な Vue コンポーネントの例です。

<template>
  <div id="watermark-demo">
    <div class="content-area" v-watermark="watermarkSettings">
      <!-- ここにコンテンツを配置 -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import '@/utils/directives.js' // プラグインをインポート

export default {
  name: 'WatermarkDemo',
  data() {
    return {
      watermarkSettings: {
        text: 'サンプルウォーターマーク',
        fontFamily: '20px 微软雅黑',
        color: '#bcbcbc',
        canvasWidth: 150,
        canvasHeight: 100,
        rotation: -30
      }
    }
  }
}
</script>

<style>
#watermark-demo .content-area {
  width: 100%;
  height: 1000px;
  /* その他のスタイル */
}
</style>